Время на прочтение
6 мин
Количество просмотров 218K
Оставим за скобками вопрос о целесообразности использования SVG на сайте. Каждый сам для себя должен определить полезность этой технологии. Тем более что эта тема поднималась уже неоднократно.
Сейчас мы рассмотрим методы встраивания SVG, их плюсы и минусы, а так же возможности манипулирования элементами SVG.
Статья рассчитана в первую очередь на тех, кто до сих пор не использует векторную графику на своих сайтах, но очень хочет быть одной ногой в
будущем
настоящем.
Для любопытных сразу приведу сводную таблицу:
| Иконочный шрифт | IMG, background-image | Object | Inline | |
|---|---|---|---|---|
| CSS Манипуляции | Частично1 | Нет | Частично2 | Да |
| JS манипуляции | Частично1 | Нет | Да | Да |
| SVG анимации | Нет | Да | Да | Да |
| Интерактивные SVG анимации | Нет | Нет | Да | Да |
1 Можно менять цвет, размер, выравнивание и прочее стили обычного текста
2 Стили должны быть прописаны или в самом SVG файле, или подключены внешним стилем в SVG в начале файла:
<?xml-stylesheet type="text/css" href="svgstyle.css"?>
По правде говоря стили прописанные внутри SVG так же будут работать и при использовании тега IMG или background-image, но в этом нет никакого смысла.
Иконочный шрифт
Пример на codepen.io
Да, из SVG можно создать иконочный шрифт, более того есть свободно распространяемые иконочные шрифты. Но есть ряд серьезных ограничений. Как и любой символ шрифта SVG иконки в шрифте не могут иметь больше одного цвета.
Вот несколько сервисов, на которых можно скачать готовые наборы иконок, или загрузить свои, и создать собственный иконочный шрифт:
- http://fontello.com
- https://icomoon.io/app
Нужно учесть что при создании собственного шрифта нужно преобразовать все объекты в пути. Тэги и атрибуты которые будут пропущены: circle, rect, stroke, stroke-width, fill, fill-rule.
При использовании иконочного шрифта все элементы SVG объекта объединяются в один символ, и взаимодействовать с ним через CSS и JS можно только как с символом шрифта: менять размер при помощи font-size, менять цвет при помощи color, анимировать при помощи CSS animation или JS и прочее.
Плюсы и минусы такого подхода:
+ иконка ведет себя как символ шрифта, и все параметры настраиваются так же через CSS (размер, цвет, выравнивание и прочее);
+ единственный способ работающий в IE 8 без дополнительных манипуляций;
– все элементы SVG файла объединяются в один символ, поэтому управлять им при помощи CSS или JS можно только как единым целым;
– поддерживаются только одноцветные иконки;
– при сбое загрузки шрифта у пользователя либо не отобразятся иконки совсем, либо, при совпадении кодов иконок с символами юникода, отобразятся соответстующие символы.
SVG как OBJECT
К сожалению (или к счастью) codepen и jsfiddle блокируют загрузку внешних object в целях безопасности.
Встраивание выглядит следующим образом:
<object type="image/svg+xml" data=”your.svg" id=’object’ class=’icon’></object>
Объект встраивает элмемент атрибута data наподобие iframe, добавляя внутрь себя разметку подключаемого файла, поэтому к элементам можно обращаться при помощи JS, но не совсем обычным образом:
var object = document.getElementById("’object’"); //получаем элмент object
var svgDocument = object.contentDocument; //получаем svg элемент внутри object
var svgElement = svgDocument.getElementById("some_id_in_svg"); //получаем любой элемент внутри svg
svgElement.setAttribute("fill", "black"); //меняем атрибуты выбранного элемента
Стоит отметить что в CSS стили для SVG элементов отличаются от стандартных, полный список стилей поддерживаемых SVG можно посмотреть тут.
SVG ведет себя не как обычное изображение, его нельзя непропорционально трансформировать, задавая ширину и высоту. Объект внутри будет занимать максимальную площадь и центрироваться в контейнере:
Но объект можно трансформировать используя CSS например так:
transform: scale(2, 1);
IE 8 и ниже не поддерживают SVG от слова «совсем» поэтому, если среди пользователей вашего сайта есть эта специфичная аудитория стоит озаботиться проверкой и заменой svg на растровое изображение. Сделать это можно множеством способов, например используя Modernizr добавлять .no-svg класс для body:
if (!Modernizr.svg) {
$(body).addClass(“no-svg”);
}
.no-svg .icon {
width: 100px;
height: 100px;
background-image: url(“icon.png”);
}
Плюсы и минусы такого подхода:
+ можно использовать внешний CSS файл для управления стилями;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.
SVG в IMG или background-image
Пример на codepen.io
Оба способа встраивания чем-то похожи на встраивание при помощи тэга object, например нельзя менять пропорции изменением ширины и высоты контейнера, но имеют больше ограничений.
Подключаемые в SVG внешние стили не будут работать, обратиться к элементам через JS так же не получится. Интерактивные анимации в SVG тоже не сработают. А проблемы с IE 8 и ниже так же остаются.
Но SVG анимации будут работать, в обоих случаях.
В случае с IMG втраивание выглядит как обычная картинка:
<img src="icon.svg">
В случае с background-image как обычный блок:
<div class="icon"></div>
.icon {
background-image: url("icon.svg");
width: 90px;
height: 150px;
}
Так же при помощи background-image можно использовать спрайты, как с png изображениями, а менять размер можно при помощи background-size:
background-size: 90px 150px;
Учитывая что процент людей c экранами device-pixel-ratio которых выше 1 и их устройства не поддерживают svg стремится к нулю(если такие вообще есть), то можно использовать медиа выражения для подключения svg, только для них, а для остальных использовать png версию:
.icon {
background-image: url("icon.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icon {
background-image: url("icon.svg");
}
}
Плюсы и минусы этих подходов:
+ поддерживаются SVG анимации и фильтры;
+ в случае с background-image можно использовать SVG спрайты;
– нельзя менять свойства элементов SVG через CSS или JS;
– не поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.
Inline SVG
Пример на codepen.io
В этом варианте SVG код, получить который можно открыв любой SVG файл текстовым документом, встраивается непосредственно в код страницы.
Несомненно такая конструкция ухудшает читаемость кода, и увеличивает его объем, но открываются новые возможности.
Например имея набор иконок в SVG файле, можно использовать их повторно простой конструкцией вида:
<svg><use x="0" y="0" xlink:href="#some_svg_element_id" /></svg>
где some_svg_element_id id элемента внутри исходного SVG файла.
К отдельно взятому элементу можно, например, применять SVG трансформации:
<svg><use x="0" y="0" xlink:href="#some_svg_element_id" transform="scale(0.5)" /></svg>
Но если внутри исходного SVG к элементу была применена интерактивная анимация, например по клику, как в демо выше, то при дублировании объекта анимация будет срабатывать на всех элементах одновременно.
SVG анимации и фильтры это тема для отдельной статьи, поэтому ограничусь лишь примером SVG фильтра (подробнее о SVG фильтрах), и примером SVG анимации (подробнее о SVG анимациях).
С обесепечением работоспособности для IE 8 и ниже все несколько сложнее, чем в других вариантах. Необходимо добавить дополнительную разметку:
<div class="my-svg-alternate"></div>
if (!Modernizr.svg) {
$(body).addClass(“no-svg”);
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
Плюсы и минусы этого подхода:
+ никакой подгрузки внешних файлов;
+ доступны манипуляции с элементами SVG через CSS и JS;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
+ возможность повторного использования элементов;
– загрязняется код страницы;
– для IE 8 и ниже необходима дополнительная разметка, и замена на растровое изображение.
Заключение
Каждый из способов хорош по своему, и в зависимости от обстоятельств можно использовать любой из них.
Эта статья в первую очередь мой путь по освоению нюансов SVG, и надеюсь многим она будет так же полезна.
P.S. Всем добра и котиков.
Альтернативой является перетаскивание изображения SVG в Chrome, а затем просмотр исходного кода страницы, чтобы увидеть код SVG. Вы можете скопировать это и вставить куда угодно. Вы увидите некоторые цвета заливки в коде, с которыми вы также можете поиграть, если захотите их изменить.
Что такое SVG-код?
Масштабируемая векторная графика (SVG) — это язык разметки на основе XML для описания двумерной векторной графики.
Как мне получить SVG с моего сайта?
14 ответы
- Щелкните правой кнопкой мыши SVG, чтобы проверить его в инструментах разработчика.
- Найдите корень элемент и щелкните правой кнопкой мыши, чтобы «Копировать элемент»
- Загрузите оптимизированный файл SVG и наслаждайтесь.
Как получить код SVG из Figma?
Скопировать как код SVG
Код SVG от Figma значительно улучшился за последний год. Это прекрасно работает с иконками и фигурами. Вы можете просто выбрать любой значок и щелкнуть по нему правой кнопкой мыши, а затем перейти к Копировать как — Копировать как SVG.
Какая программа создает файлы SVG?
Вероятно, самым известным программным обеспечением для создания файлов SVG является Adobe Illustrator. Функция создания файлов SVG из растровых изображений называется «Трассировка изображения». Вы можете получить доступ к панели инструментов, выбрав «Окно» > «Трассировка изображения».
Как мне сделать SVG для Cricut?
Как сделать файлы SVG для Cricut с помощью Illustrator
- Шаг 1: Создайте новый документ. Создайте новый документ размером 12″ x 12″ — размером с коврик для резки Cricut. …
- Шаг 2: Введите цитату. …
- Шаг 3: Измените свой шрифт. …
- Шаг 4: наметьте свои шрифты. …
- Шаг 5: Объединяйтесь. …
- Шаг 6: Создайте составной путь. …
- Шаг 7: Сохраните как SVG.
SVG лучше, чем PNG?
Форматы PNG и SVG поддерживают прозрачность, поэтому оба они отлично подходят для онлайн-логотипов и графики. Стоит отметить, что PNG — один из лучших вариантов прозрачного растрового файла. Если вы работаете с пикселями и прозрачностью, PNG — лучший вариант, чем SVG.
Что такое SVG на Etsy?
SVG — это масштабируемая векторная графика. Это просто причудливый способ сказать, что это изображение, которое вы можете использовать в ЛЮБОМ РАЗМЕРЕ, и оно все равно будет четким и четким.
Как создать файл SVG в Photoshop?
Выполните следующие действия при использовании Adobe Photoshop:
- После того, как вы собрали изображение в Photoshop, нажмите «Файл»> «Экспорт»> «Экспортировать как».
- Щелкните раскрывающееся меню «Формат» в появившемся окне и выберите SVG.
- Выберите «Экспортировать все» и сохраните файл.
Где я могу найти бесплатные файлы SVG для Cricut?
Перечисленные здесь бесплатные веб-сайты SVG предоставляют бесплатные файлы SVG для винила, а также бесплатные клипарты SVG для Cricut. Эти бесплатные изображения SVG можно загрузить непосредственно с упомянутых веб-сайтов.
…
- Cut N Make Crafts. …
- Креативная Фабрика. …
- ЛюбовьSVG. …
- Пакеты дизайна. …
- Бесплатные SVG-дизайны. …
- Ремесленный дом СВГ. …
- Дерево сновидений. …
- Крафты.
В чем разница между тегами SVG и Canvas?
Различия между SVG и Canvas
SVG — это язык для описания 2D-графики в формате XML. Canvas рисует 2D-графику на лету (с помощью JavaScript). SVG основан на XML, что означает, что каждый элемент доступен в SVG DOM.
Должен ли я использовать SVG на своем веб-сайте?
Использование встроенного SVG полезно для производительности веб-сайта, поскольку устраняет необходимость загрузки HTTP-запроса в файл изображения. Поскольку загружать файлы не нужно, это приводит к меньшему времени загрузки страницы. Это ускоряет отображение вашего веб-сайта для посетителей, улучшая пользовательский опыт.
Знаю несколько способов а какой будет правильный что бы потом не было
ни вопросов, ни проблем с той, же интерактивностью (анимацией если
придется анимировать).
#1. object
Лучший способ, чтобы реализовать анимацию, интерактивность, стилизацию, масштабирование это:
<object type="image/svg+xml" data="image.svg" width="200" height="200" ></object>
Этим способом можно добавлять как один файл SVG, так и несколько иконок, объединенных в спрайт. Этой теме посвящен раздел с меткой — svg-спрайт
Вот лучшее, на мой взгляд, руководство по созданию спрайтов
#2. Инлайн добавление кода SVG в HTML
Если иконок немного и код svg компактный, то вполне допустим этот способ для реализации анимации и всего остального:
Ниже код анимации шестеренок с кнопками пуска и остановки вращения.
#3. Использование <iframe> тега.
<iframe src="SvgImg.svg"></iframe>
Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов <iframe>.
Это может быть хорошим методом, если вы хотите полностью отделить SVG
код и скрипт на вашей главной странице. Однако манипуляции SVG
изображениями с главной страницы при помощи JavaScript будут немного
сложнее.
#4. Другие способы добавления SVG, которые делают анимацию, стилизацию невозможной
<img src="image.svg" width="200" height="200" alt="image description">
Можно, как обычно для любого другого изображения задать ширину, высоту.
По соображениям безопасности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE10,Edge, Safari, Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.
Для покраски изображений остается только один способ: фильтры SVG и CSS
Ниже примеры изменения цвета при наведении:
О других способах добавления SVG в HTML здесь
#База знаний
- 5 мар 2021
-
14
Узнаём про векторную графику, добавляем svg-картинки к HTML и творим всякое-разное с их цветом.
Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик
Помимо привычных растровых форматов (JPG, PNG, GIF), в веб-разработке широко применяют векторный — SVG.
SVG (сокращение от Scalable Vector Graphics — «масштабируемая векторная графика») — это вид графики, которую создают с помощью математического описания геометрических примитивов (линий, кругов, эллипсов, прямоугольников, кривых и так далее), которые и образуют все детали будущего изображения.
То есть в этом формате хранится не сама картинка, а инструкции для её построения по точкам и кривым. Они написаны на языке разметки SVG, расширяющем XML.
Прелесть SVG раскрывает масштабирование. Если увеличить растровое изображение сверх 100%-ного размера — проявляется пикселизация: отдельные точки превращаются в одноцветные блоки пикселей, границы областей становятся ступенчатыми, и в целом картинка выглядит негладко, некрасиво.
Если же увеличить векторное изображение — все его детали останутся чёткими, то есть их видимое разрешение не уменьшится. Поэтому svg-картинки отображаются на самых больших разрешениях без потери качества — и просто идеальны для адаптивных сайтов.
У svg-графики есть ещё одно достоинство. Её можно открывать как HTML или CSS и менять в любом редакторе кода, и даже на лету. Подробнее об этом ниже.
И наконец, при прочих равных SVG весит намного меньше растровых изображений.
Их мало. Во-первых, SVG не поддерживается очень старыми браузерами, а во-вторых, не используется для фотографий.
Есть три варианта добавления векторной графики. У каждого свои показания к применению.
Здесь всё так же, как и с растровой графикой:
<img src="img/icon.svg" alt="Иконка лупы">
Минус этого способа в том, что взаимодействовать с внутренними элементами SVG не получится. Файл будет как за стеклом: смотреть можно, а вот трогать нельзя.
Такой вариант подключения используется для контентных svg-изображений, которые менять внешне не требуется (вроде графиков, схем и логотипов).
Как и в случае с растровой графикой, SVG можно подключать через css-свойство background:
.icon {
background-image: url("../img/icon.svg");
}
Минус тут тот же самый, что и у предыдущего способа. Этот случай подходит для декоративных изображений (фоны, иконки и прочая мелочь), которые тоже внешне менять не нужно.
Вставлять svg-код прямо в html-файл — это третий способ. И для нас самый интересный. Он позволяет не просто отображать готовую графику, но и менять её (толщину элементов, заливку, обводку и так далее).
<svg>
<rect x="10" y="10" width="100" height="100" />
</svg>
Такая вставка выручает, когда при взаимодействии с картинкой нужно её визуально модифицировать — например, перекрасить svg-иконку при наведении на неё курсора.
Напрямую на html-страницу (в теге <svg>) вставляют как контентные, так и декоративные изображения, а минус тут в том, что такие картинки не кешируются отдельно от страницы.
Верстальщику часто приходится обыгрывать реакцию иконки при наведении на неё мышки. В случае с svg-картинками можно просто менять их цвет.
Научимся это делать на примере иконки «ВКонтакте»:
Логотип сложный, поэтому svg-код, который его математически описывает, довольно длинный. Посмотрим, как это выглядит в HTML:
<a href="https://vk.com/" class=”vk”>
<svg id="Bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512"
xmlns="http://www.w3.org/2000/svg">
<path d="m19.915 13.028c-.388-.49-.277-.708 0-1.146.005-.005 3.208-4.431 3.538-5.932l.002-.001c.164-.547 0-.949-.793-.949h-2.624c-.668 0-.976.345-1.141.731 0 0-1.336 3.198-3.226 5.271-.61.599-.892.791-1.225.791-.164 0-.419-.192-.419-.739v-5.105c0-.656-.187-.949-.74-.949h-4.126c-.419
0-.668.306-.668.591 0 .622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892
0-3.057-3.211-4.34-6.886-.259-.713-.512-1.001-1.185-1.001h-2.625c-.749 0-.9.345-.9.731
0 .682.892 4.073 4.148 8.553 2.17 3.058 5.226 4.715 8.006 4.715 1.671 0 1.875-.368 1.875-1.001
0-2.922-.151-3.198.686-3.198.388 0 1.056.192 2.616 1.667 1.783 1.749 2.076 2.532 3.074
2.532h2.624c.748 0 1.127-.368.909-1.094-.499-1.527-3.871-4.668-4.023-4.878z" />
</svg>
</a>
Да, это не ошибка, так в HTML вставляют небольшие svg-картинки. Для больших целесообразнее подключать отдельный файл, который будет кэшироваться браузером. Здесь мы не будем в это углубляться.
Обратите внимание на тег <path> (в переводе с английского «путь»). Он позволяет задать любую фигуру компактной строкой — описанием пути от начальной точки до конечной через промежуточные координаты.
Строка с данными задаётся атрибутом d тега <path>. Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).
Теперь мы запросто добавим к ссылочному тегу <a> псевдокласс :hover и зададим через него новый цвет svg-изображения. Это делается в CSS с помощью свойства fill («заливка»).
.vk:hover svg {
fill: red;
}
Проверьте, как это работает: наведите курсор на иконку — например, в песочнице Codepen.
И ещё один нюанс. Заливка может быть задана атрибутом у <svg> (fill=»#000″). Тогда работать с ней через CSS не получится, так как css-стили не могут перебить правила, заданные атрибутами. В этом случае стоит просто вручную удалить этот атрибут у <svg>.
Итак, мы научились менять цвет svg-иконки через свойство fill, вставляя её напрямую в HTML. Заметьте, что такое нельзя сделать ни с помощью тега <img>, ни через свойство background.
Рассмотрим более сложную ситуацию — когда иконка состоит из нескольких простых svg-изображений. Например, примитивная лупа из прямоугольника и круга:
Код для кнопки с иконкой лупы будет таким:
<button class="btn-reset search">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="19.5138" y="18.5495" width="8" height="2" transform="rotate(45 19.5138 18.5495)"
/>
<circle cx="11.5" cy="11.5" r="10.5" stroke-width="2" />
</svg>
</button>
Проблема здесь в том, что внутри svg-иконки два разных тега:
- <rect> (прямоугольник — ручка лупы)
- и <circle> (круг — ободок лупы).
Сделать как в примере с «ВКонтакте» не получится, потому что прямоугольник в нашем случае имеет заливку (fill), а круг — обводку (stroke).
Чтобы при наведении менять цвет обоих, используем два селектора. Один будет менять заливку у палочки, второй — обводку у круга:
.search svg rect {
fill: #000;
}
.search svg circle {
stroke: #000;
}
.search:hover svg rect {
fill: yellow;
}
.search:hover svg circle {
stroke: yellow;
}
Как видите, при наведении на кнопку мы сперва нашли rect, потом circle, то есть разделили логику.
Делить код таким образом приходится нечасто, но помнить об этой возможности полезно.
Например, поучитесь работать с фоновыми картинками через CSS.
Научитесь: Веб-вёрстка
Узнать больше
HTML CSS JS
Как вставить svg картинку на свой сайт
Дата размещения статьи 08/06/2019 👁16780
Как вставить svg картинку на свой сайт
Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS.
Вставка SVG в HTML
SVG через тег img
SVG data URI / base64
Вставка SVG через CSS
SVG через свойство background
Вставка SVG в HTML
SVG через тег img
<img src="myImage.svg" alt="myImage">Inline SVG в HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" style="max-width: 80px;">
<g>
<path d="M27,8c-9.374,0-17,7.626-17,17c0,7.112,4.391,13.412,11,15.9V50c0,0.553,0.447,1,1,1h1v2c0,0.553,0.447,1,1,1h6
c0.553,0,1-0.447,1-1v-2h1c0.553,0,1-0.447,1-1v-9.1c6.609-2.488,11-8.788,11-15.9C44,15.626,36.374,8,27,8z M30,49
c-0.553,0-1,0.447-1,1v2h-4v-2c0-0.553-0.447-1-1-1h-1v-5h8v5H30z M31.688,39.242C31.277,39.377,31,39.761,31,40.192V42h-8v-1.808
c0-0.432-0.277-0.815-0.688-0.95C16.145,37.214,12,31.49,12,25c0-8.271,6.729-15,15-15s15,6.729,15,15
C42,31.49,37.855,37.214,31.688,39.242z" />
<path d="M27,6c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v4C26,5.553,26.447,6,27,6z" />
<path d="M51,24h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4c0.553,0,1-0.447,1-1S51.553,24,51,24z" />
<path d="M7,24H3c-0.553,0-1,0.447-1,1s0.447,1,1,1h4c0.553,0,1-0.447,1-1S7.553,24,7,24z" />
<path d="M43.264,7.322l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S43.654,6.932,43.264,7.322z" />
<path d="M12.15,38.436l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S12.541,38.045,12.15,38.436z" />
<path d="M41.85,38.436c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l2.828,2.828c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L41.85,38.436z" />
<path d="M12.15,11.564c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414l-2.828-2.828
c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L12.15,11.564z" />
<path d="M27,13c-6.617,0-12,5.383-12,12c0,0.553,0.447,1,1,1s1-0.447,1-1c0-5.514,4.486-10,10-10c0.553,0,1-0.447,1-1
S27.553,13,27,13z" />
</g>
</svg>SVG data URI / base64
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh2NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" style="max-width:80px;" />Закодированное SVG изображение будет начинаться с:
data: image/svg+xml; utf8; base64,SVG через тег object
<object type="image/svg+xml" data="myImage.svg" width="80"></object>SVG через тег embed
<embed src="myImage.svg" width="80"></embed>Вставка SVG в CSS через свойство background
SVG через свойство background
.svg-background {
width: 80px;
height: 80px;
background: url("idea.svg") no-repeat center;
}Inline SVG CSS background
.svg-inline-css {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M27 8c-9.374 0-17 7.626-17 17 0 7.112 4.391 13.412 11 15.9V50c0 .553.447 1 1 1h1v2c0 .553.447 1 1 1h6c.553 0 1-.447 1-1v-2h1c.553 0 1-.447 1-1v-9.1c6.609-2.488 11-8.788 11-15.9 0-9.374-7.626-17-17-17zm3 41c-.553 0-1 .447-1 1v2h-4v-2c0-.553-.447-1-1-1h-1v-5h8v5h-1zm1.688-9.758c-.411.135-.688.519-.688.95V42h-8v-1.808c0-.432-.277-.815-.688-.95C16.145 37.214 12 31.49 12 25c0-8.271 6.729-15 15-15s15 6.729 15 15c0 6.49-4.145 12.214-10.312 14.242zM27 6c.553 0 1-.447 1-1V1c0-.553-.447-1-1-1s-1 .447-1 1v4c0 .553.447 1 1 1zm24 18h-4c-.553 0-1 .447-1 1s.447 1 1 1h4c.553 0 1-.447 1-1s-.447-1-1-1zM7 24H3c-.553 0-1 .447-1 1s.447 1 1 1h4c.553 0 1-.447 1-1s-.447-1-1-1zM43.264 7.322l-2.828 2.828c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293s.512-.098.707-.293l2.828-2.828c.391-.391.391-1.023 0-1.414s-1.024-.39-1.414 0zM12.15 38.436l-2.828 2.828c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293s.512-.098.707-.293l2.828-2.828c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0zm29.7 0c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l2.828 2.828c.195.195.451.293.707.293s.512-.098.707-.293c.391-.391.391-1.023 0-1.414l-2.828-2.828zm-29.7-26.872c.195.195.451.293.707.293s.512-.098.707-.293c.391-.391.391-1.023 0-1.414l-2.828-2.828c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l2.828 2.828z'/%3E%3Cpath d='M27 13c-6.617 0-12 5.383-12 12 0 .553.447 1 1 1s1-.447 1-1c0-5.514 4.486-10 10-10 .553 0 1-.447 1-1s-.447-1-1-1z'/%3E%3C/svg%3E") no-repeat center;
width: 80px; height: 80px; background-size: 80px;
}Свойство background будет начинаться с
data: image/svg+xml, %3CsvgТакже необходимо кодировать символы, например, с помощью этого инструмента.
SVG data URI / base64
.svg-base64-CSS {
background-image: url("data:image/svg+xml; utf8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh2NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
width: 80px;
height: 80px;
background-size: 80px;
}Будет начинаться с
data: image/svg+xml; utf8; base64,Полезные ссылки:
- Как изменить цвет svg.
- Анимация svg.
Вывод произвольных полей ACF Регистрация и авторизация в php с JSON Web Token
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки,
то можете следить за выходом новых статей в Telegram.
- JavaScript: Работа с Массивами
- Наличие Динамически Добавленного Элемента
- Стилизация Input File
- Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
- Стилизация Скролла
- События Формы