SVG иконки

Лучший способ подключить SVG спрайты с иконками применить теги defs и symbol, которые определяют графические объекты для дальнейшего использования.

Оглавление:
  1. Комбинировать defs и symbol
  2. Подключить SVG в HTML

Графические объекты SVG:

<svg style="display:none;">
<symbol id="icon1" viewBox="0 0 100 100">
<title>Заголовок</title>
<!-- path d='' -->
</symbol>

<symbol id="icon2" viewBox="0 0 50 50">
<title>Заголовок</title>
<!-- path d='' -->
</symbol>
</svg>

Отобразить иконки:

<svg class="icon icon-one" aria-label="иконка SVG" height="16px" width="16px">
<use xlink:href="#icon1" />
</svg>
<svg class="icon icon-two" aria-label="иконка SVG" height="16px" width="16px">
<use xlink:href="#icon2" />
</svg>

иконки отображаются в теге use, который ссылается на объект с определённым идентификатором.

Комбинировать defs и symbol

<svg style="display:none;">
<defs>
<g id="icon1">
<!-- path d=''-->
</g>
</defs>

<symbol id="icon2" viewBox="0 0 100 100">
<title>Заголовок</title>
<!-- path d='' -->
</symbol>
</svg>
<svg class="icon icon-one" aria-label="иконка SVG" viewBox="0 0 50 50">
<use xlink:href="#icon1" />
</svg>
<svg class="icon icon-two" aria-label="иконка SVG" height="16px" width="16px">
<use xlink:href="#icon2" />
</svg>

Тег symbol в отличии от слоя defs имеет свой собственный атрибут viewBox, что делает этот метод очень простым в использовании. Этот способ работает во всех основных браузерах, кроме ИЕ9+. Для этого браузера есть скрипт svg4everybody.

Цвет и размер для иконки указывается в CSS.

.icon {
  width: 1em;
  height: 1em;
  fill: currentcolor;
  vertical-align: top;
}

Пример

к меню ↑

Подключить SVG в HTML

Способ подключить внешний файл SVG с иконками к документу HTML.

<body>
<?php include_once("sprite.svg"); ?>

Скачать иконки SVG Google

На сайте IcoMoon предоставлено более 4000 бесплатных иконок SVG.