Мария Кокухина — эксперт по юзабилити сайта, увеличению продаж.

Пройти тест сайта

Время чтения: 6 мин.

Формат SVG — это формат изображения, популярность которого быстро растет.

В этой статье расскажу вам:

  • Что за формат SVG.
  • Почему формат SVG нужно использовать.
  • Преимущества и недостатки формата SVG.
  • Как создать формат SVG.
  • Как безопасно использовать формат SVG.
  • Почему WordPress не поддерживает формат SVG.
  • Как заставить формат SVG работать с WordPress.
  • Как проверить поддержку SVG на сайте.

Что за формат SVG

SVG — это масштабируемая векторная графика. Она представляет собой язык разметки для создания двумерных векторных изображений. Формат SVG существует с 1999 года и стал популярным благодаря мобильному дизайну.

Разница между растровыми и векторными изображениями.

Преимущества SVG

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

  • Масштабируемость

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

  • Меньший размер файла

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

    JPEG, размер изображения — 81.4KB

    PNG, размер изображения — 85.1KB

    Формат SVG, размер изображения — 6.1KB

    Провести анализ сайта

  • Поддерживается всеми браузерами

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

    • 1 — частичная поддержка в Android 3 и 4 относится к отсутствию поддержки маскировки.
    • 2 — частичная поддержка в IE9-11 относится к отсутствию поддержки анимации.
    • 3 — IE9-11 и Edge неправильно масштабируют SVG файлы.
  • Признано Google

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

  • Может быть анимирован

    С помощью CSS вы можете добавлять анимацию к векторной графике.

Недостатки SVG

  • Трудно создать

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

  • Не подходит для сложных изображений

    Формат векторной графики идеально подходит для логотипов и значков, но не для сложных изображений, таких как фотографии.

    Добавление к изображениям множества деталей приведет к значительному увеличению размера SVG по сравнению с пиксельными аналогами (формат PNG или JPEG)

    Формат SVG, размер изображения — 515KB. В то время, как формат PNG весит 228KB, а JPEG — 259KB.

    Чем сложнее изображение, тем больше оно весит и хуже качество.

  • Проблемы безопасности

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

  • Не поддерживается социальными сетями

    Twitter, Facebook и другие социальные сети не поддерживают формат SVG.

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

Как создать SVG для сайта

Одна из проблем векторной графики — это создание. В отличие от других изображений, их сложнее создать.

Для создания масштабируемой векторной графики необходимо разбираться в Adobe Illustrator или Inkscape (бесплатно, https://inkscape.org). Существуют также веб-решение — Vectr (https://vectr.com)

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

Но есть и альтернативы. Например, если у вас уже есть логотип в пиксельной версии, вы можете использовать такие инструменты:

  • Vector Magic (https://vectormagic.com), чтобы преобразовать его в векторы SVG.
  • Patternico (https://patternico.com), который позволяет легко создавать загружаемые фоновые шаблоны формата SVG.

Кроме того, есть большие коллекции бесплатных векторных иконок, которые вы можете использовать для своего сайта:

  • DryIcons — https://dryicons.com
  • Evil Icons — https://evil-icons.io
  • Flat Icons — https://flaticons.net
  • Genericons — https://genericons.com/

Таким образом, вам не нужно создавать формат SVG самостоятельно.

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

WordPress не поддерживает векторную графику. Но не отчаивайтесь, есть несколько способов изменить это — вручную и через плагин.

Расскажу про самый безопасный способ использования векторной графики в WordPress.

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

Давайте рассмотрим 2 метода, как это сделать.

Метод 1. Включите поддержку SVG в WordPress через плагин

Один из самых простых способов включить поддержку — использовать плагин.

Safe SVG (https://wordpress.org/plugins/safe-svg/) — это единственный плагин, который очищает файлы SVG во время загрузки. Он также включает формат изображения для WordPress и добавляет его поддержку в медиатеку.

Настройка проста. Просто установите и активируйте так же, как и любой другой плагин. Вот и все. Никаких дополнительных настроек не требуется.

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

Поддержка векторной графики также позволяет сразу же ограничить загрузку по группе пользователей. Итак, если это важная настройка для вас, то вам лучше использовать этот плагин.

Метод 2. Включение поддержки SVG в WordPress вручную

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

Если вы все еще хотите пойти по этому пути, найдите файл functions.php в папке активной темы. И добавьте в него следующий код:

Теперь сохраните изменения и повторно загрузите файл. Но помните, это не самый безопасный метод.

Проверить поддержку формата SVG

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

Чтобы проверить это, войдите на свой сайт и перейдите в Медиафайлы. Попробуйте загрузить файл формата SVG. Если все прошло хорошо, то формат поддерживается на сайте.

Заключение

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

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

Войдет ли когда-нибудь поддержка векторной графики в WordPress? Пока не будет способа решить проблему безопасности, это маловероятно. Однако с ростом популярности масштабируемой векторной графики в веб-дизайне WordPress рано или поздно придется найти решение.

Понравилась статья? Поделитесь с друзьями

Вам будет это интересно