Я ♥ SVG

Владимир Кузнецов, Engine6

Какие есть способы отображения SVG в браузере?

SVG фоном у элемента

            .icon {
              background-image: url('external.svg');
            }
            .another-icon {
              background-image: url('data:image/svg+xml;base64,…');
            }

Какие есть способы отображения SVG в браузере?

Встраивание <svg>

            <!DOCTYPE html>
            <html>
            …
            <svg xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 20 20">
              <path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path>
            </svg>
            …
            </html>

<defs>

            <svg xmlns="http://www.w3.org/2000/svg">
              <defs>
                <path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"
                      id="icon_nav_up"></path>
              </defs>
            </svg>

<defs>

            <svg xmlns="http://www.w3.org/2000/svg">
              <defs>
                <path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"
                      id="icon_nav_up"></path>
              </defs>
            </svg>

<use>

            <svg xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 20 20">
              <use xlink:href="#icon_nav_up"></use>
            </svg>

<use>

            <svg xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 20 20">
              <use xlink:href="#icon_nav_up"></use>
            </svg>

<symbol>

            <svg xmlns="http://www.w3.org/2000/svg">
              <symbol id="icon_nav_up" viewBox="0 0 20 20">
                <path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path>
              </symbol>
            </svg>

<symbol>

            <svg xmlns="http://www.w3.org/2000/svg">
              <symbol id="icon_nav_up" viewBox="0 0 20 20">
                <path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path>
              </symbol>
            </svg>

«Библиотека» контуров

Почему бы не сослаться на внешний файл?

            <svg xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="external.svg#icon_nav_up"></use>
            </svg>

По стандарту в ссылке можно использовать любой интернационализированный идентификатор ресурса.

Internet Explorer screwed up again

Мы пробовали:

В итоге нашли оптимальную последовательность действий.

Шаг 1

Преобразуем SVG в строку JavaScript

            var icon = '<svg xmlns="http://www.w3.org/2000/svg">' +
              '<symbol id="icon_nav_up" viewBox="0 0 20 20"><pat' +
              'h d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path></s' +
              'ymbol></svg>';

Шаг 2

Подключаем скрипт в <head>

            <script src="svg-icon.js"></script>

Шаг 3

Добавляем на страницу пустой <div>

            <div id="svg-icon-placeholder"></div>

Шаг 4

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

            <script>
              document.getElementById('svg-icon-placeholder')
                .innerHTML(icon);
            </script>

Плюсы:

Автоматизируем процесс

grunt-svg2string

Демонстрация

            .icon {
              transition: fill 0.5s;
            }
            .icon:hover {
              fill: blue;
            }
        
            <svg class="icon">
              <use xlink:href="#icon_heart"></use>
            </svg>
        
            .icon {
              transition: transform 0.5s;
            }
            .icon:hover {
              transform: scale(1.75);
            }
        
            <svg class="icon">
              <use xlink:href="#icon_heart"></use>
            </svg>
        
            .icon > use {
              transition: transform 0.5s;
            }
            .icon:hover > use {
              transform: scale(1.75);
            }
        
            <svg class="icon">
              <use xlink:href="#icon_heart"></use>
            </svg>
        
            .icon {
              transition: transform 0.5s;
              transform-origin: 100% 0;
            }
            .icon:hover {
              transform: scale(1.75);
            }
        
            <svg class="icon">
              <use xlink:href="#icon_heart_left"
                   class="icon__left></use>
              <use xlink:href="#icon_heart_right"
                   class="icon__right></use>
            </svg>
        
            <svg xmlns="http://www.w3.org/2000/svg">
              <defs>
                <symbol id="icon-1">
                  <g class="group-1">…</g>
                  <g class="group-2">…</g>
                </symbol>
                <p class="path" d="…"></p>
              </defs>
            </svg>

SVG SMIL animation

            <pattern id="animated-spiral-pattern"
                  x="0" y="0" width="1" height="1">
              <animateTransform attributeName="patternTransform"
                    attributeType="XML" type="rotate"
                    from="360 90 90" to="0 90 90" dur="3s"
                    repeatCount="indefinite"></animateTransform>
              <g id="spiral-shape">…</g>
            </pattern>
Can I Use SVG SMIL animation?

<use/>
vs.
<use></use>

Альтернативы для старых браузеров

Альтернативная пиктограмма

            .icon {
              display: inline-block; /* или block */
              width: 32px;
              height: 32px;
            }
            .no-svg .icon {
              background: url('icon.png') no-repeat 0 0;
            }

Доступность содержимого

<svg>

            <svg xmlns="http://www.w3.org/2000/svg">
              <title>Search</title>
              <desc>Sitewide keyword search</desc>
              …
            </svg>

Спасибо!

Владимир Кузнецов

noteskeeper.ru
@mista_k