@nomta

Что лучше — спрайт svg или вставка кода непосредственно в css?

Если предполагается использование только svg, только для новых браузеров, нужно ли создавать спрайт или можно вставлять код svg непосредственно в стили css? Что лучше для производительности и какие тут могут быть подводные камни?

Мой случай - это сторонний плагин на js, который добавляет свою разметку, в которую мне в свою очередь нужно вставить svg, с hover-эффектами. В принципе плагин предоставляет любой вариант вставки, напрямую в HTML так даже и удобнее. Плюс обычные иконки на странице, вроде как тут удобнее всего спрайт. Если сочетать оба подхода, не будет ли это восприниматься кашей в коде?
  • Вопрос задан
  • 664 просмотра
Решения вопроса 2
Elisseii
@Elisseii
Пишу музыку и код.
Лучше делайте экспорт из Adobe Illustrator в SVG и забирайте код от туда.
Далее вставляем прямиком в HTML или PHP.
Не забудьте присвоить тегу SVG свой класс и добавить его к селекторам стилей прописанных в SVG (если они есть). Иначе может быть конфликт стилей с другими SVG на странице.

Если в вашей SVG картинке много точек и вы кодите на PHP, то можно забыть про длинные строки SVG в коде страницы (это неудобно) и импортировать их аккуратной строчкой вроде этой (удобно) :)
<?php include_once(get_template_directory() . "/images/svg/svg_image.php") //импорт SVG из отдельного файла ?>

Для Wordpress (указываем путь до директории темы) так:
<?php include_once(get_template_directory() . "/images/svg/svg_image.php") //импорт SVG из отдельного файла ?>

Вставка svg кода через CSS:
Бывает очень нужно вставить какой нибудь анимированный svg в css
в качестве background-image. Да ещё и не в виде импорта а поместить целиком svg код в css. Иногда бывает нужно для WP.
Что бы css скушал svg необходимо сконвертировать svg код в немного другой формат, поможет в этом вот этот сервис (практически единственный):
а далее просто вот так:
background-image: url( сюда вставляем сконвертированный svg код );

Там есть инструкция.

Можно ещё и через JQuery конечно вставлять:)
К примеру в начало выбранных элементов, так:
$(document).ready(function addDomObjects(){ 
	$(".selector").prepend('ЗДЕСЬ ВАШ SVG КОД (или любой другой контент)');
});


В случае с движком MODX Revolution удобно добавлять SVG через "Чанки" (chunk).
А вызываем просто через [[$svg_name]]
Если не нравится хранить огромный код SVG в базе данных MODX, то можно выбрать "статичный" вид чанка, это позволит хранить содержимое элемента вне БД, во внешнем файле.

Как видите вариантов масса, а какой из них вам использовать смотрите сами, исходя из ситуации.
А так, на первом месте конечно нужно придерживался первого способа и не мудрить там где это не нужно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
userAlexander
@userAlexander
Верстка наше все)
nomta по возможности вставляйте svg кодом в html с помощью svg use
логотип можно в css.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 дек. 2020, в 06:10
7000 руб./за проект
01 дек. 2020, в 04:48
229182 руб./за проект
30 нояб. 2020, в 03:19
25000 руб./за проект