Как вставить svg в html

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Первый способ

Первый и самый простой — элемент , который размещается прямо в HTML-коде. Это эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

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

Второй способ

Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.

.picture

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

Третий способ

Третий способ — вставить содержимое SVG-файлов прямо на страницу, как любые другие теги. При таком способе подключения можно управлять стилями SVG через CSS.

С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты. Можно, например, менять цвет заливки при наведении или даже анимировать векторное изображение.

.navigation-icon

width — ширина в пикселях или процентах.

height — высота в пикселях или процентах.

viewBox — положение и размер области просмотра.

Значение fill отвечает за цвет изображения.

SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Если хотите закопаться глубже, почитайте SVG — учебное руководство от MDN Web Docs.

В итоге: способов множество и все чем-то хороши. Выбирайте подходящий под ваши задачи.

Материалы по теме

Как проектировать, создавать и анимировать SVG
Как сделать интерактивную SVG-диаграмму
Форматы изображений для веба

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как размещать svg в html

я новичок изучаю веб своими силами и у меня вылезло несколько вопросов по поводу использования svg на странице html.

1. Как правильно вставлять svg в html?

Вставить svg инлайново(просто вставить весь код svg в html).
Если иконок больше одной, то отдельно и вставлять их в html где они используются.
Вставлять с помощью object, iframe, embed.
Собрать все иконки в спрайт и вытаскивать их с помощью use.

2. Где хранить спрайт?

В html или отдельным файлом спрайтом. Умею вытаскивать иконки из спрайта, если он весь лежит в html или даже если он лежит отдельным файлом.svg где-нибудь в картинках. Уметь то умею но как делать это. А если быть точнее, то где хранить спрайт чтобы не было проблем с кэшированием или какие там проблемы еще бывают…

Можете привести примеры из реальных проектов, что бы было, на что опереться для дальнейшего развития.

3. Использовать внешние стили или писать их внутри svg?

Отслеживать
задан 24 янв 2023 в 10:10
28 1 1 серебряный знак 5 5 бронзовых знаков
Возможный дубликат вопроса: С помощью какого тега лучше всего добавлять svg
24 янв 2023 в 17:16

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Как правильно, мне сказать сложно. Поэтому скажу как делаю я ).

Делаю несколько спрайтов, объединяя по какой-нибудь своей логике, и скидываю в /images/icons/ .
Подключаю через use .

Вроде как это один способов, который позволяет кэширование.
Также позволяет использовать указание некоторых svg-параметров через css.

Отслеживать
ответ дан 24 янв 2023 в 10:33
656 4 4 серебряных знака 6 6 бронзовых знаков

Знаю несколько способов а какой будет правильный что бы потом не было ни вопросов, ни проблем с той, же интерактивностью (анимацией если придется анимировать).

#1. object

Лучший способ, чтобы реализовать анимацию, интерактивность, стилизацию, масштабирование это:

Этим способом можно добавлять как один файл SVG, так и несколько иконок, объединенных в спрайт. Этой теме посвящен раздел с меткой — svg-спрайт

#2. Инлайн добавление кода SVG в HTML

Если иконок немного и код svg компактный, то вполне допустим этот способ для реализации анимации и всего остального:

Ниже код анимации шестеренок с кнопками пуска и остановки вращения.

#3. Использование тега.

Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов .

Это может быть хорошим методом, если вы хотите полностью отделить SVG код и скрипт на вашей главной странице. Однако манипуляции SVG изображениями с главной страницы при помощи JavaScript будут немного сложнее.

#4. Другие способы добавления SVG, которые делают анимацию, стилизацию невозможной

Можно, как обычно для любого другого изображения задать ширину, высоту.

По соображениям безопасности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE10 , Edge , Safari , Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.

Для покраски изображений остается только один способ: фильтры SVG и CSS

Ниже примеры изменения цвета при наведении:

 img:not(:hover) < transition: 2s; filter: saturate(0%); -webkit-filter: saturate(0%); >img:hover

 .img:hover

О других способах добавления SVG в HTML здесь

Как верстальщику работать с SVG

Узнаём про векторную графику, добавляем svg-картинки к HTML и творим всякое-разное с их цветом.

Максим Васянович

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

Помимо привычных растровых форматов (JPG, PNG, GIF), в веб-разработке широко применяют векторный — SVG.

Что такое SVG

SVG (сокращение от Scalable Vector Graphics — «масштабируемая векторная графика») — это вид графики, которую создают с помощью математического описания геометрических примитивов (линий, кругов, эллипсов, прямоугольников, кривых и так далее), которые и образуют все детали будущего изображения.

То есть в этом формате хранится не сама картинка, а инструкции для её построения по точкам и кривым. Они написаны на языке разметки SVG, расширяющем XML.

Достоинства SVG

Прелесть SVG раскрывает масштабирование. Если увеличить растровое изображение сверх 100%-ного размера — проявляется пикселизация: отдельные точки превращаются в одноцветные блоки пикселей, границы областей становятся ступенчатыми, и в целом картинка выглядит негладко, некрасиво.

Если же увеличить векторное изображение — все его детали останутся чёткими, то есть их видимое разрешение не уменьшится. Поэтому svg-картинки отображаются на самых больших разрешениях без потери качества — и просто идеальны для адаптивных сайтов.

У svg-графики есть ещё одно достоинство. Её можно открывать как HTML или CSS и менять в любом редакторе кода, и даже на лету. Подробнее об этом ниже.

И наконец, при прочих равных SVG весит намного меньше растровых изображений.

Недостатки SVG

Их мало. Во-первых, SVG не поддерживается очень старыми браузерами, а во-вторых, не используется для фотографий.

Как подключить SVG к html-странице

Есть три варианта добавления векторной графики. У каждого свои показания к применению.

Через тег

Здесь всё так же, как и с растровой графикой: