Как добавить svg в css
Перейти к содержимому

Как добавить svg в css

  • автор:

SVG и CSS

На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG (en-US) .

Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.

Общая информация: SVG

SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.

SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.

Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.

Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.

На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference (en-US) , для информации о поддержке отдельных элементов.В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.Более подробная информация о SVG в Mozilla, представлена на станице SVG (en-US) в этой wiki.

За дело: Демонстрация SVG

Создайте новый документ SVG, как обычный текстовый файл, doc8.svg . Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

 DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> title>SVG demonstrationtitle> desc>Mozilla CSS Getting Started - SVG demonstrationdesc> defs> g id="segment" class="segment"> path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> g> g id="quadrant"> use xlink:href="#segment"/> use xlink:href="#segment" transform="rotate(18)"/> use xlink:href="#segment" transform="rotate(36)"/> use xlink:href="#segment" transform="rotate(54)"/> use xlink:href="#segment" transform="rotate(72)"/> g> g id="petals"> use xlink:href="#quadrant"/> use xlink:href="#quadrant" transform="rotate(90)"/> use xlink:href="#quadrant" transform="rotate(180)"/> use xlink:href="#quadrant" transform="rotate(270)"/> g> radialGradient id="fade" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> stop id="fade-stop-1" offset="33%"/> stop id="fade-stop-2" offset="95%"/> radialGradient> defs> text id="heading" x="-280" y="-270"> SVG demonstrationtext> text id="caption" x="-280" y="-250"> Move your mouse pointer over the flower.text> g id="flower"> circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> use id="outer-petals" xlink:href="#petals"/> use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> g> svg> 

Создайте новый файл CSS, style8.css . копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

/*** SVG demonstration ***/ /* page */ svg  background-color: beige; > #heading  font-size: 24px; font-weight: bold; > #caption  font-size: 12px; > /* flower */ #flower:hover  cursor: crosshair; > /* gradient */ #fade-stop-1  stop-color: blue; > #fade-stop-2  stop-color: white; > /* outer petals */ #outer-petals  opacity: 0.75; > #outer-petals .segment-fill  fill: azure; stroke: lightsteelblue; stroke-width: 1; > #outer-petals .segment-edge  fill: none; stroke: deepskyblue; stroke-width: 3; > #outer-petals .segment:hover > .segment-fill  fill: plum; stroke: none; > #outer-petals .segment:hover > .segment-edge  stroke: slateblue; > /* inner petals */ #inner-petals .segment-fill  fill: yellow; stroke: yellowgreen; stroke-width: 1; > #inner-petals .segment-edge  fill: none; stroke: yellowgreen; stroke-width: 9; > #inner-petals .segment:hover > .segment-fill  fill: darkseagreen; stroke: none; > #inner-petals .segment:hover > .segment-edge  stroke: green; > 

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

Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:

Примечания к демонстрации:

  • Документ SVG привязывается к таблице стилей общепринятым способом.
  • SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.
Изменить таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.
Что дальше?

В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML

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.

Как размещать svg в html

я новичок изучаю веб своими силами и у меня вылезло несколько вопросов по поводу использования svg на странице html.

1. Как правильно вставлять svg в html?

  1. Вставить svg инлайново(просто вставить весь код svg в html).
  2. Если иконок больше одной, то отдельно и вставлять их в html где они используются.
  3. Вставлять с помощью object, iframe, embed.
  4. Собрать все иконки в спрайт и вытаскивать их с помощью use.

2. Где хранить спрайт?

В html или отдельным файлом спрайтом. Умею вытаскивать иконки из спрайта, если он весь лежит в html или даже если он лежит отдельным файлом.svg где-нибудь в картинках. Уметь то умею но как делать это. А если быть точнее, то где хранить спрайт чтобы не было проблем с кэшированием или какие там проблемы еще бывают…

Можете привести примеры из реальных проектов, что бы было, на что опереться для дальнейшего развития.

3. Использовать внешние стили или писать их внутри svg?

Отслеживать
задан 24 янв 2023 в 10:10
28 1 1 серебряный знак 5 5 бронзовых знаков
Возможный дубликат вопроса: С помощью какого тега лучше всего добавлять svg
24 янв 2023 в 17:16

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Как правильно, мне сказать сложно. Поэтому скажу как делаю я ).

Делаю несколько спрайтов, объединяя по какой-нибудь своей логике, и скидываю в /images/icons/ .
Подключаю через use .

Вроде как это один способов, который позволяет кэширование.
Также позволяет использовать указание некоторых svg-параметров через css.

Отслеживать
ответ дан 24 янв 2023 в 10:33
656 4 4 серебряных знака 6 6 бронзовых знаков

Знаю несколько способов а какой будет правильный что бы потом не было ни вопросов, ни проблем с той, же интерактивностью (анимацией если придется анимировать).

#1. object

Лучший способ, чтобы реализовать анимацию, интерактивность, стилизацию, масштабирование это:

Этим способом можно добавлять как один файл SVG, так и несколько иконок, объединенных в спрайт. Этой теме посвящен раздел с меткой — svg-спрайт

#2. Инлайн добавление кода SVG в HTML

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

Ниже код анимации шестеренок с кнопками пуска и остановки вращения.

                              GO   STOP   

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

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

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

#4. Другие способы добавления SVG, которые делают анимацию, стилизацию невозможной

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

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

Для покраски изображений остается только один способ: фильтры SVG и CSS

Ниже примеры изменения цвета при наведении:

 img:not(:hover) < transition: 2s; filter: saturate(0%); -webkit-filter: saturate(0%); >img:hover  
 .img:hover  

О других способах добавления SVG в HTML здесь

Конвертер SVG в CSS

Если SVG графика, например иконка, размещается на странице несколько раз, то удобнее и правильнее ее вставить через JS или CSS. Подробнее об этом можно прочитать в статье «Варианты установки SVG иконки».

Данный конвертер переводит SVG код в фоновую картинку на CSS. Для этого просто вставьте его код в нужное поле или загрузите с файла и нажмите кнопку «Конвертировать». В итоге у нас получится стиль background-image , который можно использовать так:

.my-icon

Затем в нужном месте страницы вместо SVG картинки мы ставим:

Смотрите также:

Конвертер фотографии в трафарет

Конвертер для перевода изображений в двухцветный трафарет

Конвертер изображений в base64

Кодирование любых изображений в 64-разрядный код base64

Конструктор Clip-Path

Конструктор для создания фигур с помощью CSS-свойства Clip-Path

Как верстальщику работать с SVG

Узнаём про векторную графику, добавляем svg-картинки к HTML и творим всякое-разное с их цветом.

Максим Васянович

Максим Васянович

Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик

Помимо привычных растровых форматов (JPG, PNG, GIF), в веб-разработке широко применяют векторный — SVG.

Что такое SVG

SVG (сокращение от Scalable Vector Graphics — «масштабируемая векторная графика») — это вид графики, которую создают с помощью математического описания геометрических примитивов (линий, кругов, эллипсов, прямоугольников, кривых и так далее), которые и образуют все детали будущего изображения.

То есть в этом формате хранится не сама картинка, а инструкции для её построения по точкам и кривым. Они написаны на языке разметки SVG, расширяющем XML.

Достоинства SVG

Прелесть SVG раскрывает масштабирование. Если увеличить растровое изображение сверх 100%-ного размера — проявляется пикселизация: отдельные точки превращаются в одноцветные блоки пикселей, границы областей становятся ступенчатыми, и в целом картинка выглядит негладко, некрасиво.

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

У svg-графики есть ещё одно достоинство. Её можно открывать как HTML или CSS и менять в любом редакторе кода, и даже на лету. Подробнее об этом ниже.

И наконец, при прочих равных SVG весит намного меньше растровых изображений.

Недостатки SVG

Их мало. Во-первых, SVG не поддерживается очень старыми браузерами, а во-вторых, не используется для фотографий.

Как подключить SVG к html-странице

Есть три варианта добавления векторной графики. У каждого свои показания к применению.

Через тег

Здесь всё так же, как и с растровой графикой:

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

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