Another interesting part is that HTML5 supports embedding SVG. That is, you can put SVG code directly in your HTML5 document and it’s going to render correctly. You can also style it through your website’s CSS file and manipulate the elements via JavaScript.
Though as others pointed out, it’s technically not HTML but XML. For
example, you have to close all the elements and quote all the
attribute values. But when you embed it inside a HTML document, those
rules get relaxed to adhere with HTML. (I.e., you cannot write
<circle r=5>
in SVG (it must be <circle r="5" />
) but you can when
you embed it in HTML).
If you have an SVG image you can either embed it directly on the website, or link it using
img
tag. Whatever the case, there’s no need to export it to PNG.And yes, that will likely result in a smaller website and furthermore images which can scale smoothly.