`<svg>`

Тег-обёртка для отображения векторной графики на странице.

Время чтения: 8 мин

Кратко

Скопировано

SVG — векторный формат графики, доступный в вебе. Формат основан на технологии XML.

До появления SVG мы могли использовать только растровые изображения: форматы JPG, PNG. Но растровые изображения имеют ряд недостатков:

Растровые изображения плохо поддаются масштабированию. Это стало особенно актуальным с появлением ретина экранов.
Растровые изображения, как правило, весят существенно больше, чем их svg-собратья.
Растровые изображения можно редактировать только при помощи графических редакторов, в то время как svg-изображения представляют собой читаемый код.
Растровые изображения статичны. SVG внутри себя может содержать CSS-стили или JS-скрипты.

Пример

Скопировано

Для сравнения посмотрим на PNG и SVG версии одного и того же изображения:

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

Заглянем в исходный код svg-картинки:

        
          
          <svg  xmlns="http://www.w3.org/2000/svg"  fill-rule="evenodd"  clip-rule="evenodd"  viewBox="0 0 24 24">  <path    d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0      114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0      01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016      0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z"  /></svg>
          <svg
  xmlns="http://www.w3.org/2000/svg"
  fill-rule="evenodd"
  clip-rule="evenodd"
  viewBox="0 0 24 24"
>
  <path
    d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0
      114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0
      01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016
      0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z"
  />
</svg>

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

Как пишется

Скопировано

Чаще всего svg-иконки или изображения вам будет предоставлять дизайнер или вы сможете найти их на различных стоках:

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

Контейнер `svg`

Скопировано

SVG не может быть записано без оборачивающего парного тега svg. Так браузер поймёт, что читать этот код нужно по особым правилам и отрисует картинку на странице.

Обводка `stroke`

Скопировано

Мы можем управлять толщиной и цветом линии, которая будет соединять все перечисленные точки svg-изображения. Причём можно задать один общий атрибут stroke для контейнера <svg>, а можно задавать его каждому отдельному вложенному элементу, сделав обводку разных частей картинки разного цвета.

Подробнее об атрибуте stroke

Заливка `fill`

Скопировано

Мы можем задать заливку нарисованной фигуры или оставить её прозрачной, только с обводкой. Если решите залить фигуру, то для этого используйте атрибут fill.

Подробнее об атрибуте fill

Как подключать

Скопировано

Есть несколько способов подключения svg-изображения к веб-странице. Каждый из них имеет свои преимущества и недостатки.

`<img>`

Скопировано

Самый простой способ — использовать тег <img> и указать путь до svg-картинки в значении атрибута src.

        
          
          <img class="icon" src="img/svg/dots.svg" alt="dots icon">
          <img class="icon" src="img/svg/dots.svg" alt="dots icon">

При таком способе мы можем легко управлять размерами картинки на странице. Но есть и минусы — не получится изменить цвет фона или заливки у самого SVG при помощи CSS.

`background-image`

Скопировано

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

        
          
          <a href="https://facebook.com" class="icon fb"> Facebook </a>
          <a href="https://facebook.com" class="icon fb"> Facebook </a>

        
          
          .icon {  display: block;  width: 28px;  height: 28px;  background-repeat: no-repeat;  background-position: center;  background-size: contain;}.fb {  background-image: url(../img/svg/fb.svg);}
          .icon {
  display: block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fb {
  background-image: url(../img/svg/fb.svg);
}

В этом случае мы также не имеем возможности управлять стилями SVG через CSS.

Вставка в HTML

Скопировано

Код SVG можно вставить прямо в HTML-разметку станицы.

        
          
          <div class="dots">  <svg    xmlns="http://www.w3.org/2000/svg"    fill-rule="evenodd"    clip-rule="evenodd"    viewBox="0 0 24 24"    class="dots-icon"  >    <path      d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0        114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0        01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016        0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z"    />  </svg></div>
          <div class="dots">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill-rule="evenodd"
    clip-rule="evenodd"
    viewBox="0 0 24 24"
    class="dots-icon"
  >
    <path
      d="M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0
        114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0
        01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016
        0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z"
    />
  </svg>
</div>

При таком способе подключения мы можем управлять стилями SVG через стили. Это даёт возможность даже анимировать векторное изображение! 🎉

        
          
          .dots-icon {  animation: animation 3s infinite alternate;}@keyframes animation {  from {    fill: red;  }  to {    fill: green;  }}
          .dots-icon {
  animation: animation 3s infinite alternate;
}

@keyframes animation {
  from {
    fill: red;
  }
  to {
    fill: green;
  }
}

Открыть демо в новой вкладке

Неприятная особенность: если одна и та же SVG-картинка используется в нескольких местах на сайте, и в какой-то момент вы захотите в ней что-то изменить, то нужно будет найти все вставки и вносить исправления в код. При вставке SVG при помощи <img> или background-image достаточно будет внести изменения в svg-файл и правки применяться ко всем картинкам.

Атрибуты

Скопировано

fill — отвечает за заливку фигуры. Может использоваться как для всего контейнера svg, так и для отдельных частей. Более подробно тут → fill.
stroke — отвечает за обводку фигуры. Может использоваться как для всего контейнера svg, так и для отдельных частей. Более подробно тут → stroke.
viewBox — атрибут, отвечающий за размеры окна отображения. Значением будет 4 цифры: min-x, min-y, width и height. В примере выше у контейнера svg указано следующее viewBox="0 0 24 24". Значит окно отображения будет начинаться в координатах 0 по оси x и 0 по оси y, а по ширине и высоте будет 24 пикселя. Может указываться как для отдельных элементов, так и для всего контейнера. При помощи этого атрибута можно кадрировать изображение, указывая нужные значения.
width и height — атрибуты, указывающие размеры svg-элемента. Значением может быть число без указания единиц измерения, тогда браузер будет воспринимать его как пиксели: width="100" height="100". Можно указать в процентах: width="100%" height="100%". Могут указываться как оба сразу, так и по отдельности. Если планируете вставлять SVG в HTML кодом, то отдайте предпочтение атрибуту viewBox вместо указания ширины и высоты. Тогда при изменении размеров через CSS картинка будет подстраиваться под размеры с сохранением пропорций.
preserveAspectRatio — атрибут, значение которого указывает браузеру нужно ли сохранять пропорции при масштабировании изображения. Если значение отличается от none, то состоит из двух частей: первая отвечает за выравнивания, вторая отвечает за пропорции.

Значения для выравнивания:

xMinYMin, xMidYMid, xMaxYMax — выравнивает изображение по левому верхнему углу, по центру по обеим осям или по правому нижнему углу.

Значения для обрезки:

meet — картинка стремиться уместиться целиком с сохранением пропорций. Чем-то похоже на поведение background-size: contain для фона.
slice — изображение пытается заполнить собой всё доступное пространство. Похоже на background-size: cover.

Подсказки

Скопировано

💡 Если захотите внести какие-то сложные правки в SVG, а дизайнера под рукой нет, то можно использовать SVG-Edit, SVG-Edit Online, inkscape или Adobe Illustrator.

💡 Всегда перед использованием SVG в проекте прогоняйте его через оптимизатор SVGO. Он удалит всё ненужное, код станет приятнее и будет меньше весить.

💡 С SVG можно взаимодействовать при помощи JavaScript 🤟

Документация и руководство по SVG

Скопировано

Учебные руководства

Скопировано

Перевод руководства от MDM Web Docs — SVG — учебное руководство;
Руководство от W3C с отличными иллюстрациями — An SVG Primer for Today's Browsers..

Документация MDM Web Docs

Скопировано

Справочник SVG элементов;
Справочник SVG атрибутов;
Общий список ссылок на ресурсы по SVG от MDM Web Docs SVG. Документация MDM Web Docs.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

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

Кратко

Пример

Как пишется

Контейнер svg

Обводка stroke

Заливка fill

Как подключать

<img>

background-image

Вставка в HTML

Атрибуты

Подсказки

Документация и руководство по SVG

Учебные руководства

Документация MDM Web Docs

На практике

Алёна Батицкая советует

Читайте также

CSS-анимации

<canvas>

Позиционирование элементов с помощью JS

Контейнер `svg`

Обводка `stroke`

Заливка `fill`

`<img>`

`background-image`

`<canvas>`