Рассмотрим включения поддержки в WordPress векторных файлов формата SVG.
Что позволит вашему сайту на WordPress иметь более качественную графику, при меньших размерах файлов.
Немного о формате графики. Основные форматы делятся на две категории — это векторный и растровый формат.
Растровый формат правильно использовать для графических файлов в которых имеются большие градации цвета, полутонов (фотографии).
В растровой графике изображение представлено в виде точек (пикселей) поэтому размер файла получается большим.
Есть различные формата сжатия графики, но с этим страдает качество.
Кроме этого есть проблема с масштабируемостью растровой графики — при даже небольшом увеличении вы начнете терять детали.
Да, в наше время есть алгоритмы которые позволяют увеличивать «без потерь», но потери будут:)
Векторный формат графики отлично подходит для схем, текста и т.п.
Векторный формат по сути является описанием XML — где какая линия должна проходить, какого цвета и т.п.
Формат является очень компактным и в отличии от растрового файла лишен понятия разрешения, поэтому этого может масштабироваться без каких-либо потерь.
В качестве иллюстрации:
При этом у растрового файла размер — 10Кб.
У векторного — 3 Кб.
Все говорит о том, что SVG интересный формат.
Тем не менее без растровой графике на сайте не обойтись.
Например в публикации скриншотов или фотографий.
WordPress и SVG
В интернете есть только один формат векторной графики и это SVG.
WordPress по умолчанию SVG не поддерживает (кто знает почему — напишите комментарий).
Прежде всего добавить поддержку SVG можно двумя способами:
- Добавив фильтр формата в functions.php вашей темы
- Использовать плагин
Первое решение я не рекомендую к использованию.
Прежде всего SVG файл по сути представляет из себя описание в формате XML.
Поэтому хорошей практикой будет делать его проверку.
Тем не менее если мои доводы вас не убедили, то используйте functions.php дочерней темы.
Чтобы не потерять изменения при обновлении темы.
Или плагин — ProFunctions, который позволит делать инъекции в код при этом не затрагивая код темы.
Добавляем новую функцию:
function svg_myme_types($mime_types){
$mime_types['svg'] = 'image/svg+xml';
return $mime_types;
}
add_filter('upload_mimes', 'svg_myme_types', 1, 1); Второе решение я считаю предпочтительным, так как по мимо функции загрузки и вывода SVG файлов делается проверка и очистка загружаемых файлов.
Я выбрал для себя плагин Save SVG.
В данном плагине отсутствуют как-либо настройки.
Установили, активировали — прекрасно работает, так же в отличии от первого решения в библиотеке медиафайлов у SVG файлов будет иметься превью.
Для оптимизации SVG файлов существует онлайн-инструмент
Который минимизирует код SVG путем выбрасывания не нужных тегов, комментариев, склейки XML в одну строку и т.п.
SVG файл, который был представлен в этой заметке как пример:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 576 44" style="enable-background:new 0 0 576 44;" xml:space="preserve">
<g>
<path d="M16.2,42.3V1.2h12.4l7.5,28l7.4-28h12.5v41.1h-7.7V9.9l-8.2,32.4h-8L23.9,9.9v32.4H16.2z"/>
<path d="M101.3,42.3h-9l-3.6-9.3H72.2l-3.4,9.3H60L76,1.2h8.8L101.3,42.3z M86,26l-5.7-15.3L74.8,26H86z"/>
<path d="M105.6,42.3V1.2H118l7.5,28l7.4-28h12.5v41.1h-7.7V9.9l-8.2,32.4h-8l-8.1-32.4v32.4H105.6z"/>
<path d="M190.6,42.3h-9l-3.6-9.3h-16.4l-3.4,9.3h-8.8l16-41.1h8.8L190.6,42.3z M175.3,26l-5.7-15.3L164.1,26H175.3z"/>
<path d="M210.8,42.3V1.2h12.4l7.5,28l7.4-28h12.5v41.1h-7.7V9.9l-8.2,32.4h-8l-8.1-32.4v32.4H210.8z"/>
<path d="M259,1.2h8.3v16.4h11.1c2.9,0,5.4,0.4,7.5,1.2c2.1,0.8,3.9,2.2,5.3,4.3c1.4,2,2.1,4.4,2.1,7.1c0,2.8-0.7,5.2-2.2,7.2
c-1.5,2-3.1,3.3-4.9,4s-4.4,1-7.8,1H259V1.2z M267.3,35.4h8.1c2.6,0,4.4-0.1,5.4-0.4c1-0.3,1.9-0.8,2.7-1.7s1.2-2,1.2-3.3
c0-1.8-0.6-3.2-1.9-4.1c-1.3-0.9-3.6-1.4-7-1.4h-8.4V35.4z M298.1,1.2h8.3v41.1h-8.3V1.2z"/>
<path d="M318,1.2h28.8v41.1h-8.3V8.1h-12.4v17.6c0,5-0.2,8.5-0.5,10.5s-1.2,3.5-2.5,4.7s-3.3,1.7-6.1,1.7c-1,0-2.7-0.1-5.3-0.3
v-6.4l1.9,0c1.7,0,2.9-0.2,3.5-0.7c0.6-0.5,0.9-1.6,0.9-3.5l0-7.1V1.2z"/>
<path d="M392.4,42.3h-9l-3.6-9.3h-16.4l-3.4,9.3h-8.8l16-41.1h8.8L392.4,42.3z M377.1,26l-5.7-15.3L365.9,26H377.1z"/>
<path d="M412.8,42.3V1.2h13.3c5,0,8.3,0.2,9.9,0.6c2.4,0.6,4.3,2,5.9,4c1.6,2.1,2.4,4.7,2.4,8c0,2.5-0.5,4.6-1.4,6.4
c-0.9,1.7-2.1,3.1-3.5,4.1c-1.4,1-2.8,1.6-4.3,1.9c-2,0.4-4.9,0.6-8.6,0.6h-5.4v15.5H412.8z M421.1,8.1v11.7h4.5
c3.3,0,5.5-0.2,6.6-0.6c1.1-0.4,2-1.1,2.6-2c0.6-0.9,0.9-2,0.9-3.2c0-1.5-0.4-2.7-1.3-3.7s-2-1.6-3.3-1.8c-1-0.2-3-0.3-6-0.3H421.1
z"/>
<path d="M483.1,42.3h-9l-3.6-9.3h-16.4l-3.4,9.3h-8.8l16-41.1h8.8L483.1,42.3z M467.8,26l-5.7-15.3L456.6,26H467.8z"/>
<path d="M487.4,42.3V1.2h12.4l7.5,28l7.4-28h12.5v41.1h-7.7V9.9l-8.2,32.4h-8l-8.1-32.4v32.4H487.4z"/>
<path d="M531.2,1.2h9.3l9.6,21.3l8.2-21.3h8.7l-13.9,31.2c-1.5,3.4-3.1,6-4.6,7.7c-1.6,1.8-3.6,2.7-6.1,2.7c-2.5,0-4.4-0.2-5.8-0.5
v-6.2c1.2,0.1,2.2,0.1,3.2,0.1c1.9,0,3.3-0.4,4.1-1.1s1.6-2.2,2.4-4.5L531.2,1.2z"/>
</g>
</svg>
После обработки вышеуказанным сервисом:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 44"><path d="M16.2 42.3V1.2h12.4l7.5 28 7.4-28H56v41.1h-7.7V9.9l-8.2 32.4h-8L23.9 9.9v32.4h-7.7zM101.3 42.3h-9L88.7 33H72.2l-3.4 9.3H60L76 1.2h8.8l16.5 41.1zM86 26l-5.7-15.3L74.8 26H86zM105.6 42.3V1.2H118l7.5 28 7.4-28h12.5v41.1h-7.7V9.9l-8.2 32.4h-8l-8.1-32.4v32.4h-7.8zM190.6 42.3h-9L178 33h-16.4l-3.4 9.3h-8.8l16-41.1h8.8l16.4 41.1zM175.3 26l-5.7-15.3-5.5 15.3h11.2zM210.8 42.3V1.2h12.4l7.5 28 7.4-28h12.5v41.1h-7.7V9.9l-8.2 32.4h-8l-8.1-32.4v32.4h-7.8zM259 1.2h8.3v16.4h11.1c2.9 0 5.4.4 7.5 1.2 2.1.8 3.9 2.2 5.3 4.3 1.4 2 2.1 4.4 2.1 7.1 0 2.8-.7 5.2-2.2 7.2-1.5 2-3.1 3.3-4.9 4s-4.4 1-7.8 1H259V1.2zm8.3 34.2h8.1c2.6 0 4.4-.1 5.4-.4 1-.3 1.9-.8 2.7-1.7s1.2-2 1.2-3.3c0-1.8-.6-3.2-1.9-4.1-1.3-.9-3.6-1.4-7-1.4h-8.4v10.9zm30.8-34.2h8.3v41.1h-8.3V1.2zM318 1.2h28.8v41.1h-8.3V8.1h-12.4v17.6c0 5-.2 8.5-.5 10.5s-1.2 3.5-2.5 4.7-3.3 1.7-6.1 1.7c-1 0-2.7-.1-5.3-.3v-6.4h1.9c1.7 0 2.9-.2 3.5-.7.6-.5.9-1.6.9-3.5V1.2zM392.4 42.3h-9l-3.6-9.3h-16.4l-3.4 9.3h-8.8l16-41.1h8.8l16.4 41.1zM377.1 26l-5.7-15.3-5.5 15.3h11.2zM412.8 42.3V1.2h13.3c5 0 8.3.2 9.9.6 2.4.6 4.3 2 5.9 4 1.6 2.1 2.4 4.7 2.4 8 0 2.5-.5 4.6-1.4 6.4-.9 1.7-2.1 3.1-3.5 4.1-1.4 1-2.8 1.6-4.3 1.9-2 .4-4.9.6-8.6.6h-5.4v15.5h-8.3zm8.3-34.2v11.7h4.5c3.3 0 5.5-.2 6.6-.6 1.1-.4 2-1.1 2.6-2 .6-.9.9-2 .9-3.2 0-1.5-.4-2.7-1.3-3.7s-2-1.6-3.3-1.8c-1-.2-3-.3-6-.3h-4zM483.1 42.3h-9l-3.6-9.3h-16.4l-3.4 9.3h-8.8l16-41.1h8.8l16.4 41.1zM467.8 26l-5.7-15.3-5.5 15.3h11.2zM487.4 42.3V1.2h12.4l7.5 28 7.4-28h12.5v41.1h-7.7V9.9l-8.2 32.4h-8l-8.1-32.4v32.4h-7.8zM531.2 1.2h9.3l9.6 21.3 8.2-21.3h8.7l-13.9 31.2c-1.5 3.4-3.1 6-4.6 7.7-1.6 1.8-3.6 2.7-6.1 2.7-2.5 0-4.4-.2-5.8-.5v-6.2c1.2.1 2.2.1 3.2.1 1.9 0 3.3-.4 4.1-1.1s1.6-2.2 2.4-4.5L531.2 1.2z"/></svg>
2,30 КБ —> 1,71 КБ — экономия ~ 28%
На этом все!
