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

Wordpress
26.11.2017

Используя 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

Источник:

Using SVG

Рекомендую к прочтению:

Комментарии (6) к “Добавляем файлы SVG через PHP”

Оставить комментарий