Лучше делайте экспорт из
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, то можно выбрать "статичный" вид чанка, это позволит хранить содержимое элемента вне БД, во внешнем файле.
Как видите вариантов масса, а какой из них вам использовать смотрите сами, исходя из ситуации.
А так, на первом месте конечно нужно придерживался первого способа и не мудрить там где это не нужно.
Простой
