Что такое SVG-файл (и как загрузить SVG-файлы в WordPress)?

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

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

Надеюсь, однажды у нас будет SVG как часть ядра WordPress, но это еще не все.

Что такое файл SVG?

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

SVG (масштабируемая векторная графика) — это основанный на XML формат векторного изображения для двумерной графики с поддержкой интерактивности и анимации. Спецификация SVG — это открытый стандарт, разработанный Консорциумом World Wide Web (W3C) с 1999 года.

Вы даже можете манипулировать файлами SVG с помощью кода или текстового редактора. SVG в настоящее время используются 33% всех веб-сайтов, и, как вы можете видеть ниже, скорость внедрения быстро растет. Популярные сайты, такие как Google, Reddit, Dropbox, ESPN и даже наш собственный сайт здесь, в Kinsta, используют SVG.

Поддержка файлового браузера SVG

Файлы SVG в настоящее время поддерживаются всеми основными браузерами, включая мобильные браузеры. Единственная проблема, с которой вы можете столкнуться, — это если вам все еще нужна поддержка IE8, чего, мы надеемся, у вас нет. IE8 занимает всего около 0,36% рынка браузеров и больше не поддерживается. Вот отличная статья Любоса о том, почему разработчикам следует прекратить поддержку IE8, IE9 и IE10. С точки зрения бизнеса это не всегда возможно, но он приводит некоторые хорошие моменты. Если по какой-то отчаянной причине вам все еще нужна поддержка IE8, вы можете определить резервное изображение (PNG или JPG) для своих изображений SVG, но сегодня мы не будем об этом. Ниже приведен список поддерживаемых браузеров:

• Internet Explorer 9, 10, 11+ и Edge
• Фаерфокс 2+
• Хром 4+
• Сафари 3.1+
• Опера 10+
• iOS Сафари 3.2+
• Android-браузер 3+
• Firefox для Android 86+
• Опера Мини (все)
• Опера Мобайл 12+
• Chrome для Android 89+
• UC-браузер для Android 12.12+
• Самсунг Интернет 4+
• Браузер QQ 10.4
• Браузер Байду 7.12
• KaiOS Браузер 2.5

Преимущества использования файлов SVG

Файлы SVG представляют собой векторный формат, то есть они автоматически масштабируются как в браузерах, так и в инструментах для редактирования фотографий. Это делает их отличными как для графических, так и для веб-дизайнеров. Обычно, когда вы пытаетесь редактировать PNG или JPG в таких инструментах, как Photoshop, Sketch или Paint, вы не можете масштабировать их без пикселизации. С помощью SVG вы можете масштабировать их до бесконечности, и они каждый раз будут выглядеть идеально с точностью до пикселя (или, лучше сказать, с точностью до вектора). Вот почему они являются отличным форматом изображения для экранов Retina.

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

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

JPG (оптимизированный размер: 81,4 КБ)

PNG (оптимизированный размер: 85,1 КБ)

SVG (оптимизированный размер: 6,1 КБ)

Как вы можете видеть выше, размер файла SVG уменьшается на 92,51% по сравнению с JPG. А по сравнению с PNG — 92,83% . Это довольно впечатляющие различия в размерах файлов. Тем не менее, есть одно предостережение: поскольку он тестировал более подробные изображения, SVG в конечном итоге стали больше по размеру, чем JPG или PNG.

Вот почему многие сайты используют SVG для менее подробных изображений, таких как логотипы, значки и т. д., поскольку они значительно уменьшают размер файлов. Но для большего количества изображений с высокой детализацией, таких как, возможно, ваш пост в блоге «избранные изображения», вы можете придерживаться PNG или JPG, но вы все равно можете их оптимизировать. Многие веб-сайты используют гибридный подход, используя оба типа файлов вместе, где это имеет смысл.

Кроме того, важно отметить, что социальные сети, такие как Facebook и Twitter, не поддерживают SVG для обмена. Поэтому, если вы использовали SVG для избранных изображений, вам придется использовать функцию Yoast SEO и загрузить PNG или JPG для OG и метатегов, иначе вы можете рискнуть, что избранное изображение вообще не появится.

Почему важна безопасность SVG

Причина, по которой SVG еще не является частью ядра WordPress, заключается в том, что необходимо решить проблемы безопасности. Вы можете следить за активным обсуждением SVG в ядре WordPress (#24251), которое началось еще в 2013 году. SVG — это файл XML, который сам по себе открывает различные уязвимости, которые не затрагивают обычные форматы изображений. К ним относятся атаки внешних сущностей XML (XXE), бомбы с вложенными сущностями и атаки XSS.

Марио Хайдерих опубликовал информативную презентацию о рисках безопасности из-за активного внедрения контента с файлами SVG. Одним из приведенных примеров было то, что JavaScript был встроен в SVG, и ему действительно удалось позвонить Марио в Skype. Это как-то страшно! SecuPress, авторы подключаемого модуля безопасности WordPress, также затронули тему осторожности при добавлении SVG в WordPress и важность правильного подхода.

Многие плагины SVG в репозитории используют следующий код, который просто позволяет типу MIME разрешить загрузку SVG в медиатеку WordPress. Это не безопасный способ сделать это! Так что не идите и просто загрузите первый бесплатный плагин SVG, который вы увидите, или скопируйте и вставьте этот код и думайте, что вы готовы к работе.

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

Решение состоит в том, что SVG необходимо дезинфицировать . Санитизация — это в основном очистка кода или ввода, чтобы избежать проблем безопасности (таких как внедрение кода), конфликтов кода и ошибок. Это может повлечь за собой такие вещи, как кодирование данных, фильтрация и проверка строк и т. д. Здесь в игру вступает библиотека SVG-Sanitizer Дэрила Дойла, которую он называет «своей попыткой создать достойный дезинфицирующий SVG на PHP». Посмотрите демонстрацию его дезинфицирующего средства SVG, чтобы увидеть его в действии.

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

Как безопасно включить поддержку WordPress SVG

Дэрил разработал плагин WP SVG (также известный как Safe SVG), который использует библиотеку SVG-Sanitizer при загрузке изображений SVG в медиатеку WordPress. Плагин также позволяет просматривать SVG как обычные изображения в медиатеке.

Вы можете скачать Safe SVG бесплатно из репозитория WordPress или выполнив поиск на панели инструментов WordPress в разделе «Добавить новые» плагины. Вы можете встать и пойти с помощью нескольких простых кликов.

Существует также премиум-версия, доступная на wpsvg.com, которая позволяет запретить определенным пользователям загружать SVG и выполнять дополнительную оптимизацию SVG. В приведенном ниже примере мы собираемся просто использовать бесплатную версию.

В качестве альтернативного плагина вы можете проверить поддержку SVG.

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

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

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

Нам пришлось сделать еще одну настройку. В IE9-11 для настольных ПК и мобильных устройств файлы SVG еще не масштабируются должным образом. Добавление высоты и ширины устраняет эту проблему. Это может варьироваться в зависимости от темы, но на нашем тестовом сайте мы просто изменили наш файл header.php и добавили эти настраиваемые параметры. Некоторые темы WordPress используют CSS для изменения масштабирования, что не очень хорошо с точки зрения производительности, но из-за этого может потребоваться добавление дополнительного кода для устранения проблемы с IE.

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

Кроме того, если вы никогда раньше не использовали SVG, убедитесь, что на вашем сервере включен GZIP для файлов типа «image/svg+xml». Это гарантирует, что они будут сжаты и будут загружаться как можно быстрее. Иногда системные администраторы включают только более стандартные типы файлов. Примечание. GZIP уже включен на всех серверах Kinsta для SVG.

Резюме

SVG — отличный способ улучшить внешний вид вашего сайта! Мы рекомендуем использовать SVG, PNG и JPG вместе для достижения наилучшей производительности, так как очень подробные изображения не будут так хорошо работать в формате SVG. SVG отлично подходят для вашего логотипа, так как он идеально выглядит на каждом экране вместе со значками.

о чем ты думаешь? Вы уже использовали SVG на своем сайте WordPress?