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

Как размещать svg в html

я новичок изучаю веб своими силами и у меня вылезло несколько вопросов по поводу использования svg на странице html.

1. Как правильно вставлять svg в html?

Знаю несколько способов а какой будет правильный что бы потом не было ни вопросов, ни проблем с той, же интерактивностью (анимацией если придется анимировать).
Знаю такие способы как:

1. Вставить svg инлайново(просто вставить весь код svg в html).
2. Если иконок больше одной, то отдельно и вставлять их в html где они используются.
3. Вставлять с помощью object, iframe, embed.
4. Собрать все иконки в спрайт и вытаскивать их с помощью use.

2. Где хранить спрайт?

В html или отдельным файлом спрайтом. Умею вытаскивать иконки из спрайта, если он весь лежит в html или даже если он лежит отдельным файлом.svg где-нибудь в картинках. Уметь то умею но как делать это. А если быть точнее, то где хранить спрайт чтобы не было проблем с кэшированием или какие там проблемы еще бывают…

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

Как правильно вставлять SVG

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

Я вам больше скажу: SVG — это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Стилями и скриптами, Карл! Вот вам и простая картинка.

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

Первый и самый простой — элемент <img> прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

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

Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с <img> : за стеклом, но внутри что-то работает.

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

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

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

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

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

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

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

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

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

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

Добавление векторной графики в веб-документ

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

Навыки:	Знание основ HTML и умение добавлять изображение в веб-документ.
Цель:	Изучить как встроить SVG (векторное) изображение на веб-страницу.

Примечание: Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.

Что такое векторная графика?

В веб-разработке вы будете сталкиваться с двумя типами изображений — растровым и векторным:

• Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
• Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.SVG формат позволяет нам создавать векторную графику для использования в веб-документах.

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое — SVG.

Различия становятся заметны, когда вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны «кирпичики». Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним.

Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: vector-versus-raster.html !

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

Что такое SVG?

SVG это язык на базе XML для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, вы можете использовать элементы для создания простых фигур, таких как <circle> (круг) и <rect> (прямоугольник). Более сложные SVG элементы включают <feColorMatrix> (en-US) (разложение цвета с использованием матрицы), <animate> (анимация частей вашего векторного изображения) и <mask> (en-US) (применение маски к изображению.)

В качестве простого примера, следующий код создаёт круг и прямоугольник:

В результате получается следующее:

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

Дополнительные преимущества SVG:

• Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает SEO).
• SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.

Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:

• SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.
• SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.
• не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.

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

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

Добавление SVG на страницы

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

Быстрый путь: <img>

Чтобы встроить SVG используя элемент <img> , вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите Изображения в HTML.

Плюсы

• Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте alt
• Вы можете легко превратить изображение в гиперссылку, поместив <image> в элемент <a> .

Минусы

• Вы не можете изменять изображение с помощью JavaScript.
• Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
• Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например :focus ).

Устранение неполадок и кросс-браузерная поддержка

Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в src атрибуте и использовать srcset атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами — старые же браузеры будут загружать PNG:

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

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

Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.

Как включить SVG в ваш HTML код

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:

Плюсы

• Вставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
• Вы можете присваивать class -ы и id элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой атрибут представления SVG как свойство CSS.
• SVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как :focus ) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
• Вы можете разметить SVG как гиперссылку, обернув в элемент <a> .

Минусы

• Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
• Дополнительный SVG код увеличивает размер вашего HTML файла.
• Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.
• Вы можете добавить альтернативный вариант в элементе <foreignObject> , но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).

Как встраивать SVG при помощи <iframe>

Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <iframe> выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.

Вот краткий обзор:

Это — определённо не самый лучший метод для выбора:

Минусы

• Как вы можете видеть, у iframe -ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают iframe -ы.
• Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.

Активное изучение: поиграйте с SVG

В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.

Если Вы где-то застряли и ваш код не работает, вы всегда можете начать сначала, нажав кнопку Reset.

Заключение

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

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

How to Design, Code, and Animate SVGs

You can think of Scalable Vector Graphics (SVG’s) as responsive graphics. SVG is an XML-based format that allows you to create an image by using defined tags and attributes. Your code will render an image that you can edit right in your code editor.

Here’s a sample SVG. If you look at its code, you’ll notice that it’s made up of tags and attributes, just like an HTML document. The whole thing is contained inside <svg> tag. First, there’s a <rect> tag with black strokes and white fill. And inside that, there’s an ellipse (almost a circle, but notice the ry and rx attributes) which is filled with red color.

We can use SVG on the web in two ways. We can use the SVG files as the src attribute of <img> tags. So, you can have <img src=”japan.svg”> like you would do with PNGs and JPEGs.

But, the more interesting case (in case you have noticed that the tags have an id attribute like HTML) is that we can directly paste the source of the SVG in a <div> inside our HTML. We can then style these divs like individual building blocks — or even groups of building blocks — the way we want. We can apply CSS, animations, or even add interactivity using JavaScript. This is what makes SVGs one of the most versatile and hottest element right now in HTML.

SVGs are infinitely scalable, responsive, have smaller file size, are future-proof for next-generation bazillion-pixel dense screens, and can be styled, animated and interacted with using known web technologies — namely CSS and JavaScript.

Notice that all these things were previously possible only with a Flash embed — which required a flash player and lots of specialized work. And there’s no love going around for Flash these days.

Vector vs Raster images

Raster images are made up of pixels to form a complete image. JPEGs, GIFs and PNGs are common raster image types. Almost all of the photos found on the web are raster images.

Raster images consist of a fixed number of pixels, so resizing them without effecting their resolution is not possible. You may have noticed that resizing most images gives them a grainy, and blurry look. That’s because of their fixed pixel count.

Here’s what happens when you zoom in on a raster image:

Vector images, on the other hand, are flexible and resolution-independent. They are constructed using geometric shapes — lines, rectangles, curves — or a sequence of commands. You can edit their attributes, such as color, fill, and outline.

One common use for vector images is icons and small icon animations. These will appear crisp, even on the highest density displays such as upcoming 4k smartphones.

Here’s what happens when you zoom in on a vector image:

SVG tags

The <svg> tag embeds an SVG document inside the current document, HTML for instance. The tag has its own x and y coordinates, height and width, and its own unique id.

Here’s what an <svg> tag might look like:

The <g> tag groups the elements together, and acts like a container for related graphic elements. A <g> element can even contain other <g> elements nested within it.

Here’s an example of a <g> tag:

<rect>

The <rect> element is an SVG basic shape representing a rectangle. The element can have various attributes, like coordinates, height, width, fill color, stroke color, and sharp or rounded corners.

Here’s an example of a <rect> tag:

The <use> element allows you to clone and reuse the graphical SVG elements including other elements like <g> <rect> as well as other <use> elements.

Here’s an example of a <use> tag:

<path>

The <path> element defines a path of coordinates for a shape. The code for path tag might seem cryptic, but don’t be intimidated. The following example code can be read like this:
1. “M150 o” — Move to (150,0)

2.”L75 200" — Draw a line to (75,200) from last position (which was (150,0)

3. “L255 200” — Draw a line to (225,200) from last position (which was (75,200)

4. “Z” — Close the loop (draw to starting point)

You probably don’t need to learn this since the code for path can be generated in any SVG editor, but it’s cool to know.

Here’s an example of a <path> tag:

<symbol>

Finally, the <symbol> element defines symbols that are reusable. These symbols can only be rendered when called by the <use> element.

Here’s an example of a <symbol> tag:

Creating SVGs

There are plenty of SVG editors available, like Adobe Illustrator, and Inkscape, which is free and open source. Since SVG files are plain-text XML, you could also hand-code one in a pinch.

For this example I’ll use a simple online editor where you can design SVGs without having to install anything.

1. First create a circle

2. Next add more circles and save the source code

CSS3 animations

SVGs can be animated by adding an id or a class to the SVG path in the code and then styling it in CSS3 like any other document. Below is an example of how SVGs can be animated.

CSS3 animation offers a variety of animation types that you can chose from. Line animation is another cool attribute of SVG.

For this next example, I wrote the text “Hi, I am Surbhi” using pen in the editor. Then I used CSS3 keyframes again to animate the stroke.

Notice that each path has a unique id. That is because the delay in the animation is important when animating a stroke with more than one word.

The <animate> tag animations

<animate> is an animation tag built into the SVG element itself. It defines how the attribute of an element changes from the initial value to the end value in the specified animation duration. This is used to animate properties that cannot be animated by CSS alone.

The common elements of the animate tag are color, motion, and transform.

The animate tag is nested inside the shape tag of the object that has to be animated. It does not work on the path coordinates, but only inside the object tags. Notice the additive attribute. It signifies that the animations do not override one another but instead work together at the same time.

Here’s an example of animating an SVG using the HTML5 animate tag:

JavaScript based animations and interactivity

Since SVG is just a document with tags, we can also use JavaScript to interact with individual elements of the SVGs by getting hold of their selectors (id or class).

Apart from vanilla JS, there are various JavaScript libraries available for animating and interacting with SVGs like Vivus.js, Snap.svg, RaphaelJS, and Velocity.js.

In the following example, I have used the Vivus.js library along with jQuery to achieve a line stroke animation.

Why not use SVGs for all images?

SVGs are mostly suited for images that can be constructed with few geometrical shapes and formulas. Though, in principle, you can convert anything like your photograph to SVG, the size of the image would be several megabytes, thus defeating the space-saving purpose of using SVGs. You’re better off using SVGs for icons, logos, and small animations.