It sets the inner size and the outer size of the image. This tag contains the image elements and defines the frame of our image. ( Watch this article as a video with even more fun examples.) The SVG tagįirst, we have to talk about the svg tag itself. So how do SVGs look like under the surface? In this tutorial, we go through the source code of a few SVGs to cover the foundations. But the next time you need a simple icon, a diagram, or animation, maybe you can code it yourself.

Or we can turn things around and generate graphics from code.įor more complicated images, you will still use a designer tool. We can animate parts of an image from JavaScript or make it interactive. Suddenly we can access parts of an image from JavaScript or set the style from CSS. We can do this because SVGs have a very similar syntax to HTML. We can inline the code of an image right inside the HTML. We don’t even need to use the image tag that refers to a separate file. Since HTML5, we can include the code of an SVG image inside an HTML document.

Well, good news – you can do all that and more without ever leaving your favorite code editor or using any third party tools or libraries. Have you ever needed an icon for your website, but you couldn't quite find the right one? Or perhaps you wanted to have a simple diagram, but didn't want to learn a whole new library just for that?

Svg user icon