Why You Should Embed SVG Inline

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 “<img>” element, SVG can also be implemented via “<object>” or “<iframe>”. 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.

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 “<article>” element, it will turn red, while an “<aside>” element, will make it turn green.

Hover Effects

The creation of hover effects is very uncomplicated using the same method. For instance, you get to place SVGs within a link, and generate a hover effect using CSS.

<a href="http://www.example.com/">
<svg>
<rect x="0" y="0" width="15" height="15" />
</svg>
</a>

Both the appearance of the SVG rectangle, as well as the hover behaviour is defined via stylesheets.

a svg rect {
background: red;
transition: all 0.5s ease;
}
a:hover svg rect {
transform: rotateX(90deg);
}

In the example above, an SVG graphic is placed within an “<a>” element, and then designed via CSS. A hover effect on the “<a>” element makes sure that the rectangle is rotated by 90 degrees.

Such behaviour is not possible with an external referencing. SVG files integrated using the “<img>” element don’t allow for changes via CSS, and files referenced by “<object>”, can only be altered by taking several detours in combination via JavaScript.

Simple Access With JavaScript

As integrated SVG graphics are located within the HTML document’s DOM-node tree, it is not only possible to access single elements via CSS. Using JavaScript, you can do the same thing very comfortably as well.

Accessing SVG files embedded via “<object>” using JavaScript, is only possible with the attribute “contentDocument”. This allows you to access the DOM-tree of external files.

document.getElementsByTagName("object")[0].contentDocument.getElementsByTagName("rect")[0].setAttribute("class", "hover");

In this example, “contentDocument” is used to access an element within an SVG file referenced via “<object>”.

If the SVG graphic is marked directly in the HTML document, you can access single SVG elements the same way you would access HTML elements.

document.getElementsByTagName("rect")[0].setAttribute("class", "hover");

Here, simply access the first “rect” element, which is marked in your HTML document.

Conclusion

Inline SVGs have many advantages over externally embedded SVG files. Above all, the interaction with CSS is significantly easier, as SVG can be treated the same way all other elements of your document are treated via CSS. This is a decisive advantage, especially for interactions like hover effects.