Почему svg с серой полосой по середине?

Question

[FavnAristotel]

Здравствуйте. Почему когда пытаюсь экспортировать лупу из макета в формате svg в фотошопе то экспортируется с серой полосой по середине ?
вот фото

Comments

[VoidVolker]

Это превью. А где результат? А что внутри самого SVG? А в исходном файле есть эта полоса?

[Adamos]

Открываешь блокнотом тот SVG и оставляешь из всех path только тот, у которого fill желтый.
Дольше спрашивать.

[FavnAristotel]

VoidVolker,
вроде все убрал и если png или jpeg делаю то нет этой полосы.

[Ankhena]

FavnAristotel, где результат?
Либо наоборот, исходник.

Но, конечно, макет в фотошопе в 2025 году это просто праздник.
Полно каналов в тг, в которых публикуют ссылки на макеты в Фигме для тренировки.

Умение верстать откуда угодно это, конечно, хорошо, но
1. Фигма всё таки актуальнее.
2. Сами макеты в фотошопе скорее всего устаревшие, а навыки и приемы имеет смысл прокачивать актуальные. По крайней мере в первую очередь.

[FavnAristotel]

Adamos, спасибо, посмотрел через браузер сначала потом когда узнал что за иконку отвечает все остальное удали чего было очень много по сравнению с иконкой.

[FavnAristotel]

<svg id="PSDFreebies.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="24" viewBox="0 0 27 24">
  <defs>
    <style>
     

      .cls-11, .cls-13, .cls-2, .cls-4, .cls-8 {
        fill: #ffcb0f;
      }

     
      .cls-13 {
        font-size: 9.875px;
        font-family: FontAwesome;
        text-transform: uppercase;
      }
    </style>
  </defs>

  <g id="_01-Header" data-name="01-Header">
    <g id="Navigation">
      <text id="_" data-name="" class="cls-13" transform="translate(4.024 18.497) scale(2.025)"></text>
    </g>
  </g>
</svg>

это то что в svg получилось по моему это не svg можете объяснить ?
как сделать с этим что бы при наведении менялся цвет

[VoidVolker]

FavnAristotel, стандартная иконка обычного иконочного шрифта. На их сайте можете спокойно скачать иконку отдельно сразу вектором. Цвет задаётся стилями.

[Adamos]

FavnAristotel, вам что надо-то от этой иконки? Если использовать в макете наравне с другими - просто подключите тот FontAwesome и вставьте в верстку <i class="icon-search" style="color: #FC0"></i>

[Ankhena]

FavnAristotel, сохранять эту иконку вот в таком виде вообще не имеет смысла, она всё равно привязана к шрифту.
Либо возьмите шрифт (хуже) либо скачайте иконку в правильном svg, где она вектор (лучше).
Сейчас нет смысла использовать иконочные шрифты типа fontawesome. Сейчас спокойно можно использовать маски, инлайнить в кастомные свойства или спрайты (из svg, не из symbol!).

[Adamos]

Ankhena,

нет смысла использовать иконочные шрифты

А смысл НЕ использовать то, что одной строчкой подключается и гарантированно работает без сюрпризов - есть?

[Ankhena]

Adamos,
1. Мусор в разметке при использовании большинством пользователей.
2. Тянется весь шрифт, а используют обычно десяток иконок.
Либо нужно чистить от лишнего.
3. Сложности с добавлением других иконок.
2 и 3 => проще собрать спрайт.
4. Ведет себя как шрифт, line-height и т.д.
5. Некоторое время назад читала про доступность контента псевдоэлементов для скринридеров.

Т.е. шрифт - это целая коллекция svg иконок, плюс к ним файл стилей + к ним мусор в разметке.

Вместо просто набора из только нужных иконок, которые можно использовать везде, хоть в стилях, хоть в разметке. Либо этот же набор в кастомках, если не нужны use или img.

Да, когда были проблемы с использованием svg, иконочный шрифт выглядел соблазнительным и удобным. Сама использовала и радовалась. Но теперь это превратилось в архаизм, про который рассказываю студентам лишь для того, чтобы не удивились и понимали, что происходит, если попадутся такие сайты с таким способом вставки иконок в поддержку.

[Adamos]

Ankhena, просто мой опыт разработки и поддержки показывает, что "набор только нужных иконок" - это то и дело увеличивающееся множество. Когда при этом достаточно найти, как нужный значок обозвали в FA - это как-то проще, чем каждый раз возня со спрайтами. А вес у этого "ненужного" по нынешним меркам ну совершенно незначительный.

[Ankhena]

Adamos, если дизайнер использует только иконки из шрифта, то почему бы и нет.

чем каждый раз возня со спрайтами

Какая ещё возня?
Даже если руками вставлять, то это copy as svg в фигме и ctrl + v в спрайте и дописать id. Не говоря уж про автоматизации.

[Adamos]

Ankhena, мне как-то ближе ситуация, когда никакого дизайнера нет. Возможно, поэтому ;)

[Сергей delphinpro]

Ankhena,

Но, конечно, макет в фотошопе в 2025 году это просто праздник.

Соглашусь. Но заказчиков не выбирают =)
Ну то есть выбирают, конечно, но всякое бывает. Мне тоже в этом месяце прилетал макет в фотошопе. Я был слегка удивлен, но с ценником они спорить не стали, поэтому я окунулся в прошлое.

[Ankhena]

Сергей delphinpro, конечно, нужно добавлять и хоть из jpg.

Answer 1

[Сергей delphinpro]

Сначала написал ответ, думая, что вы с фигмой работаете.
В фотошопе хз что делать.
Но ведь вы всегда можете открыть экспортированную иконку в иллюстраторе и убрать лишнее.