Scalable Vector Graphics is an XML implementation that allows graphics to scale while retaining its graphic quality. Being an XML implementation, it is a text format meaning that SVG files are humanly readable. They are normally stored with an .svg suffix to their names. The SVG standard is an W3C standard and this ties it to the web. SVG files are usable on web pages and may be included in various ways
<object type="image/svg+xml" data="ellipse.svg"></object>
Try it.
It seems that making object an empty element,
like img, is illegal, as it negatively
influences the following HTML5. Alternatively
<iframe src="ellipse.svg"></iframe>may be used too. Try that. Even
<img src="ellipse.svg" alt="ellipse"/>seems to work. Try it. While all the above are legal, they are useful when you need to add graphic elements to your page as just that. They cannot be programmatically manipulated. The following, inline SVG in the using HTML5 is necessary if you in any way want or need to manipulate the SVG.
<xi:include></xi:include>
Try this too.
In this last example you will also notice the presence
of a style element inside the svg
element. This pattern may be more useful in an
svg file used in more than one page, but it is
legal in this way too. Though not strictly required,
various sources hold it good style always to use at least
the attributes presented in this example's
svg element. It is debatable whether there
should be width and height
attributes.
If your SVG has a lot of code, you may want it away from your other markup. In that case place it at the bottom of your HTML5 like the following. The example also moves the styling away from the svg into the stylesheet covering the whole page. You may style all the parts of an SVG image.
<xi:include></xi:include>and the page
<xi:include></xi:include>Finally, as you might have guessed from this context, generating SVG dynamically by JavaScript is an option too.