Веб-студия LANCIO
Меню

Использование SVG графики на сайте с CMS Wordpress

векторная графика на сайте

Использование SVG графики на сайте с CMS WordPress

Автор Рубрика Блог Дата Октябрь 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' );
?>