Перейти к публикации

Рекомендованные сообщения

Многие слышали иконочных шрифтах и используют их, к примеру 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"

bsz2e4at.png

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

Ссылка на сообщение
Поделиться на других сайтах
4 часа назад, germanydletest сказал:

Не получится

9gr8plg5.png

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

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

 

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

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

 

 

Изменено пользователем webair
Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...