SVG изображения, сэкономить трафик и время загрузки страницы.

Привет, svg такая же страничка только с своей спецификой, трюк с удалением лишних знаков и пробелов здесь тоже работает.

В сем нам известный гамбургер:

<svg width=»32″ height=»32″ viewBox=»0 0 32 32″ fill=»none» xmlns=»http://www.w3.org/2000/svg»>
<path d=»M3 8V6H21V8H3Z» fill=»black»/><path d=»M3 13H21V11H3V13Z» fill=»black»/><path d=»M3 18H21V16H3V18Z» fill=»black»/>
</svg>

Размер такого документа составляет 229 байт вроде бы немного но если нам нужно его использовать несколько десятков раз?

Уберем все лишнее и присвоим индификатор нашему гамбургеру

<svg class=»icon» fill=»var(—color)»><symbol id=»hamburger»><path d=»M3 8V6H21V8H3Z»/><path d=»M3 13H21V11H3V13Z»/><path d=»M3 18H21V16H3V18Z»/></svg>

Теперь наш SVG занимает всего лишь 156 байт. symbol id- Используется для индефикации символа для его многократного использования.

Создадим обычный HTML файл и запишем туда нашу svg разметку:


<div id=»svg»>
<svg class=»icon» fill=»var(—color)»><symbol id=»hamburger»><path d=»M3 8V6H21V8H3Z»/><path d=»M3 13H21V11H3V13Z»/><path d=»M3 18H21V16H3V18Z»/></svg>
… Много SVG
</div>

Я любитель в php и делаю так:
Подключаю файл с svg и css(display) его скрываю. Так же использую css для указания цвета иконки например для светлой темы это темные иконки для темной темы светлые.

<style>
.icon{—color:darkgray;}
</style>

И в теле странички или в скрипте нужно написать:

<svg class=»icon» width=»32″ height=»32″ viewBox=»0 0 32 32″ fill=»var(—color)»><use xlink:href=»#hamburger»></use>
</svg>

Теперь вам не нужно загружать кучу картинок так как используется всего лишь одна и выводится там где вам нужно.