Setting the colors of CSS colorizable SVGs requires that the SVGs are "inline". This means that the SVG together with all its elements is part the HTML document's tree structure. If you view a loaded web page in a browser's DOM inspector, an inline SVG may look like this:
With inline SVGs you have full control over all parts of the SVG. The SVG and all of its elements can be styled with CSS and accessed through Javascript, just like any other element of the HTML document.
Inline SVGs are supported by all browsers that support SVG. This only excludes old browsers like Internet Explorer 8 (and previous) and Android browser before version 3.0. Here is a full table that shows browser support: https://caniuse.com/#feat=svg-html5
There are three methods to make an SVG inline:
Injecting SVG with Javascript
Inserting SVG code into the HTML source code using server side technology
Writing SVG markup manually into the HTML source code
SVG injection uses Javascript to replace an <img> element with the contents of an SVG file. This occurs inside the browser, after the
HTML page has been loaded.
There are several injection libraries available, some for use with plain Javascript, others for use with Javascript frameworks like Angluar, React or Vue.
Here is a very basic example how SVG injection works with our open source SVGInject library.
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image1.svg" onload="SVGInject(this)" />
<img src="image2.svg" onload="SVGInject(this)" />
</body>
</html>
The injection replaces the `<img>` elements with the SVG markup loaded from the files specified by the `src` attribute.
You can find more information about SVG injection on the SVGInject GitHub page.
Pros:
Easy to use, no special server side technology required.
SVGs are kept in separate files, thus keeping the HTML code clean.
SVGs can be dynamically inserted into a webpage.
Cons:
SVG images may be displayed with a slight delay, because they are initially not part of the HTML code.
In short: If you are not sure which method to choose, try this one first. It is very easy to implement and keeps you source code clean.
If your websites are generated on the server with PHP, Rails, Django or similar server side technologies, inserting the SVG code into the HTML on the server side is one possible option.
For this the server side pages usually contain an instruction that makes the server replace the instruction with the contents of an SVG file. The HTML file then contains the SVG markup already when it is delivered by the server.
With PHP it may look like this:
<?php echo file_get_contents("myicon.svg"); ?>Pros:
SVGs are kept in separate files, thus keeping the HTML code clean.
SVG images are displayed immediately, because they are already part of the HTML code when the page loads.
Cons:
Requires server side technology
No dynamic inserting of SVGs
In short: If you are already using a server side technology like PHP, Rails or Django, you should consider inlining the SVGs on the server.
With this method you write the SVG code directly into the HTML code. This is usually done by copying and pasting the code from the SVG file into the HTML code using an editor.
With this approach the HTML files on the server contain the svg markup:
<div><svg> ... </svg></div>Using this method has the advantage, that the svg is immediately available when the HTML is loaded. No additional HTTP request is necessary since the SVG is already included in the HTML.
One major issue with this approach is that it will bloat your HTML code . Another problem is that changes to the SVG have to be made in the HTML code. So if you created an SVG file, copied
We do not recommend this method, although it may be the most straightforward way for making SVGs inline.
Pros:
No Javascript or server side technology required.
Cons:
The HTML source code will become bloated and unreadable. SVG code is usually not very readable and an SVG file can easily have hundres of lines of code.
Changes in the SVG file will require copying the code into the HTML file again. And if the SVG file is used in different places of the HTML code, it has to be copied again to each place it is used.
No dynamic adding of SVGs
In short: Use this method only for small experiments, not for real projects.