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

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

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

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

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

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

Так выглядит наш паттерн:

Вот, что у нас получилось:

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

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

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

и его атрибутов создается фигура. Посмотрите, как выглядит иконка YouTube в inline формате.

Взгляните на результат:

Заключение

, разберем как можно ещё кастомизировать векторную графику.

Источник

Используем SVG на сайте

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

Сейчас мы рассмотрим методы встраивания SVG, их плюсы и минусы, а так же возможности манипулирования элементами SVG.

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

1 Можно менять цвет, размер, выравнивание и прочее стили обычного текста
2 Стили должны быть прописаны или в самом SVG файле, или подключены внешним стилем в SVG в начале файла:

По правде говоря стили прописанные внутри SVG так же будут работать и при использовании тега IMG или background-image, но в этом нет никакого смысла.

Иконочный шрифт

Плюсы и минусы такого подхода:
+ иконка ведет себя как символ шрифта, и все параметры настраиваются так же через CSS (размер, цвет, выравнивание и прочее);
+ единственный способ работающий в IE 8 без дополнительных манипуляций;
– все элементы SVG файла объединяются в один символ, поэтому управлять им при помощи CSS или JS можно только как единым целым;
– поддерживаются только одноцветные иконки;
– при сбое загрузки шрифта у пользователя либо не отобразятся иконки совсем, либо, при совпадении кодов иконок с символами юникода, отобразятся соответстующие символы.

SVG как OBJECT

К сожалению (или к счастью) codepen и jsfiddle блокируют загрузку внешних object в целях безопасности.
Встраивание выглядит следующим образом:

Объект встраивает элмемент атрибута data наподобие iframe, добавляя внутрь себя разметку подключаемого файла, поэтому к элементам можно обращаться при помощи JS, но не совсем обычным образом:

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

Но объект можно трансформировать используя CSS например так:

Плюсы и минусы такого подхода:
+ можно использовать внешний CSS файл для управления стилями;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.

SVG в IMG или background-image

Оба способа встраивания чем-то похожи на встраивание при помощи тэга object, например нельзя менять пропорции изменением ширины и высоты контейнера, но имеют больше ограничений.
Подключаемые в SVG внешние стили не будут работать, обратиться к элементам через JS так же не получится. Интерактивные анимации в SVG тоже не сработают. А проблемы с IE 8 и ниже так же остаются.
Но SVG анимации будут работать, в обоих случаях.
В случае с IMG втраивание выглядит как обычная картинка:

В случае с background-image как обычный блок:

Так же при помощи background-image можно использовать спрайты, как с png изображениями, а менять размер можно при помощи background-size:

Учитывая что процент людей c экранами device-pixel-ratio которых выше 1 и их устройства не поддерживают svg стремится к нулю(если такие вообще есть), то можно использовать медиа выражения для подключения svg, только для них, а для остальных использовать png версию:

Плюсы и минусы этих подходов:
+ поддерживаются SVG анимации и фильтры;
+ в случае с background-image можно использовать SVG спрайты;
– нельзя менять свойства элементов SVG через CSS или JS;
– не поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.

Inline SVG

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

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

где some_svg_element_id id элемента внутри исходного SVG файла.

К отдельно взятому элементу можно, например, применять SVG трансформации:

Но если внутри исходного SVG к элементу была применена интерактивная анимация, например по клику, как в демо выше, то при дублировании объекта анимация будет срабатывать на всех элементах одновременно.
SVG анимации и фильтры это тема для отдельной статьи, поэтому ограничусь лишь примером SVG фильтра (подробнее о SVG фильтрах), и примером SVG анимации (подробнее о SVG анимациях).
С обесепечением работоспособности для IE 8 и ниже все несколько сложнее, чем в других вариантах. Необходимо добавить дополнительную разметку:

Плюсы и минусы этого подхода:
+ никакой подгрузки внешних файлов;
+ доступны манипуляции с элементами SVG через CSS и JS;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
+ возможность повторного использования элементов;
– загрязняется код страницы;
– для IE 8 и ниже необходима дополнительная разметка, и замена на растровое изображение.

Источник

How to add SVGs with CSS (background-image)

There are TWO methods for displaying SVG images as a CSS background image:

Notice with this method we have to treat the SVG code before it will work. In the example, we convert the SVG to a Data URI. You could even convert it to Base64, but that will result in a messier, longer code blob. It is a best practice to avoid Base64 in this case.

Tip: Use this SVG to CSS converter tool to quickly convert your SVG code into a data URI.

After you place your file path or SVG code into the background-image property, you can further tweak how the background displays. You see, the great thing about using an SVG as a CSS background-image is that they can be styled with CSS background properties.

The CSS background-image properties

Let’s review all the properties related to background-image and what they do.

Layering multiple background images

Background-image can hold multiple background image layers to achieve cool effects. To create these image layers, comma-separate each image value in a single background-image property. Then when you use any related background properties, comma-separate those varied values to coincide with the images, or instead use a single value which will apply to all images the same.

You can mix images, SVG data URs, and CSS gradients. But you need to overlap images with transparency or take advantage of the background-blend-mode discussed above. Otherwise you will only see one background. The first image is on top of the background stack.

Let’s mix a few backgrounds now, and see what we get. First I headed over to the homepage of SVGBackgrounds.com to find a few quick backgrounds to layer together. Here is the code and results:

BUT, this technique prevents the need to layer div containers to achieve a layer effect. Let’s try again, this time to make a simpler one that looks useable. Let’s place a pattern over a cool image texture.

Much better!

I could definitely see something more like this being used in a real-world project. Subtle backgrounds are always nice.

Wrapping up about SVGs in CSS background-images

), the creator behind SVG Backgrounds. I produce a free resource every few months, sign up for alerts.

Almost there! You will be sent an email confirmation to complete sign up for alerts.

Источник

Векторная замена спрайтам — имплантируем SVG в CSS

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

Возьмем, к примеру, иконку корзины:

Ее код выглядит примерно так:

Соответственно, использование ее в качестве фона в data-uri будет выглядеть так:

Пробуем. В Хроме и Опере все замечательно, а вот в IE9-10-11, Safari, и, как ни странно, Firefox — фоновая картинка не отображается, они не понимают такой формат записи. Лезем искать, в чем проблема и выясняем, что для IE и прочих для содержимого SVG-файла надо выполнить URI-кодирование строки по стандарту RFC 3986. Кодируем, получаем вот такую конструкцию:

Подставляем ее в background, проверяем:

Ура, все работает! Нюанс — кодировку в данном случае указывать не нужно. Если указать — то перестанет работать в IE.

Ну и, наконец, для того, чтобы внешний вид иконки можно было настраивать, используем любой препроцессор (я использую LESS, но это не принципиально) и оформим наш класс иконки как примесь (mixin). Для того, чтобы можно было менять цвет заливки, находим в кодированной строке атрибут fill, там будет что-то типа:

То, что находится между %23 и %22 — и есть искомый код цвета, на место которого надо подставить переменную. В итоге получим следующее:

Используется данная примесь следующим образом (образец произвольный):

Вот, собственно, и все. LESS- (SASS, Stylus, etc.) файлик с такими примесями отлично заменяет спрайт.

Для оптимизации и кодирования SVG я использовал GULP, плагины gulp-svgo и gulp-data-uri-stream. Да, этот метод дает возможность менять лишь размеры иконки, цвет заливки и обводки, но в большинстве своем этого вполне достаточно.

Источник

Варианты использования SVG на сайтах. Часть #1

Три способы вставки SVG графики в HTML документ

1) Прямая вставка содержимого SVG файла

Открываете SVG файл через любой редактор кода, копируете все что находится между тегами и вставляете в HTML-документ. У тега svg есть ряд атрибутов, которые обозначают следующее:

2) Подключение через img тег

3) Вставить через CSS-свойство background-image

.bg-image <
width: 50px;
height: 50px;
background-image: url(image.svg);
>

Когда какой способ лучше всего использовать?

Чтобы ответить на этот вопрос, нужно ответить на другой вопрос: А будет конечный пользователь взаимодействовать с изображением или нет? Если нет, то целесообразнее вставлять SVG изображение на сайт, как картинку (первый и второй способы). Здесь хороший пример логотип, обычно он вставляется на сайт, как законченное изображение без анимаций и hover-эффектов.

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

Из чего состоит SVG изображение?

SVG элемент состоит из нескольких предопределенных примитивов:

Создание SVG прямоугольника

Сделаем HTML-разметку: разместим тег rect внутри тега svg с классом rect. Через класс rect, мы сможем управлять CSS-стилями прямоугольника. По умолчанию построение любой фигуры начинается от верхнего левого угла и чтобы фигура не прилипала к краю браузера, зададим внутри тега rest свои значения для X,Y, а также высоту и ширину фигуры. Подсветим пунктиром атрибут viewBox, через класс border.

.border <
border:2px dashed gray; /* пунктир viewBox */
>

.rect <
fill: gold; /* цвет заливки прямоугольника */
stroke: goldenrod; /* цвет контура прямоугольника */
stroke-width: 6; /* ширина контура прямоугольника */
>

Пример прямоугольник с полупрозрачными заливкой и обводкой. CSS-свойства fill-opacity и stroke-opacity задают прозрачность в диапазоне, от 0 до 1.

.rect-trans <
fill-opacity: 0.3; /* прозрачность цвета заливки */
stroke-opacity: 0.5; /* прозрачность цвета обводки */
fill: powderblue; /* цвет заливки прямоугольника */
stroke: blue; /* цвет контура прямоугольника */
stroke-width: 6; /* ширина контура прямоугольника */
>

Атрибуты rx и ry закругляют углы прямоугольника.

.rect-round <
fill: gold; /* цвет заливки прямоугольника */
stroke: goldenrod; /* цвет обводки прямоугольника */
stroke-width: 6; /* ширина контура прямоугольника */
rx: 20; /* закругление по X */
ry: 20; /* закругление по Y */
>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник