Как найти svg на сайте

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

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

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

Сейчас мы рассмотрим методы встраивания 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

Введение

Мы живём в век пикселей. Как дизайнеры и разработчики в вебе, пиксели могут быть нам как друзьями, так и врагами. Мы хотим, чтобы всё выглядело красиво и чётко для всех, кто пользуется нашими сайтами, и нам необходимо уменьшать размеры файлов для улучшения производительности. В общем-то, есть только один способ для иконок, логотипов и иллюстраций — это SVG. Масштабируемая векторная графика (Scalable Vector Graphics) позволяет изображению выглядеть чётко на мониторе с любым разрешением, при этом иметь очень маленький размер файла и легко поддаваться редактированию и изменениям.

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

Scalable Vector Graphics это разметка, основанная на XML, который содержит двумерные векторы. Векторами могут быть простые геометрические формы, сложные контуры, да и всё то же самое, что можно сделать в Иллюстраторе. Этот формат изображений имеет намного больше общего с веб-страницей, чем тот же JPEG. SVG намного мощнее — им легко можно управлять при помощи кода (в текстовом редакторе или с помощью CSS / JS).

Подготовка и оптимизация

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
  <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE "image/svg+xml" 
                                    "text/css" 
                                    "text/html" 
                                    "text/javascript"
                                    ... etc
  </IfModule>
</IfModule>

Спрайты

Медиавыражения

Запасной вариант

К слову о запасных вариантах. SVG поддерживается во всех современных браузерах, но если ещё требуется поддержка IE8, то нужно использовать запасные варианты, скорее всего, в виде PNG. Я не буду останавливаться на этом хотя бы потому, что уже пора прекратить пользоваться IE8 ¯_(ツ)_/¯. В любом случае, если вам всё же нужны запасные варианты, всё усложняется довольно быстро, как и большинство вещей с SVG. Советую прочитать исчерпывающую статью Amelia Bellamy-Royds на CSS-Tricks.

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

• Зачем использовать SVG
  • Масштабирование изображения с сохранением качества pixel perfect
  • Возможность модификации
  • Небольшой вес файлов
  • Доступность
• Использование SVG: распространенные практики
  • Логотипы и иконки в SVG
  • Инфографика
  • Визуальные эффекты
  • Анимация
  • Иллюстрации и рисунки
• Интерфейсы и приложения
  • Тег img
  • Использование SVG в CSS
  • Инлайн SVG в HTML
• Использование SVG в формате кода
  • Рисуем с помощью SVG: круг
  • Рисуем с помощью SVG: прямоугольник
  • Рисуем с помощью SVG: линия
  • Рисуем с помощью SVG: звезда
  • Рисуем с помощью SVG: пути
  • Рисуем с помощью SVG: кривые
• Как работать с текстом с помощью SVG
  • Как управлять свойствами шрифта с помощью SVG
• Как использовать CSS в SVG

Зачем использовать SVG

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

Масштабирование изображения с сохранением качества pixel perfect

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

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

Сравнение качества растровых и векторных изображений

Возможность модификации

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

Небольшой вес файлов

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

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

Доступность

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

Использование SVG: распространенные практики

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

Логотипы и иконки в SVG

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

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

Инфографика

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

Визуальные эффекты

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

Анимация

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

Иллюстрации и рисунки

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

Интерфейсы и приложения

SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт с помощью HTML и CSS.

Изучайте вёрстку на Хекслете
В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.

Тег img

Первый способ — URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.

<img src="circle.svg" alt="a red circle" height="100px" width="100px"/>

Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ — возможность дополнительно использовать тег <a>. С его помощью к изображению можно добавить гиперссылку.

Если вы добавляете изображение через тег img, его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.

Использование SVG в CSS

Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах.

.element { background-image: url(/images/image.svg); }

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

Инлайн SVG в HTML

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

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"stroke="black" 
  stroke-width="4"fill="red"/>
</svg>

Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах <svg> можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.

Использование SVG в формате кода

В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.

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

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black"/>
  <circle cx="150" cy="100" r="90" fill="blue"/>
</svg>

Рисуем с помощью SVG: круг

Чтобы нарисовать круг, необходимо указать три атрибута:

• Радиус круга — r.
• Позицию центра круга по оси x — cx.
• Позицию центра круга по оси y — cy.

При этом важно, что цвет линии и фона можно указывать инлайн или отдельно.

<svg width="200" height="250">
  <circle cx="400" cy="300" r="200" stroke="red" fill="transparent" stroke-width="5"/>
</svg>

Круг нарисован с использованием SVG-формата

Рисуем с помощью SVG: прямоугольник

Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.

<rect x="100" y="100" width="400" height="300" stroke="black" fill="transparent" stroke-width="5"/>

Прямоугольник нарисован с помощью SVG

Рисуем с помощью SVG: линия

Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии.

<line x1="100" x2="500" y1="110" y2="450" stroke="orange" stroke-width="5"/>

Прямая линия

Рисуем с помощью SVG: звезда

С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры.

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/>

Сложный многоугольник в формате SVG

Рисуем с помощью SVG: пути

С помощью элемента можно рисовать ломаные кривые — это позволяет создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.

Вот пример использования path:

<path d="M 10,10 L 250,250" fill=“transparent" stroke="black"/>

А это пример нескольких линий, созданных с помощью path:

<path d="M 10,10 L 250,250 30,100 150, 50" fill="transparent" stroke="black"/>

Пути (path) в SVG

Рисуем с помощью SVG: кривые

Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.

<path d="M50 50 C 50 50, 150 100, 250 50" stroke="black" fill="transparent"/>

С помощью команды S можно объединять кривые и создавать сложные формы.

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

Кривая линия

Читайте также
Когда роботы заменят верстальщиков на рынке труда: большая обзорная статья о профессии с комментариями экспертов.

Как работать с текстом с помощью SVG

Формат SVG позволяет работать с текстом. Для этого применяется тег <text>:

<text x="10" y="10">This is text.</text>

Обычный текст создан с помощью SVG

С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.

Как управлять свойствами шрифта с помощью SVG

SVG позволяет управлять следующими свойствами шрифта:

• font-family
• font-style
• font-weight
• font-variant
• font-stretch
• font-size
• font-size-adjust
• kerning
• letter-spacing
• word-spacing
• text-decoration

С помощью тега <tspan> можно выбрать одно или несколько слов в тексте и изменить их свойства.

<text>
  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>

Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.

<text x="350" y="50" style="fill: none; stroke: #000000; font-size: 48px; direction: rtl; unicode-bidi: bidi-override;">This is text</text>

Перевёрнутый текст

С помощью <textPath> можно связывать текст с путями. Это делается с помощью атрибута xlink:href:

<path id="my_path" d="M 40,40 C 200,100 10,100 520,200" 
fill="transparent" />
<text>
  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
    This Text is Curved
  </textPath>
</text>

Как использовать CSS в SVG

Код CSS можно указывать инлайн в коде SVG:

<svg width="350" height="60">
 <text>
   This is <tspan font-weight="bold" fill="red">bold and red</tspan>
 </text>
 <style><![CDATA[
  text{
 dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]></style>
</svg>

Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.

<svg class="logo" width="400" height="400" viewBox="0 0 400 400">
 <rect class="box" x="0" y="0" width="400" height="400" fill="#56A0D3"/>
</svg>

В CSS можно работать с таким классом:

.box { fill: red; }

Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением редакции Хекслета.

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

<img src="img/icon.svg" alt="Иконка лупы">

.icon {
      background-image: url("../img/icon.svg");
    }

<svg>
    <rect x="10" y="10" width="100" height="100" />
</svg>

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

.vk:hover svg {
      fill: red;
    }

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

.search svg rect {
  fill: #000;
}
 
.search svg circle {
  stroke: #000;
}
 
.search:hover svg rect {
  fill: yellow;
}
 
.search:hover svg circle {
  stroke: yellow;
}

Научитесь: Веб-вёрстка
Узнать больше