Как подключить 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: .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?

This page was last modified on 5 дек. 2022 г. by MDN contributors.

Источник

Как правильно вставлять SVG

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

Я вам больше скажу: SVG — это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Стилями и скриптами, Карл! Вот вам и простая картинка.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого — особенности.

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

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

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

Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.

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

Третий способ, через , наконец-то выбивает стекло между страницей и внутренностями SVG-файла. Работают скрипты, взаимодействие, анимация — если они описаны внутри SVG. Между тегами можно вставить фолбэк, который покажется, если браузер не говорит на SVG.

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

За гибкость приходится платить: из-за того, что это уже не просто графика и там можно скриптовать, к такому способу предъявляются другие требования безопасности. Например, картинку с другого домена просто так уже не вставить.

Этот способ подходит, когда вам нужно вставить какую-то интерактивную графику: игрушки, графики и всякое сложное. Достаточно вспомнить, что когда-то через вставлялись Flash-ролики. Спросите у родителей, что это такое.

Четвёртый способ заработал, когда браузеры переписали свои HTML-парсеры по новому стандарту и содержимое SVG-файлов стало можно вставлять прямо на страницу, как любые другие теги.

С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты — ну, вы сами знаете. Можно, например, менять цвет заливки при наведении и описывать всё в общих стилях.

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

SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Хотите закопаться глубже? Читайте статьи Сары Суайдан, это пока лучшее, из того, что есть. Все ссылки есть в описании к видео.

В итоге: способов куча и все чем-то хороши. Выбирайте подходящий под ваши задачи, но всегда начинайте с самых простых: и фона, а потом уже усложняйте — если не хватает.

Источник

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

HTML, CSS

В предыдущих сериях…

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

Возьмем стандартную папку с проектом, в которой есть отдельная папка для изображений, отдельная — для файлов .css , а также файл .html

Подключение через тег в html

Работаем как с обычной картинкой. Тег , атрибут src , прописываем путь к файлу. Можно использовать любые атрибуты , включая атрибут width .

Иконки
  

Подключение фона в .css

Можно подключить svg-графику в качестве фона элемента. Часто используются фоновые паттерны. Это небольшой фрагмент, впоследствии повторяющийся и создающий орнамент.

Укажите в html нужный класс и пропишите свойства фона background-image в файле css. Используйте функцию url() , чтобы задать путь к файлу с изображением.

/* SVG фоновое изображение */ .block-bg < width: 600px; height: 200px; background-image: url('./../img/bg-zigzag.svg'); >

Описываем svg-графику inline

Существуют специальные теги и атрибуты для описания графики прямо в коде. При этом, изображение становится интерактивным — мы можем, например, менять цвет, или размер по наведению на иконку.

Тег используется как контейнер для хранения SVG графики. При помощи тега и его атрибутов создается фигура. Посмотрите, как выглядит иконка YouTube в inline формате.

Стилизуем в файле .css по классу youtube-icon .

Будем менять цвет иконки по наведению при помощи свойства fill .

/* SVG inline код. Смена цвета по ховеру */ .youtube-icon < width: 64px; height: 64px; fill: black; >.youtube-icon:hover

Заключение

• Мы разобрали 3 стандартных способа подключения SVG-графики на сайт: тег , свойства CSS, тег .
• Узнали про то, как можно менять цвет SVG-иконки через CSS и свойство fill .
• В следующей статье продолжим работу с тегам , , разберем как можно ещё кастомизировать векторную графику.

Источник