Как вставить svg в html

Описание и примеры стандартных функций SVG

Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax

Как добавить SVG в HTML5 страницу

1. Использование тега
2. Использование тега
3. Использование тега
4. Использование непосредственного встраивания (inline SVG )
5. Использование тега
6. Использование CSS Background Image

1. Использование

Если вы планируете использовать более продвинутые функции SVG, такие как применение таблицы стилей CSS или внедрение скриптов, то
тег HTML5 лучший способ.

Your browser does not support SVG

Для старых браузеров не поддерживающих SVG есть оригинальный способ замены SVG изображения фоллбек картинкой png :

Браузер не понимающий SVG проигнорирует тег и перейдет к следующему тегу и обработает его, как обычный HTML тег и выведет картинку.
Для проверки работоспособности SVG анимации кликните на кнопки “GO” и “STOP” .

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

/* SVG specific fancy CSS styling here */
2. Использование

Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов .

Это может быть хорошим методом, если вы хотите полностью отделить SVG код и скрипт на вашей главной странице. Однако манипуляции SVG изображениями с главной страницы при помощи В данном примере анимация работает, так как команды на её реализацию находятся внутри файла SVG.

3. Использование тега.

SVG документ может быть добавлен на вашу веб страницу, как любое другое изображение:

Для браузеров не воспринимающих SVG David Bushell предложил прием подмены *.svg изображением *.png .

Можно, как обычно для любого другого изображения задать ширину, высоту. Но почему этот способ добавления SVG, не стал самым распространенным способом?

По соображениям безопастности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE9 , Safari , Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.

4. Использование непосредственного встраивания (inline SVG ).
< title >Embedded SVG < / title >
< h1 >Embedded SVG < / h1 >

Этот метод работает почти во всех HTML5 браузерах и также поддерживает анимацию, скрипты и CSS.
Но должны ли мы использовать его?

Такой вариант возможен для небольших SVG изображений или для встраиваемых с помощью JavaScript изображений, но я рекомендую Вам сохранять эти SVG изображения в отдельные файлы, если это возможно. Так как этот метод не позволяет поддерживать кэширование.

5. Использованиетега.

Я включил тег в целях указаний всех возможностей внедрения SVG в HTML страницу, но никогда не используйте этот тег.
Потому что тег никогда не был и наверное не будет частью спецификации HTML или XHTML . Однако этот тег поддерживается большинством браузеров и часто используется для реализации флэш плагинов.
Вот код. Он работает, но не используйте его!

Как вставить svg в html

Для вставки SVG в HTML страницу есть несколько способов:

 src="path/to/image.svg" alt="SVG Image"> 

 type="image/svg+xml" data="path/to/image.svg" width="100%" height="100%">  src="fallback-image.png" alt="SVG Image">  

 src="path/to/image.svg" type="image/svg+xml" /> 

Использование тега внутри HTML страницы:

 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  cx="50" cy="50" r="50" />  

Использование CSS свойства background-image:

div  background-image: url("path/to/image.svg"); background-size: cover; width: 100%; height: 100%; > 

SVG в HTML. Введение

Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.

Код

html xmlns="http://www.w3.org/1999/xhtml"> head> title>XTech SVG Demotitle> style> stop.begin  stop-color: yellow; > stop.end  stop-color: green; > body.invalid stop.end  stop-color: red; > #err  display: none; > body.invalid #err  display: inline; > style> script> function signalError()  document.getElementById("body").setAttribute("class", "invalid"); > script> head> body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> form> fieldset> legend>HTML Formlegend> p> label>Введите что-нибудь:label> input type="text" /> span id="err">Incorrect value!span> p> p> input type="button" value="Activate!" onclick="signalError();" /> p> fieldset> form> svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> linearGradient id="gradient"> stop class="begin" offset="0%" /> stop class="end" offset="100%" /> linearGradient> rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> svg> body> html> 

Примечание

В примере представлен обычный XHTML, CSS и JavaScript-код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.

Такой способ имеет следующие пункты в свою пользу:

• Мы использовали штатную XHTML форму, которая уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон
• Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую вёрстку.
• Это очень просто сделать.
• Изображение масштабируемое и может растягиваться до нужного размера
• Мы можем применять декларированные стили как для HTML так и для SVG
• С помощью JavaScript можно управлять как HTML так и SVG
• Это полностью валидный документ, основанный на стандартах.

Примечание: Чтобы к изображению с DOM добавить связь встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:

var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); 

Дополнительно

Значение атрибута viewBox определяет область в пространстве пользователя, относительно внешним границам просмотра.

viewBox=»x y w h» — где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:

Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут preserveAspectRatio . С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow) области просмотра, края svg могут быть обрезаны или вписаны.

alignment — одно из значений xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid или xMaxYMax .

meet — сохраняет пропорции, умещая svg в область просмотра

slice — тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область

Также есть спецификатор none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).

Атрибут style применяется для определения стиля элемента.

Ссылки по теме

• Сохранение пропорций ссылка
• Масштабирование и сдвиг msdn.microsoft
• Ещё SVG в XHTML: пример (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как добавить SVG в свойство content псевдоэлементов ::before или ::after

SVG это современный формат для векторной графики. Его можно использовать для добавления графики на страницы сайта, классическим способом, как ссылку на отдельный файл, так и внедрив содержимое этого файла непосредственно в HTML код, ведь SVG это валидный HTML5.

Что такое ::before и ::after

Это псевдоэлементы, которых нет в HTML файле, но которые можно добавить с помощью CSS и использовать для стилизации страниц сайта, почти как обычные элементы, как div или span. Их удобно использовать для добавления контента в страницу, когда HTML код не доступен или его структура не должна изменяться.

SVG и псевдоэлементы

В чем суть проблемы и зачем вообще использовать SVG в ::before и ::after ? Чтобы было легче ответить, разобьём этот вопрос на насколько.

Почему SVG? Он легкий и масштабируется, его удобно использовать в качестве пиктограмм для иконок, к тому же, все современные браузеры его поддерживают.

Почему псевдоэлементы и content ? На самом деле это не обязательно. С тем же успехом, можно использовать свойство background-image, любого другого доступного элемента, но если это свойство уже используется, а HTML нельзя модифицировать, то только псевдоэлементы и свойства background-image или content , что удобней или доступно.

SVG в свойстве content

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

У нас есть тестовый элемент , который используем для добавления псевдоэлемента и svg иконки:

#test-icon::before < content: url("data:image/svg+xml;charset=UTF-8,"); display: inline-block; width: 24px; height: 24px; > 

На что следует обратить внимание и возможные причины почему иконка SVG не показывается на странице:

• Между url(» и «); не должны быть двойных кавычек, все они заменены на одинарные.
• Наличие правильного MIME типа image/svg+xml .
• Наличие xmlns=’http://www.w3.org/2000/svg’ version=’1.1′ .
• Свойства height=’24’ и width=’24’ указываются без единиц измерения.
• В свойстве fill не должно быть символа решетки ( # ), для указания цвета. Ее нужно заменить кодом ‘ %23 ‘ (как в данном примере) или указывать цвет словами, например, white , purple , red и т.д.

Пытливый веб разработчик заметит, а почему не указать просто ссылку на файл: url(«path/to/svg/icon.svg»); . Да так можно, но этим мы создаем дополнительный HTTP запрос к серверу, что негативно влияет на скорость загрузки.

При использовании этого подхода можно редактировать иконку прямо из CSS, и даже без использования векторного редактора, правда это справедливо для SVG иконок, в которых используются простые фигуры, например, circle , rect , line , возможно polyline . Если там есть только path , вряд ли найдутся много веб разработчиков или дизайнеров, которые в уме могут представить такую фигуру, без редактора не обойтись.