Добавляем файлы SVG через PHP

Используя PHP можно загружать содержимое SVG-файлов без лишних запросов к серверу, без использования img или object.
В чем плюс — меньше HTTP-запросов, проще и красивее код бек-энда.
В чем минус — исходный код сайта становится более громоздким и уродливым, а так же невозможность закешировать полученный SVG-элемент.

Для чего это может быть нужно — чтобы с svg-элементом можно было проводить манипуляции, задавать стили на ховер или анимации.

Используем такой код:

<?php echo file_get_contents("https://s.cdpn.io/3/kiwi.svg"); ?>

Для CMS WordPress я использовал такой формат:

<?php 
$icon_mail = get_stylesheet_directory() . '/assets/images/general/icon-mail.svg';
echo file_get_contents($icon_mail); 
?>

Важный нюанс

Функция

get_stylesheet_directory_uri()

будет создавать дополнительную нагрузку на сервер, потому что будет выводить урл дочерней темы без слеша, то есть будет запрашивать файл по урлу http://example.com/wp-content/themes/twentyten.

В то время, как функция

get_stylesheet_directory()

будет возвращать абсолютный путь до каталога темы /home/site.ru/www/wp-content/themes/theme и не будет создавать лишние запросы на сервер.

По коду видно, что сначала мы получаем путь к файлу icon-mail.svg, который лежит в папке шаблона и затем уже подставляем его в file_get_contents().

В данном случае, более правильно использовать file_get_contents(), а не include() или include_once(), поскольку SVG иногда экспортируется с  <?xml version="1.0" encoding="UTF-8"?> – это первая строка в SVG, которую PHP может убрать.

Если неправильно указать путь к файлу, то получи ошибку, так что внимательно с получением урла svg.

Получается такой пример в PHP:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test SVG</title>
</head>
<body>
  <div class="svg">
    <?php 
    $icon_mail = get_stylesheet_directory() . '/assets/images/general/icon-mail.svg';
    echo file_get_contents($icon_mail); 
    ?>
  </div>
</body>
</html>

И на выходе будет выводиться такой код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test SVG</title>
</head>
<body>
  <div class="svg">
    <svg class="social-icon social-icon_mail" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" viewBox="-41 165 511.9 511.9" xml:space="preserve"><path class="st0" d="M215.4 462.4l-35.6-31.1-101.7 87.2c3.7 3.4 8.7 5.6 14.2 5.6h246.2c5.5 0 10.5-2.1 14.1-5.6L251 431.3l-35.6 31.1z" fill="#696b72"/><path class="st0" d="M352.7 324.3c-3.7-3.4-8.7-5.6-14.2-5.6H92.4c-5.5 0-10.5 2.1-14.1 5.6l137.2 117.6 137.2-117.6zm-281 12.4v170.6l99.2-84.3-99.2-86.3zM259.9 423l99.3 84.3V336.7L259.9 423z" fill="#696b72"/><circle class="st1" cx="215.4" cy="421.4" r="236.9" fill="none" stroke="#696b72" stroke-width="35" stroke-miterlimit="10"/></svg>
  </div>
</body>
</html>

При использовании svg в таком формате можно задавать различные стили и обращаться к элементам svg с помощью CSS:

See the Pen Hover SVG by Denis (@deniscreative) on CodePen.dark

Источник:

Создание мультиязычных сайтов на CMS WordPress

[vc_message color=»alert-info»] Статья в процессе написания. Начинал писать ее в 2013 году, потом все менялось…

Создание вариативных товаров в WooCommerce (создание вариаций)

Создаем вариации для товаров в WooCommerce. 1. Во вкладке Product data выбираем Variable Product 2….

Меняем внешний вид вариаций — вместо селектов делаем радио-кнопки

Задача — сделать красивый внешний вид для вариаций товаров в WooCommerce. По умолчанию, стандартный вид…

Выводим таймер обратного отсчета для продукта в WooCommerce

Задача такая — выводить для различных товаров таймер обратного отсчета, когда заканчиваются скидки или акции…

6 комментариев

Александр

include

В статье написано, почему не используется include.

Евгений

Спасибо. Раньше использовал include, а сейчас столкнулся с проблемой. В этой статье понял, что проблема в строке <?xml…
Ваш способ помог)

Круто) Рад, что пригодилось кому-то еще)

Спасибо за статью. Очень пригодилась!

Спасибо, успехов!

Ответить