Как добавить SVG изображения в WordPress без плагинов

По умолчанию WordPress не позволяет загрузить SVG-файлы на сайт и сделано это из соображений безопасности, но все же хочется, чтобы логотип был не растровым, а векторным изображением. Конечно, можно добавить функционал загрузки SVG с помощью плагина, но я предпочитаю использовать как можно меньше плагинов. Ниже я опишу способ как добавлять SVG-файлы на свой сайт путем добавления функции в файл function.php вашей темы.

Содержание страницы

Что такое SVG

SVG означает масштабируемую векторную графику . В отличие от растровых изображений (таких как JPG или PNG, которые состоят из пикселей), SVG являются векторной графикой, что означает, что они состоят из легко поддающихся манипулированию математических конструкций, а не из пикселей.

Популярность SVG возросла, особенно с появлением отзывчивого, удобного для мобильных устройств дизайна. SVG подходит для небольших простых изображений или графики, которые не содержат слишком много сложных элементов. SVG подойдет для логотипов, узоров или значков и все больше и больше разработчиков веб-сайтов используют файлы 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

В отличие от других форматов изображений, таких как PNG, JPG, GIF и т.д., SVG имеет ряд преимуществ для веб-дизайнера:

Качество изображения. Поскольку SVG-файлы являются векторами, их можно масштабировать, растягивать или сжимать без потери или ухудшения качества изображения, даже на экранах Retina-дисплеев. Поскольку они сохраняют свой идеальный внешний вид, SVG отлично подходят для адаптивного веб-дизайна. Для сравнения, форматы растровых изображений будут выглядеть размытыми или пиксельными, если их масштаб превышает размер изображения.

Поддержка браузера. Браузерная поддержка SVG великолепна , и все браузеры знают, как поддерживать этот формат. Это означает, что у большого процента посетителей вашего сайта не возникнет проблем с просмотром SVG на вашем сайте.

Готово к анимации. Благодаря формату типа файла SVG, SVG можно легко анимировать с помощью CSS. Если вы хорошо разбираетесь в CSS , вы можете легко создать привлекательный и запоминающийся анимированный дизайн для своего сайта.

Если SVG имеет столько преимуществ, то почему изначально они не разрешены WordPress?

Почему WordPress не поддерживает SVG изначально?

Запрет на загрузку файлов с расширением SVG на самом деле является жизненно важной мерой безопасности, поскольку файлы SVG могут быть небезопасными и могут поставить под угрозу весь сайт. Описанный выше SVG на самом деле не является форматом изображения, как думает большинство людей, а представляет собой формат документа (XML), который читается как код.

При этом в SVG можно добавлять сценарии, включающие вредоносный код и другие уязвимости, или внедрять вредоносные программы. Поскольку это может представлять огромную угрозу для веб-сайта, поэтому WordPress не поддерживает этот тип файла по умолчанию.

К счастью, как ведущая CMS в мире, WordPress предоставляет очень гибкое решение для своих пользователей. Таким образом, включение поддержки SVG – это относительно быстрый и простой процесс, который можно сделать несколькими способами. При работе с SVG важно всегда использовать только оригинальную графику, которую вы создали сами, а не использовать случайную графику, найденную или загруженную из Интернета.

Как добавить SVG на ваш сайт WordPress

Само по себе создание SVG может быть проблемой. В отличие от других типов изображений, которые можно относительно просто создать, например, с помощью камеры телефона, SVG требует более сложного подхода к созданию.

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

Программы для графического дизайна обычно требуют навыков работы с программой и часто они не бесплатны. Одна из самых популярных программ графического дизайна Adobe Illustrator, доступна в пакете Adobe Creative Cloud, а альтернативные бесплатные программные решения это Inkscape и Vectr.

Лично я для своего сайта создал логотип в программе Vectr и добавил его на сайт. Можете открыть мобильную версию моего сайта и попробовать изменить масштаб – вы убедитесь, что при изменении масштаба логотип не теряет в качестве.

Как использовать SVG в качестве логотипа в WordPress

После того, как вы создали SVG, вам необходимо включить поддержку формата файла на вашем веб-сайте WordPress. Это можно сделать одним из двух способов:

Добавить код в function.php:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

2. Установить и активировать один из плагинов поддержки SVG: SVG Support или Safe SVG

Лично я предпочитаю первый способ, так как стараюсь использовать меньше плагинов на сайте WordPress, поэтому весь функционал я реализовал с помощью добавления кода в function.php своей темы.

Источник