Как добавить SVG спрайты иконок в тег body?

Question

Как добавить SVG спрайты иконок в тег body?

14 февр. 2017 г., 17:01:22

Просмотры: 13.6K

Голосов: 4

Я хочу добавить файл SVG иконки после тега body и использую этот код:

<?php include_once("assets/img/sprites.svg"); ?>

Но получаю такую ошибку:

Parse error: syntax error, unexpected T_STRING in /home/ostadba1/public_html/wp-content/themes/ostad/assets/img/sprites.svg on line 1

Цель этого - чтобы я мог использовать эти иконки одной строкой кода:

<svg class="icon"><use xlink:href="#shopping-cart"></use></svg>

Как правильно загрузить SVG файл в WordPress?

Sajad

143

разработка тем svg

Комментарии

Почему вы пытаетесь использовать PHP include, когда вам следует использовать HTML тег IMG? PHP include предназначен для PHP файлов.

Brian Fegter

14 февр. 2017 г. 17:13:44

@BrianFegter Я не могу использовать тег img. Это большой SVG файл, содержащий множество иконок. Вот мои ссылки на это решение https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Sajad

14 февр. 2017 г. 17:16:50

Хорошо, вопрос не новый, но для кого-то может быть полезно знать, что вы можете просто включить SVG, если переименуете его расширение в 'svg.php'.

Hexodus

8 мар. 2019 г. 00:27:54

Все ответы на вопрос

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

Если вы хотите использовать SVG в качестве шрифта, его необходимо подключить в CSS-файле следующим образом:

@font-face{
    font-family:my-font;
    url('ВАШ SVG URL ЗДЕСЬ') format('svg');}

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

Другой вариант – использовать тег <img>, как предложил Брайан в комментариях.

Также SVG можно использовать в качестве фоновых изображений, аналогично тому, как файлы jpg применяются в свойстве background-image в CSS.

Johansson

15.4K

14 февр. 2017 г. 17:23:14

Комментарии

Спасибо за ответ. Но я не хочу использовать это как шрифт или даже изображение, потому что это коллекция иконок. (Я обновил вопрос.)

Sajad

14 февр. 2017 г. 17:28:54

user6552940 867 · Accepted Answer · 2017-02-14T17:34:45Z

Потому что это неправильный способ подключения SVG в PHP.
Функция include_once используется для включения PHP-файлов.

Причина этой ошибки:

PHP Parse error: syntax error, unexpected version (T_STRING)

заключается в том, что PHP не смог распознать начало SVG-файла в месте, где объявлена версия XML:

<?xml version="1.0" encoding="utf-8"?>

Решение 1: Чтобы исправить это, просто удалите XML-заголовок из вашего SVG-файла.

Решение 2: Следуйте этим руководствам. (Рекомендуется)

Это гораздо лучший способ подключения SVG в ваших темах. Оба руководства объясняют одну и ту же концепцию.
Они помогут вам понять, как правильно подключать SVG в PHP для WordPress.

Теперь, как подключить их после тега body?
Для этого вам нужно применить методы из этих руководств в соответствующих файлах вашей темы.
Например, если ваша тема открывает тег body в index.php, вам нужно изменить index.php и добавить SVG там.

Решение 3:

<?php echo file_get_contents("filename.svg"); ?>

Вы можете просто вывести содержимое вашего SVG-файла в любом месте HTML-раздела вашего PHP-файла.

Однако, работа с файлами темы требует определенных знаний PHP и WordPress.