Как вы наверняка знаете, существует достаточно большое количество различных расширений (форматов) файлов: PNG, JPEG, SVG, XML, PAGES, DOCX, PDF и многие другие.

Разные форматы бывают необходимы, как в случае, например, с PNG и JPEG. Первый дает лучшее возможное качество изображений, в то время как второй – относительно хорошее качество при несоизмеримо меньшем размере файла (относительно PNG).

Иногда разные форматы происходят от разных программ и не несут в себе большой разницы для пользователя, существуя параллельно и по сути дублируя друг друга во всем, кроме названия (и сокращения). Такими формата, например, являются PAGES (формат текстовых файлов одноименной программы на Mac OS) и DOCX (аналогичный формат от Windows). 

В данном туториале (или гайде – как вам больше нравится) я привожу несколько способов добавить SVG изображение на ваш WordPress сайт. 

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

Википедия приводит немного более сложное определение: «SVG – это язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной…». 

Содержание

Что будет если начать загрузку SVG на WordPress?

Если вы попытаетесь начать загрузку SVG на ваш сайт без внесения корректировок на сайте (иными словами, подготовки сайта к загрузке SVG), вы получите ошибку. Это связано с тем, что SVG не является полностью безопасным файлом для CMS WordPress. Это отчасти так (не будем углубляться в вопрос – почему), однако не в случае, когда вы – единственный администратор сайта и управляет всеми загрузками файлов в систему единолично, контролируя все в ручную. 

Загрузка SVG через PHP код

Общее

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

Теперь давайте рассмотрим, как мы можем добавить поддержку файлов SVG на WordPress с помощью PHP.

Разрешить загрузку файла SVG

Для того что бы «активировать» поддержку СВГ-файлов, необходимо использовать фильтр upload_mimes , с помощью которого мы можем изменять список расширений файлов Водпресс. В данной статье мы берем файлы SVG – image / svg + xml. Размещаем в functions.php темы следующий код:

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

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

function remove_mime_types($mimes) {
    unset($mimes['video/mp4']);
}
add_filter('upload_mimes', 'remove_mime_types');

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

CSS

Что бы исправить это и отобразить миниатюру SVG на странице списка, потребуется добавить CSS правило, которое способно подключиться к панели инструментов WordPress:

function admin_custom_css() {
    echo "<style>table.media .column-title .media-icon img[src='.svg']{
        width: 100%;
        height: auto;
    }</style>";
}
 
add_action( 'admin_head', 'admin_custom_css' );

Теперь все должно работать корректно.

Загрузка SVG – плагины

Бывают ситуации, когда кроме простой загрузки SVG вам может потребоваться какая-либо настройка для загрузки файлов. Такими ‘дополнительными опциями’ могут быть:

  • запрет на добавление файлов не администратором;
  • запрет на автоматическое добавлении SVG (без подтверждения администратором);
  • конвертация SVG;
  • другие.

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

Лучший плагин для этих целей — Uploading SVG, WEBP and ICO files, с его помощью можно загружать все типы файлов, которые не могут быть загружены в WordPress без дополнительных конфигураций:

Uploading SVG, WEBP and ICO files

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