
Использование SVG графики на сайте с CMS WordPress
Автор LANCIO Рубрика Блог Дата 27 октября, 2016
SVG представляет собой формат векторной графики, буквально эта аббревиатура означает – «масштабируемая векторная графика» (Scalable Vector Graphics). Если объяснить доступнее, то такие файлы содержат в себе данные в кривых, с которыми мы обычно сталкиваемся в Adobe Illustrator. Тип данных SVG довольно просто использовать при оформлении сайта, но для начала я разъясню несколько моментов.
Зачем нужен SVG?
- мизерные размеры файлов, что обеспечивает быструю загрузку сайта;
- возможность масштабирования файла до любого размера без потери в деталях;
- избавление от необходимости оптимизации графики на сайте под дисплеи Retina;
- гибкость в работе, благодаря фильтрам и интерактивности.
Современные версии браузеров без всяких проблем поддерживают векторную графику. Ваши svg изображения будут отлично смотреться на экране с любым разрешением и плотностью точек. Эту статью я решил написать именно потому, что по работе часто сталкиваюсь с вопросами по загрузке файлов с расширением svg на WordPress. К сожалению, по-умолчанию wordpress не обладает функционалом добавления подобной графики в «Медиафайлы», используя форму «Добавить новый», так как Вы увидите сообщение, что загрузка svg отключена по соображениям безопасности.
Опытные пользователи могут загрузить файл напрямую, посредством ftp-клиента, но встроенные библиотека wordpress с поддержкой svg позволит делать это удобнее и быстрее.
В подавляющем большинстве тем/шаблонов для wordpress присутствует в корне папки ваша_тема файл functions.php Данный файл предоставляет дополнительные функции для расширения функционала Вашей темы, а также позволяет установить дополнительные параметры для ядра WordPress.
Файл functions.php используется при каждом обращении любой страницы вашего сайта на движке WordPress, включая запросы в веб-интерфейсе администратора и AJAX запросы, что позволяет разработчикам темы делать проект гибким и индивидуальным, а не только изменять внешний вид сайта.
Если Вы добавите в functions.php следующий код, то Ваш сайт на WordPress будет поддерживать загрузку svg-графики из стандартной медиатеки:
<?php function cc_mime_types( $mimes ){ $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'cc_mime_types' ); ?>