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

Несмотря на то, что SVG был стандартизирован в начале 2000-х годов, очень привлекательный формат изображения не видел много света из-за плохой поддержки браузеров. Все это резко изменилось за последние годы, поскольку SVG быстро становится де-факто формой изображения в Интернете.

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

Что такое СВГ?

SVG (масштабируемая векторная графика) — это формат изображения на основе XML для отображения графики в Интернете и в приложениях. По сути, файл SVG — это просто набор XML-кода, который определяет различные формы и цвета, используемые в изображении SVG.

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

Самое главное, W3C признает SVG ведущим стандартом в отрасли. Таким образом, SVG безупречно работает вместе с другими веб-технологиями, такими как DOM, HTML и т. д.

Почему SVG важен?

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

Излишне говорить, что файлы SVG гораздо более гибкие, чем традиционные форматы, такие как PNG или JPEG. А прямое взаимодействие между CSS и JavaScript означает, что вы можете адаптировать свои изображения SVG на ходу. Это очень важно, когда вы работаете над новым дизайном или иным образом.

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

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

Как создаются изображения SVG?

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

Простая коллекция квадратов может выглядеть примерно так в формате XML:

Как видите, повторять это для сложной графики — все равно, что выстрелить себе в ногу.

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

Affinity Designer — это хорошо известная профессиональная программа для редактирования векторной графики, а также такие программы, как Adobe Illustrator, Sketch, Figma и Inkscape.

Какое бы программное обеспечение вы ни выбрали, единственное, что действительно имеет значение, — это ваши планы относительно типа графики, которую вы хотите создать. Функция экспорта работает одинаково во всех современных программах.

Излишне говорить, что SVG — это всегда одна и та же структура XML. Таким образом, вы можете использовать изображения SVG как в качестве документа, так и вставлять их в строку.

Поддерживает ли WordPress SVG?

Как бы странно это ни звучало, платформа масштаба WordPress на самом деле не поддерживает формат файлов SVG. Но только из соображений безопасности.

Видите ли, в отличие от типов файлов PNG/JPG/GIF — SVG — это не растровое изображение, а вектор. В результате SVG подвергается риску эксплуатации JavaScript, и WordPress решил не разрешать SVG в WordPress по умолчанию. Это имеет смысл со всех точек зрения.

Несмотря на то, что участники WordPress говорили о SVG в течение многих лет, существует слишком много аспектов, которые нужно учитывать, чтобы предотвратить масштабные проблемы безопасности.

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

Как включить изображения SVG на веб-сайте WordPress?

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


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = массив();
$new_filetypes['svg'] = 'изображение/svg+xml';
$file_types = array_merge($file_types, $new_filetypes);

вернуть $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

И другой — более безопасный — вариант — использовать плагины. Вот три наиболее известных плагина для включения SVG в WordPress.

Поддержка SVG

Добавление поддержки SVG — это половина дела, вы также можете добавить собственные стили, эффекты анимации и включить ограничения. Но для всего этого нужна поддержка.

Благодаря поддержке SVG вы можете начать добавлять файлы SVG в свои сообщения и страницы, используя традиционный тег изображения. Например, вы можете добавить к своим изображениям новый класс CSS: «style-SVG», который будет извлекать загруженное вами изображение SVG и отображать его содержимое во встроенном отображении.

Основные возможности этого плагина:

• Включите управление файлами SVG в медиатеке WordPress.
• Преобразование загруженных изображений SVG во встроенный код.
• Поддерживает виджет изображения для добавления тегов Alt и Caption ко всем изображениям SVG.
• Стилизуйте отдельные изображения SVG с помощью пользовательского CSS.
• Реализуйте анимационные эффекты с помощью CSS3 и JavaScript.
• Страницы с подробными настройками на панели инструментов плагина.
• Обеспечение доступа на основе разрешений. Например, ограничить загрузку только учетными записями с правами администратора.

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

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

Безопасный SVG

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

С 50 000 активных пользователей вы можете рассчитывать на то, что Safe SVG обеспечит звездный послужной список безопасной работы. Стоит отметить, что существует две разные версии этого плагина; бесплатные и платные.

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

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

Кроме того, в Pro вы можете выбрать, кто может или не может загружать новые файлы SVG. В результате вы можете ограничить доступ только для определенных пользователей. И, наконец, купив плагин, вы получите доступ к премиальной поддержке — получите ответы на свои вопросы, когда вам это нужно больше всего.

Добавить полную поддержку SVG

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

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

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

Какие еще есть полезные плагины SVG для WordPress?

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

WP SVG-иконки

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

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

Как и в случае с авторами, этот плагин уникален для всех видов разработки, мультисайтов и клиентской работы. Без ограничений вам не нужно беспокоиться о совместимости тем или о чем-либо в этом роде.

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

Социальное меню SVG

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

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

В настоящее время доступны значки для следующих сайтов и платформ: plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing/feed, mailto.

Логотип SVG и текстовые эффекты

SLATE — это плагин, который включает поддержку шорткода для добавления пользовательских эффектов SVG. Вы можете использовать этот плагин, чтобы продвигать сильный имидж бренда, выделять виджеты CTA или выделять элементы по-своему. Интеллектуальное использование поддержки шорткодов означает, что вы можете редактировать и настраивать свои эффекты в любое время.

Например, вы можете смешивать разные цвета, шрифты, фильтры и использовать многочисленные шаблоны заливки, которые проявляются как привлекающие внимание дизайнерские эффекты. SLATE предлагает такую ​​же свободу творчества, как и программное обеспечение для редактирования векторов, но только без необходимости использования какого-либо программного обеспечения!

Итак, каковы некоторые из ключевых особенностей?

• Текст. Создавайте шорткоды, которые могут воспроизводить эффекты привлекающих внимание, но оптимизированных для SEO текстовых эффектов. Очень похоже на то, что вы видите на снимке выше.
• Шрифты. Не знаете, где взять пользовательские шрифты? Не беспокойтесь, так как SLATE уже поставляется с огромной библиотекой Google Fonts.
• Заполнение узорами. Буквы заполняются узором заливки по вашему выбору. Шаблоны заливки имеют параметры. Управляйте различными размерами, расстояниями и цветами, чтобы создавать уникальные вариации, или позвольте значениям по умолчанию работать на вас.

И многое другое! Этот плагин является мощным инструментом для создания текста и логотипов с исключительной точностью. И через SVG не меньше.

Где найти SVG-графику?

Что вы можете сделать, если у вас нет опыта работы с векторной графикой? К счастью, в наши дни найти SVG просто и понятно. В лучшем случае вам нужно только указать ссылку на оригинального автора, который сделал графику. И многие платформы предоставляют бесплатные изображения без указания авторства.

Вот несколько замечательных сайтов, предоставляющих бесплатный SVG-контент:

• FontAwesome — Font Awesome — самая потрясающая библиотека иконок шрифтов в мире. Проект развивается уже несколько лет и имеет всестороннюю поддержку не только для браузеров, но и для определенных фреймворков и программного обеспечения для проектирования. Этот пакет шрифтов, ориентированный на доступность, является абсолютным убийцей и настолько прост в использовании! На самом деле, я уверен, что существует дюжина плагинов WordPress, обеспечивающих поддержку Font Awesome!
• Vecteezy — Vecteezy, возможно, является крупнейшей платформой векторной графики на планете. Благодаря индивидуальному дизайну, вкладу сообщества и данным из Интернета: Vecteezy предлагает векторы, доступные в любой категории, форме или форме. И загружать файлы тоже очень просто. Все, что вам нужно сделать, это дать ссылку на страницу автора, с которой вы получили файл. Это сайт, которым я часто пользуюсь.
• Фоны SVG — следите ли вы за последними тенденциями веб-дизайна? Сейчас так много творческих областей, в которых изучаются дизайны. И одна из таких областей — фоны SVG. Вы их тоже видели. Волнистые узоры, изогнутые линии и так далее. Используйте этот сайт для создания легко доступных фонов SVG!
• SVG Grabber — это расширение для Chrome — настоящая находка для получения изображений SVG с разных страниц веб-сайта. Просто щелкните значок, и расширение сможет получить каждый файл SVG на странице. Конечно, вы должны следовать правилам авторского права везде, где можете, но в целом это похоже на надежное расширение для частого использования.
• Зона векторных логотипов. В зависимости от ниши, в которой вы работаете, вам может быть полезно иметь коллекцию векторных логотипов от ведущих мировых брендов. Вы также можете использовать эти файлы при создании конкретных объявлений или рекламных акций. И большинство фоторедакторов в наши дни могут конвертировать файлы SVG в PNG и так далее.

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

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

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