Как найти svg картинку

Время на прочтение
6 мин

Количество просмотров 217K

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

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

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

будущем

настоящем.
Для любопытных сразу приведу сводную таблицу:

	Иконочный шрифт	IMG, background-image	Object	Inline
CSS Манипуляции	Частично1	Нет	Частично2	Да
JS манипуляции	Частично1	Нет	Да	Да
SVG анимации	Нет	Да	Да	Да
Интерактивные SVG анимации	Нет	Нет	Да	Да

¹ Можно менять цвет, размер, выравнивание и прочее стили обычного текста
² Стили должны быть прописаны или в самом 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. Всем добра и котиков.

HTML CSS JS

Как вставить svg картинку на свой сайт

Дата размещения статьи 08/06/2019 👁16780

<img src="myImage.svg" alt="myImage">

<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>

<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh2NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" style="max-width:80px;" />

data: image/svg+xml; utf8; base64,

<object type="image/svg+xml" data="myImage.svg" width="80"></object>

<embed src="myImage.svg" width="80"></embed>

.svg-background {
    width: 80px;
    height: 80px;
    background: url("idea.svg") no-repeat center;
}

.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;
}

data: image/svg+xml, %3Csvg

.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,

Как выполнить обратный поиск изображений на веб-сайте

1. Щелкните внутри области перетаскивания файла, чтобы выбрать и загрузить файл изображения поиска, или перетащите файл туда.
2. Введите веб-сайт поиска изображений для первого поиска или введите идентификатор контекста поиска для следующего поиска на том же сайте.
3. Нажмите кнопку «Пуск», чтобы начать обратный поиск.
4. Сохраните идентификатор контекста поиска, чтобы получить доступ к результатам поиска изображения позже.
5. После запуска поиска на странице появляется индикатор, показывающий его ход выполнения. Вы можете либо дождаться завершения поиска, либо ввести свой адрес электронной почты, чтобы получить уведомление о завершении позже, и закрыть страницу.
6. Обратите внимание, что результаты поиска изображений будут удалены с наших серверов через 24 часа, и страница результатов будет недоступна по истечении этого периода времени.

Отредактировано: 15 Сентября 2019

Сервисы для работы с svg:

• Найти svg иконки можно на www.flaticon.com.
• Оптимизатор для svg.
• iconizr.com позволяет получить архив с svg спрайтами и data:image/svg+xml кодом для применения. 
• Url-encoder для svg. Выдает код который можно вставлять в css.
• Еще один url-encoder для svg.

Для поддержки старых браузеров можно использовать скрипт svg4everybody.

SVG создаются в векторных программах вроде Adobe Illustrator.

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

SVG спрайты

В использовании svg, завоевала популярность технология svg-спрайтов, в которой коды множества svg картинок объединяются в 1, а после подключаются на странице, с помощью якоря.

Примерный код внутри спрайта:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="icon-name" viewBox="214.7 0 182.6 792">
     <!-- <path> код svg изображения -->  
  </symbol>
  
  <symbol id="icon-name-2" viewBox="0 26 100 48">
     <!-- <path> код svg изображения -->  
  </symbol>
  
</svg>

Примерный код для подключения картинки:

<svg>
  <use xlink:href="img/sprite.svg#icon-name"></use>
</svg>

Стоит отметить, что есть еще структура svg спрайта с применением тегов <g> внутри контейнера <defs>, — такой способ считается устаревшим, т.к. при этом параметры viewBox для картинки выносились в html код. Теги <symbol> же позволяют задавать себе свой viewBox.

Создавать SVG спрайты можно как в ручную, так и используя gulp / grunt.

SVG в CSS стилях

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

background: url(image.svg);

Для поддержки старых браузеров можно воспользоваться свойствами Modernizr, который, в случае если браузер не поддерживает svg, добавит класс .no-svg:

.image {
  background: url(image.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .image {
  background-image: url(image.png);
}

или поступить следующим образом (в случае отсутствия поддержки svg, браузер проигнорирует правило, воспользовавшись более ранним правилом):

.image {
  background: url(image.png);
  background-image: url(image.svg), none;
}

Так же можно вставить svg в css с помощью data:image/svg+xml, переведя его в формат base64, либо зашифровав в формат url с помощью url-encoder (не забыв перед этим оптимизировать):

.icon.wood{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Ccircle cx='398.86' cy='399.96' r='49.79' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='17'/%3E%3Ccircle cx='398.92' cy='396.72' r='230.83' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='17'/%3E%3Ccircle cx='398.92' cy='396.72' r='230.83' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='17'/%3E%3Cpath d='M360.3 169.11c15.39-12.7-26.53-34.81-26.53-34.81l48-1.19L409.68 166M279.85 198.43c9.79-17.39-37.27-22.94-37.27-22.94l44.35-18.37 37.87 20.62M215.33 254.72c2.88-19.75-43-8-43-8l34.77-33.09 42.75 5.62M175.37 330.46c-4.41-19.46-43 8-43 8l20.55-43.38L194.81 285M165.33 415.5c-11.12-16.57-37.26 23-37.26 23l3.57-47.87 35.47-24.53M186.54 498.46C170.21 487 160 533.28 160 533.28l-13.89-45.95 24.27-35.64M236.18 568.23c-19.36-4.82-12.21 42-12.21 42l-29.49-37.88 9.82-42M307.59 615.48c-19.8 2.47 3.72 43.61 3.72 43.61l-41.14-24.74-5.94-42.71M391.22 633.89c-17.59 9.42 19.16 39.35 19.16 39.35L363.1 665l-20.9-37.72M475.87 621c-13 15.12 32 29.82 32 29.82l-47.1 9.28-33.04-27.7M550.21 578.49c-6.71 18.79 40.61 16.31 40.61 16.31l-40.61 25.6-40.81-13.93M604.3 512.1c.5 19.95 43.76.61 43.76.61l-28.69 38.49-43.09 1.68M630.88 430.7c7.64 18.43 41.05-15.17 41.05-15.17L659 461.76l-39.6 17.07M626.41 345.19c13.76 14.45 32.85-28.92 32.85-28.92l4.57 47.78L633 394.22M591.48 267c18 8.54 20.25-38.8 20.25-38.8l21.45 42.94-17.9 39.23M530.77 206.62c19.9 1.48 4.93-43.48 4.93-43.48l35.46 32.35-2.59 43M452.4 172.12c19.1-5.78-11-42.35-11-42.35l44.72 17.43 13.07 41.09' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='14'/%3E%3C/svg%3E");
  ;}

Подробнее о преобразовании svg в формат data:image/svg+xml 

SVG vs Font

Какие иконки использовать, svg или шрифтовые? — это один из множества спорных вопросов, вокруг которого гуляет множество противоречивых мнений. Для себя я выбрала svg, ниже представлены доводы, почему svg мне кажется более правильным выбором:

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

2. Чёрные квадратики и крестики в Opera Mini.

3. У браузеров встречаются проблемы с отображением шрифтов, например, недавно, в Chrome Canary и Beta появилась такая ошибка — после определённого периода неактивности страницы шрифт сбрасывается и заменяется на системный. После того как произошел сброс шрифта, текст отображается в Georgia, и, если шрифт при этом отвечает за отображение иконок, страница заполняется мусором из чёрных квадратиков, после чего пользоваться ей нормально становится невозможно.

4. Браузеры могут отрисовывать шрифты по разному, и применять свои методы экранного сглаживания шрифта (разная плотность на разных настройках в одной ОС и на разных ОС, непопадание линий в пикселов) например, в Firefox шрифты немного жирнее чем в других популярных браузерах.

5. Не всегда есть возможность использовать генерируемый контент. Для использования шрифтовых иконок необходимо использовать свойство content, а если элемент уже использует псевдоэлементы :before и :after, тогда приходиться воротить костыли, ктому же, и не все элементы поддерживают генерируемое содержимое.

6. Шрифтовые иконки ограничиваются только одним цветом.

7. SVG позволяет использовать иконки с анимацией.

Остальные варианты подключения SVG

На случай если надо использовать быстрое единичное подключение svg картинки, можно использовать 1 из нижеперечисленных вариантов. Каждый из этих вариантов имеет те или иные проблемы совместимости.

Можно встроить код изображения прямо в html.

Можно использовать тег img:

<img src="icon.svg" alt="Icon">

Можно использовать элемент object:

<object data="image.svg" type="image/svg+xml" />

или iframe: 

<iframe src="image.svg"></iframe>

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

На чтение 3 мин Просмотров 31.2к. Опубликовано 17.04.2021

Содержание

1. В предыдущих сериях…
2. Подключение через тег <img> в html
3. Подключение фона в .css
4. Описываем svg-графику inline
5. Заключение

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

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

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

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

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

HTML

<h2>Иконки</h2>
<img src="./img/calendar.svg" alt="Calendar" width="102">

Получаем результат.

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

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

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

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

HTML

<h2>Фоновые изображения</h2>
<div class="block-bg"></div>

CSS

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

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

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

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

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

HTML

<svg class="youtube-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
   <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>

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

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

CSS

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

.youtube-icon:hover {
    fill: red;
}

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

Заключение

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