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.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>svg</title>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg"
viewbox='0 0 300 100'>
<style> <!-- styling legal in svg -->
svg {
border: 1px solid fuchsia;
height: 100px;
width: 300px;
}
</style>
<ellipse cx="150" cy="50" rx='80' ry="30"
stroke="black" stroke-width="1" fill="blue"/>
</svg>
</div>
</body>
</html>
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.
#svg {
border: 1px solid red;
height: 100px;
width: 300px;
}
#image0 ellipse {
fill: red;
stroke-width: 5px;
}
and the page
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>svg</title>
<link rel='stylesheet' href='./svg.css'/>
</head>
<body>
<div>
<svg id='svg'><use href='#image0'/></svg>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id='image0' viewbox='0 0 300 100'>
<ellipse cx="150" cy="50" rx='80' ry="30"
stroke="black" stroke-width="1" fill="blue"/>
</symbol>
</svg>
</body>
</html>
Finally, as you might have guessed from this context, generating SVG dynamically by JavaScript is an option too.