Those working with SVG graphics have multiple options to embed them into an HTML document. Aside from using it as a classic image file via the “” element, SVG can also be implemented via “” or “”. The latter two have the advantage that they allow for the execution of JavaScript and animations. The simple variant however, is marking SVG inline in the HTML source code.
SVG Inline: No Additional Request
Firstly, inline SVGs don’t cause an additional request, since they are a part of the HTML document. This will be especially noticeable when there are many small SVGs on one page.
However, when the same graphics are used in multiple documents, embedding them externally might be the way to go. With the according cache settings, the graphics won’t have to be newly loaded for each loading document.
Uniform Styles
Furthermore, a completely different, very useful advantage of inline SVGs is the option to control the appearance of the graphics via the HTML document’s stylesheets.
Fill and line color can be defined as well as line strength, and transformations. SVG stylesheets are marked up the same way HTML stylesheets are, and it is possible to combine HTML and SVG sectors.
1
2
3
4
5
6
7
article svg rect {
fill: red;}
asidesvg rect {
fill: green;}
In the example, the fill color of an SVG rectangle is defined depending on the parental HTML element. If it’s an “
