@mimocrocodile

SVG иконки на сайте. Как правильно вставлять?

5f08dc1d80be5302475483.jpegВопрос по SVG иконкам, а именно: каким образом лучше всего вставлять иконки на страницу?

Я нашёл много способов на крупных сайтах. И все эти способы разные. Я не могу понять в чём преимущества одних перед другими.

Что я нашёл:
- Вставка svg кода в< span>, т.е. код картинки прямо в html документе.
- Вставка сразу в - Такая же вставка через тег . (но ведь специфика...
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
@FabiBoom
  • Вставка через элемент img - если у вас изображение контентное (содержат важное для пользователя), например логотип.
  • Вставка через в качестве background-image: url() - если у вас изображение декоративное (обычные иконки, как у ваших примерах) и никак не изменяется при взаимодействии с пользователем (об этом ниже). Например, для простых иконок к заголовкам разделов можно использовать псевдоэлементы ::after и ::before + background-image c урлом на свгшку. Не засоряет таким образом разметку.
  • Вставка через элемент svg прямо в код - если у вас изображение декоративное и нужно будет при каких-то условиях, например, изменить заливку свгшки или цвет обводки с помощью CSS. Например, красная иконка в кнопке при наведении на кнопку становиться белой. Проблема в том, что, чтобы изменить ее цвет через CSS способом с псевдоэлементом мы можем только заменив на другую такую же картинку, но с белым цветом. А можно при наведении сделать так:
    button:hover svg {
       fill: white;
    }

    И все - обратиться к этой иконке и залить ее белым цветом. Поэтому, чтобы управлять возможностями свгшек через стили эта SVG должна быть именно в разметке.

Вариантов использования много и тут следует смотреть по конкретной ситуации.
Есть еще возможность не добавлять весь свг код в разметку, а использовать свг спрайты, что очень рекомендую. Ими тоже отлично управлять через CSS, упрощает разметку, особенно, если какая-то иконка используется многократно. Вот пара ссылок:
Раз
Два
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы