Spoiler: Insert SVG icons in one single way.

The article will discuss the problem of inserting SVG icons into a web page.

What we have, and how we use it. Globally there are three ways:

• Insert SVG source code icons directly into the DOM page.
• Using HTML IMG Tag
• Using CSS background-image

We will not talk about the option of inserting icons in the form of fonts, because there are a lot of flaws in this approach (some of them are purely subjective), which you can learn about using Google search, and also omit the variant with IFRAME and OBJECT tags for the same reason .

All these methods have their advantages and disadvantages. With the advent of SVG, we have new requirements for icons. For example, at the time of PNG, it would never occur to us to use the same icon in different sizes in different parts of the site and with different color fills. To do this, we would have to ask the designer for a few icons with different colors and sizes. But with the advent of SVG, we became brutalized and started inserting the same icon everywhere, as it became possible to change the appearance of the icon using CSS according to desires.
')
I will give an example:
We have an icon - an asterisk for ratings. Somewhere it is white, somewhere yellow, big and small. Plus, there may be a cut off half of the asterisk, for example, to indicate a rating of 2.5 or 4+.

To implement this example, we need at least four PNG icons for each color and shape, but if we have SVG, then instead of four, we can safely do with just one specially designed for this task and not only.

Our asterisk can be directly inserted into the DOM and with the help of styles we can decorate it the way we need it. This is the first option, a familiar practice.

In the first version of the advantages, you can enumerate convenient control of graphic elements, animation of individual parts of the icon, etc., full management of SVG tags. Among the shortcomings, the first is that in this case we get a large DOM size, which for some reason is not a completely good phenomenon. The second disadvantage, compared with the third option, is that size, positioning (centering vertically and horizontally) is in some cases not a trivial task.

And what about the second option, it is the most redundant, since it does not have any of the advantages of the other two options.

What do we get? We have two options for inserting icons that have their merits and between which it is sometimes difficult to make a choice.

Now imagine that you can use almost all the advantages (except for animation of individual parts of the icon) of the first option along with the third option.

That is, to insert icons using CSS background-image, or HTML IMG tag, and at your discretion, to change the color of each tag in the SVG, be it path, polygon or circle, does not matter.

Here is what it will look like:

background-image: url(star.svg?p=red,$00ff00,,green); 

or

 <img src=”star.svg?p=red,$00ff00,,green”> 

I think that the idea is clear, the syntax already depends on the server settings, and we still need to think about the implementation.

Here is a link to how I solved this problem for myself. Any decisions are welcome if they are cool.

How it works

An example of using this implementation.

 icon/?p=parse /*    */ 

 icon/?p=empty /*   ,     parse */ 

 background-image: url("icon/?p=leaderboard,red,blue,$000,green,orange,yellow,$0f0"); 

 background-image: url("icon/?p=leaderboard,red,blue,$000"); 

 background-image: url("icon/?p=leaderboard,,blue,$000,orange,red"); 

 background-image: url("icon/?p=history"); 

 background-image: url("icon/?p=history,$ff0000"); 

From the point of view of performance, this is not the best idea, even if there is a cache, anyway it will no longer be producing statics, the script will work there anyway, although you can use this insert only when you need a different color for the icon, but for large projects, where icons become a headache and even a sibling cannot be found in this stash, then, as I observed for such projects, so far this option can be considered - best practice.

PS: So far I have not had time to use it in production, I am wondering what else can be corrected, or what problems you may encounter with it, so any criticism is welcome, thanks in advance.

PSS: The efficient way to configure the server is offered by the user AlexLeonov habrahabr.ru/post/278825/#comment_8799315