<svg>

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-иконки или изображения вам будет предоставлять дизайнер или вы сможете найти их на различных стоках:

• icomoon.io
• flaticon.com
• iconmonstr.com

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

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

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

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

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

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

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

Самый простой способ — использовать тег <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.

Если 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.

Код 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 🤟

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

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

На практике

Скопировать ссылку "На практике" Скопировано

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

Скопировать ссылку "Алёна Батицкая советует" Скопировано

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