Как подключить svg в css
Перейти к содержимому

Как подключить svg в css

  • автор:

Создаём и используем символьный SVG-спрайт

SVG — масштабируемая векторная графика.

Сама по себе технология SVG — это очень объёмная тема — подробнее с ней можно познакомится на MDN Web Docs

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

Аналогичные иконки при масштабировании в формате SVG и PNG

Способы использования SVG-иконок

SVG-иконки можно использовать несколькими способами

1й способ — сохранить SVG-иконку как файл, и подключать как обычное изображение

  

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

2й способ — открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.

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

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

Этот способ и рассмотрим подробнее

Создаём и используем символьный SVG-спрайт

Символьный SVG-спрайт — это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке

Для примера скачаем пару SVG-иконок, например, на сайте https://uxwing.com/ с бесплатными иконками

Чтобы автоматически создать SVG-спрайт, воспользуемся онлайн-сервисом https://svgsprit.es/

Просто перетаскиваем все необходимые файлы SVG-иконок на главную страницу https://svgsprit.es/, и внизу страницы автоматически будет сгенерирован код, состоящий из двух частей

Первая часть — символьный SVG спрайт

Вторая часть — код использования

Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах

Добавим стили

Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke . Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться

Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke

fill — заливка иконки

stroke — цвет обводки

Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent , чтобы у иконки не было чёрной заливки по-умолчанию

body < background: #121212; >.container < max-width: 1140px; margin: 0 auto; >.icons < padding: 64px 0; >.icons__flex < display: flex; align-items: center; justify-content: center; >.icons__icon:not(:last-child) < margin-right: 24px; >.icons__icon svg.icon < width: 64px; /* ширина иконки */ height: 64px; /* высота иконки */ fill: #3626a7; /* цвет заливки иконки */ transition: 0.25s; /* плавное изменение цвета при наведении */ >.icons__icon:hover svg.icon < fill: #422ecc; /* цвет заливки иконки при наведении */ >/* Скрываем блок SVG-спрайта */ .hidden

Получаем следующий результат

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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как правильно вставлять 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. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.

.picture

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

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

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

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

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

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

Квадрат

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

 rect:hover  

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

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

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

Варианты установки SVG иконки

Варианты установки SVG иконки

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

У нас есть SVG иконка happyface.svg, которую нужно добавить на страницу.

Установка графическим файлом

Тут все просто, иконка ставится как обычная картинка в нужное место:

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

Установка в HTML

Можно вставить SVG графику непосредственно в нужное место HTML кода:

Установка через CSS

Можно сделать SVG графику фоновым изображением нужного элемента. Для этого переводим SVG код в CSS формат конвертером:

Подробнее об этом конвертере на codepen.io

Размеры блока с бекграундом задаются через CSS, поэтому атрибуты width=’128′ и height=’128′ в SVG коде не нужны Получившийся результат вставляем в CSS нужного нам элемента, например:

background-image : url ( «data:image/svg+xml,%3Csvg role=’img’ xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24′ stroke=’%23337AB7′ stroke-width=’2′ stroke-linecap=’square’ stroke-linejoin=’miter’ fill=’none’ color=’%23337AB7’%3E %3Cpath d=’M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328’/%3E %3Cline stroke-linecap=’round’ x1=’9′ y1=’9′ x2=’9′ y2=’9’/%3E %3Cline stroke-linecap=’round’ x1=’15’ y1=’9′ x2=’15’ y2=’9’/%3E %3Ccircle cx=’12’ cy=’12’ r=’10’/%3E %3C/svg%3E» ) ;

height : 128px ;
width : 128px ;
И далее вставляем нужную нам иконку куда угодно и сколько угодно раз.

Установка через JS

Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе
‘ ; // наша иконка

let svgimg = document . querySelectorAll ( «.happyface» ) ; // находим все элементы с классом happyface

for ( let i = 0 ; i < svgimg . length ; i ++ ) < // проходим циклом по всем элементам svgimg [ i ] . innerHTML = icon ; // вставляем в них иконку И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз. На jQuery код получается проще:
let icon = ‘. ‘ ; // наша иконка
$ ( «.happyface» ) . html ( icon ) ; // вставляем иконку в элемент с классом happyface
Нравится 26
В закладки

  • Опубликовано: 10.09.2019 / Обновлено: 21.02.2020
  • Рубрики: Весь сайт, Картинки и иконки
  • Метки: SVG, Иконки
  • 18375 просмотров
Смотрите также:

Флаги стран мира на SVG

Флаги стран мира на SVG

Иконки с флагами стран мира в SVG формате

Все иконки FontAwesome 5

Все иконки FontAwesome 5

Полный список всех иконок FontAwesome 5.15.3 с удобной сортировкой, поиском и экспортом

Корова-бабочка на CSS

Корова-бабочка на CSS

Анимационная картинка летящей и играющей на гитаре коровы

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

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