Использование "Font Awesome" в SVG

[germanydletest 455]

Многие слышали иконочных шрифтах и используют их, к примеру Font Awesome, но время идёт, спрос на уменьшение веса страницы и снижение количества запросов к серверу, всё больше. Поэтому решил с вами поделится одним способом, как использовать иконочный шрифт, но при этом не подключая его к сайту, что снизит количество запросов и вес страницы (примерно на 100кб). Пример буду приводить на шаблоне "Default" DLE 11-11.1 версии. И так приступим. 

Для начала скачаем файлы из репозитория на github, теперь откроем файл

templates/Default/images/sprite.svg

в текстовом редакторе и в самый конец перед тегом </defs> добавим следующею конструкцию (1 такая конструкция равна одной иконке)

<symbol id="" viewBox="">
<title></title>

</symbol>

Затем определимся с тем, какая иконка нам нужна, к примеру это иконка принтера, значит для данной иконки нам нужно добавить id и title и у нас получится следующая конструкция

<symbol id="fa-print" viewBox="">
<title>fa-print</title>

</symbol>

так же на сайте рядом с названием иконки указан её unicode, в нашем случае это "f02f"

значит теперь нам нужно открыть файл f02f.svg в текстовом редакторе и скопировать оттуда значение viewBox и path и в итоге у нас получится такая конструкция 

<symbol id="fa-print" viewBox="0 0 1664 1792">
<title>fa-print</title>
<path d="M384 1536h896v-256h-896v256zm0-640h896v-384h-160q-40 0-68-28t-28-68v-160h-640v640zm1152 64q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128 0v416q0 13-9.5 22.5t-22.5 9.5h-224v160q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-224q-13 0-22.5-9.5t-9.5-22.5v-416q0-79 56.5-135.5t135.5-56.5h64v-544q0-40 28-68t68-28h672q40 0 88 20t76 48l152 152q28 28 48 76t20 88v256h64q79 0 135.5 56.5t56.5 135.5z"/>
</symbol>

Всё, сохраняем изменения в нашем файле

templates/Default/images/sprite.svg

и в любом нужном месте шаблона вставляем иконку нашего принтера таким образам

<svg class="icon fa-print"><use xlink:href="#fa-print"></use></svg>

вот и всё, таким образом можно использовать любые иконки данного шрифта, не подключая сам шрифт

 

P.S.: Мы на сайте используем 66 иконок от данного шрифта, файл templates/Default/images/sprite.svg увеличился  на 37кб, но зато мы удалили иконочный шрифт, который съедал в районе 150кб трафика и как минимум 2 лишних запроса к серверу

[webair 178]

FontAwesome конечно же не единственный источник векторных иконок. 178225 изображений доступно на Flaticon

Когда вы уверены, что больше иконок добавлять не будете, оптимизируйте svg тут

[germanydletest 455]

10 часов назад, webair сказал:

оптимизируйте svg тут

Не получится

[webair 178]

4 часа назад, germanydletest сказал:

Не получится

Кажется, проблема в том, что в одном svg файле много отдельных элементов.

Можно попробовать сжать каждый элемент отдельно.

 

Буквально вчера сжимал там svg логотип, созданный в Adobe Illustrator.
AI сохранил 300 кб, а сайт онлайн сжатия 150 кб. Получается, сжимает в 2 раза то, что до этого AI сжимал при сохранении на максимальных настройках.

Логотип не простой, а иллюстрация, поэтому весит не пару кб.

 

 

Изменено 9 августа 2016 пользователем webair