Я решил интегрировать инлайн SVG-спрайт в мою последнюю WordPress тему. И вот краткая инструкция о том, что я для этого сделал.

Инлайн SVG просто ссылается на SVG-спрайт, уже включенный в разметку страницы. Использование SVG-спрайтов позволяет сократить количество HTTP-запросов к серверу, а кроме того,  спрайты кэшируются браузерами. Да и поддержка очень радует.

Обратите внимание: в этом пособии путь /images/sprite.svg.php это название моего спрайта и путь, где он лежит.

Подключите ваш SVG-спрайт

Во-первых, вам необходимо подключить ваш спрайт непосредственно в тег <body>, чтобы обеспечить его максимальную доступность во всех шаблонах темы. Я считаю, что самый простой способ реализации – это использовать нативную функцию get_template_part()(рус. версия статьи) прямо в файле header.php.

И вот скриншот:

Подключение SVG-спрайта в разметку страницы
Подключение SVG-спрайта в разметку страницы

Измените разрешение SVG-файла

Добавьте разрешение .php вашему спрайту. Должно получиться .svg.php. То есть, sprite.svg превратится у нас в sprite.svg.php. Вы можете добавить таск Gulp copy в сборку проекта, чтобы она автоматически создавала для вас sprite.svg.php, но в рамках этого пособия мы просто переименуем файл .svg

Используйте инлайн SVG

Теперь вы можете использовать SVG изображение в вашей теме. Ниже я привел метод, который использую сам. Если это необходимо, вы можете изменить второй элемент <div> на <a>.

Обратите внимание: я добавил проверку, не был ли загружен спрайт при помощи настройщика темы, потому что в этом случае необходимо добавить get_template_directory_uri() для правильной загрузки спрайта.

Стилизация

Чтобы иметь возможность стилизовать изображения я добавил класс .svg__wrapper, а затем присвоил атрибуты высоты и ширины конкретным SVG. Я считаю, что это наилучший способ избежать повторения кода CSS, но если у вас есть идеи получше, я с удовольствием их выслушаю.

Наслаждайтесь

Это результат моих недавних рабочих экспериментов. Если у вас есть какие-то отзывы или предложения по улучшению, я буду рад их видеть – просто оставьте комментарий к статье.


Оригинал статьи

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Похожие записи

Для личинки веб-разработчика

Сборка Webpack 4 для чайников и сочувствующих

Продолжаю пытать себя и окружающих попытками разобраться в настройках Webpack 4. И в процессе нашла совершенно невероятный набор уроков, которые даже мне помогли. Серьезно, абсолютное волшебство. Велкам: https://tocode.ru/curses/nastroika-webpack4/

Для личинки веб-разработчика

Как научиться чему угодно: 10-шаговая система Джона Сонмеза

Умение учиться – так же известное как “мета-обучение” – один из наиболее полезных навыков из всех, что вы можете приобрести. И до сих пор практически никто не знает как это сделать. Почему это так важно? Подробнее…

Для личинки веб-разработчика

Несколько простых правил хорошего кода (15 лет моего опыта)

Привет, ребятки. Я работаю программистом уже более 15 лет и за это время использовал много языков, парадигм, фреймворков и прочих штук. И сегодня хочу поделиться моими правилами написания хорошего кода Оптимизация против читабельности. К черту Подробнее…

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: