SVG on Web

26 Feb, 2022

1 Mins Read

SVG is fine jsut to know it as an image format.

However, to deal with SVG on a web application as a developer is a different thing. SVG is too generic for better or worse as Javascript. Unless you know your way through it, it might seem confusing or easy.

First is there are many ways to include SVG in web.

The basic is just the tag itself. It is a valid HTML tag. So basically the SVG thing can be added inside an HTML page as tags like div and span.


<body>
 <svg> The SVG tags go here </svg>
</body>

Next is img tag. We can do that too. Put an svg in an Image tag.

<img src='the_svg_file.svg'></img>

And then there is Embed tag.

<embed type="image/svg+xml" src="image.svg" />

Looking at all this, seems fine that we just have choices to add SVG into HTML page. This is true. Just remember that SVg can also be scriptable! That is a whole new game. It is like old days of Flash. We can just add Javascript inside SVG and control it. For this to happen the requirement is we have to add it in the page using Embed tag.