Популярность SVG растет, особенно с появлением отзывчивого, дружественного к мобильным устройствам дизайна.
Все больше и больше создателей веб-сайтов используют SVG-файлы в своих проектах - они отлично подходят для небольших, простых изображений или графики, не содержащей слишком много сложных элементов, таких как логотипы, узоры или иконки.
У WordPress непростые отношения с SVG - CMS не поддерживает этот тип файлов изначально, и на то есть веские причины. Несмотря на то, что WordPress не позволяет добавлять SVG в медиатеку, есть несколько способов, с помощью которых пользователи могут добавить поддержку этого формата файлов.
В этой статье мы обсудим использование SVG в WordPress и узнаем, почему CMS не поддерживает их. Кроме того, представлены некоторые способы добавления поддержки SVG на сайт WordPress.
Что такое SVG?
SVG расшифровывается как масштабируемая векторная графика (Scalable Vector Graphic). В отличие от растровых изображений (таких как JPG или PNG, которые состоят из пикселей), SVG - это векторная графика, то есть они состоят из легко манипулируемых математических конструкций (формул), а не из пикселей.
Хотя большинство людей считают, что SVG - это формат изображения, подобный JPG, PNG или аналогичным, на самом деле это язык разметки (XML), который используется для создания двумерной графики. Например, приведенный ниже код - это XML, используемый для создания красного круга.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
</body>
</html>На момент написания статьи SVG использовали 15,2% сайтов. В связи с растущей популярностью SVG в веб-дизайне, ожидается, что число сайтов будет быстро расти и дальше.
Преимущества использования SVG
В отличие от других форматов изображений, таких как PNG, JPG, GIF и т.д., SVG имеют ряд преимуществ для веб-дизайнера:
- Качество изображения. Поскольку SVG являются векторами, их можно масштабировать, растягивать или сжимать без потери или ухудшения качества изображения, даже на retina экранах. Поскольку они сохраняют свое качество, SVG отлично подходят для адаптивного веб-дизайна. Для сравнения, растровые форматы изображений будут выглядеть размытыми или пиксельными, если масштабировать их больше, чем сам размер изображения.
- Поддержка браузерами. Браузеры поддерживают SVG на хорошем уровне, и почти все браузеры умеют поддерживать этот формат. Это означает, что у большого процента посетителей вашего сайта не возникнет проблем с просмотром SVG на вашем сайте.
- Готовность к анимации. Благодаря формату файла SVG можно легко анимировать с помощью CSS. Если вы хорошо разбираетесь в CSS, вы сможете создать привлекательный и запоминающийся анимированный элемент для вашего сайта.
- Малый размер файла. Одним из наиболее важных аспектов веб-дизайна является скорость загрузки страницы и производительность сайта. SVG имеют гораздо меньший размер файла по сравнению с растровыми изображениями, поэтому они помогают сайту загружаться быстрее. Конечно, SVG нельзя использовать для замены всей графики на сайте, но экономия нескольких байт здесь и там при использовании графики небольшого размера в долгосрочной перспективе дает положительный эффект.
Если SVG настолько хороши и полезны, то почему WordPress запрещает их использование?
Почему WordPress не поддерживает SVG?
Теоретически SVG кажется лучшим форматом изображений для использования на сайте, однако WordPress не поддерживает этот формат файлов по умолчанию. На самом деле на это есть веская причина.
Запрет формата файлов SVG на самом деле является жизненно важной мерой безопасности, поскольку SVG могут быть небезопасными и подвергать риску весь сайт. Описанный выше SVG на самом деле не является форматом изображения, как думает большинство людей, а представляет собой формат документа (XML), который читается как код.
Благодаря этому в SVG можно написать сценарий, включающий вредоносный код и другие уязвимости, или внедрить вредоносное ПО. Поскольку это может представлять огромную угрозу для веб-сайта, WordPress не поддерживает этот тип файлов в его исходном состоянии.
К счастью, WordPress, являясь ведущей CMS в мире, предоставляет очень гибкое решение для своей пользовательской базы. Благодаря этому включение поддержки SVG - относительно быстрый и простой процесс, который можно осуществить несколькими способами.
Используем SVG в качестве логотипа в WordPress
После создания SVG вам необходимо включить поддержку формата файла на вашем сайте WordPress. Это можно сделать двумя способами:
- Добавить код в файл functions.php
- Использовать плагин из репозитория WordPress
Добавляем код в файл functions.php
Если вы уверены в своих силах, добавление нескольких строк кода в файл functions.php - это быстрое и простое решение.
Просто скопируйте приведенный ниже код и добавьте его в файл functions.php вашей дочерней темы.
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');Как только вы сохраните отредактированный файл functions.php, вы скорее всего сможете добавить SVG в медиатеку WP.
Использование плагина из репозитория WordPress
Если вы ищете простое решение для добавления SVG на сайт WordPress и не разбираетесь в программировании, обратите внимание на один из следующих плагинов:
Оба вышеперечисленных плагина обеспечивают поддержку файлов SVG. Просто установите и активируйте выбранный плагин, и вы сможете начать использовать SVG без каких-либо проблем.
Заключение
Несмотря на то, что у WordPress не самые лучшие отношения с SVG, обычному пользователю WordPress довольно легко включить поддержку этого формата файлов.
Включив поддержку SVG на своем сайте WordPress, вы сможете создавать и использовать векторные изображения для своих логотипов, шаблонов и иконок, обеспечивая идеально пиксельное отображение активов вашего бренда.
