How to embed svg

How to embed SVG correctly?

SVG is a vector graphics format , literally: scalable vector graphics. Mwg? Svg! In vector formats, it is not the image itself that is stored, but instructions for constructing it by points and curves.

In raster formats, information about a specific number of image points is tightly packed into a binary brick. It is useless to look into it and change it only in the editors of graphics.

 PNG IH aV PLTE       0  IDAcZ d      W= S 3 o;   ]P    IEND B` ~ 

The SVG format can also be created and changed in graphics editors, such as Illustrator, Sketch, or Inkscape. But it is also text, which means it can be opened as HTML or CSS in any code editor.

 <svg width="20"> <rect fill="#fc0" width="20" height="20"/> <line stroke="black" x1="0" y1="0" x2="20" y2="20"/> </svg> 

I'll tell you more: SVG is like a separate HTML page. When you insert a SVG, you actually insert not just a picture, but a whole page. With its coordinate system, viewport, styles, scripts and amazing features.

Styles and scripts, Karl! Here you have a simple picture.

If you look at SVG as a separate page, it becomes clearer which method of insertion you need. There are four main and each - features.

The first and simplest is the <img> element right in the HTML code. This is, in principle, the most effective way to download any image - browsers know in advance from the HTML code that it exists and start uploading it.

The downside is that scripts will not work in this SVG and any attempts to interact with the elements inside are doomed. The file will be like behind glass: you can look, but you can not touch it. While inside everything else works great, including CSS animations.

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

This method is best suited for content images that do not need interaction: logos, graphics, schemes.

The second way is a background image in CSS. And it doesn't matter if you insert it into an element, a pseudo-element or content, insert it - the result will be the same as with <img> : behind the glass, but inside something works.

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

This method is suitable for design graphics that do not need interaction: backgrounds, icons, and other trifles.

The third way, through <object> , finally knocks the glass between the page and the insides of the SVG file. Scripts, interaction, animation are working - if they are described inside the SVG. A folback can be inserted between the <object> tags, which will appear if the browser does not speak SVG.

 <object type="image/svg+xml" data="picture.svg"> <img src="picture.png" alt=""> </object> 

In fact, you can even use an <iframe> instead of <object> , as if you had connected another page. But <object> works better and adjusts to the size of the image.

You have to pay for flexibility: due to the fact that it is no longer just a graphic and can be scripted there, other security requirements are imposed on this method. For example, a picture from another domain is simply not inserted.

This method is suitable when you need to insert some kind of interactive graphics: toys, graphics and anything complex . Suffice it to recall that Flash movies were once inserted through <object> . Ask your parents what it is.

The fourth way was earned when browsers rewrote their HTML parsers according to the new standard and the contents of SVG files could be inserted directly onto the page like any other tags.

 <h1></h1> <svg width="20" height="20"> <rect fill="#fc0" width="20" height="20"/> </svg> 

With this SVG, you can do the same as with regular HTML elements: styles, scripts - well, you yourself know. You can, for example, change the fill color when hovering and describe everything in common styles .

 <style> rect:hover { fill: #090; } </style> <svg> <rect fill="#fc0"/> </svg> 

The downside is that such images are not cached separately from the page - although this can be bypassed through symbols and usernames, but this is a long story, we will talk about this separately.

SVG is much more than just a graphics format - this is what we already understood. Want to dig deeper? Read the article by Sarah Suidan , this is still the best of what is. All links are in the description of the video.

In the end: a lot of ways and everything is good for something. Choose the one that fits your needs, but always start with the simplest ones: <img> and background, and then complicate them - if you don’t have enough.

Video version

Questions can be asked here .