‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)

The widespread adoption of SVG in modern web pages has really ramped in 2016 thanks to its, file size, scalability and CSS .

It can be used for icon systems (take a look at Build Your Own SVG Icons), although icon fonts, in some cases, can be preferable (some info here: The Great Icon Debate: Fonts Vs SVG).

But SVG can also be used for logos or graphic elements (at least not overly complex ones) and its natural flexibility makes it a perfect solution for responsive sites (take a look at Sara Soueidan’s Making SVGs Responsive with CSS).

The use of SVG makes it possible to target and change the size and color of an entire element through CSS, but, unless your SVG code is embedded in your HTML page, you can’t modify a single portion of it in this way.

The problem

Let’s look at a simpler example. Here we have an image that we need to display in a range of colors.

Of course, traditionally we would simply create three standalone images – each with a different flavour. But what if we wanted to use a single SVG file and style it at render time?

Furthermore, is there a way we make our image a ‘SVG symbol’ to take advantage of browser caching?

I’m going to refer to this a “Reskinnable SVG symbol” – the “bones” of your SVG image remain the same but it’s easy to change the surface appearance.

The perfect solution would be accessing symbol elements through a CSS selector and add some rules to them (the same method that we would have used with embedded SVG).

In the following sample, I’ve added a class (top, right, bottom and left) to each triangle, arranged the image as a symbol and tried to modify it thru CSS, in this way:

[code language="css"]
.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */
[/code]

Unfortunately, at the moment this only works with Firefox, as the following Codepen demonstrates. The second image appears in tones of blue only on Firefox (I’ve embedded the symbol code in the pen for convenience, but we have the same results with external SVG files).

See the Pen svg element editing (demo 1) by Massimo Cassandro (@massimo-cassandro) on CodePen.

In large projects, where we may have many elements like that, maintenance issues are an important factor, so I’m always searching for a way to better organize project assets.

My goal was a pure CSS solution: the previous sample can be rewritten using a single-triangle-SVG to be rotated, moved and colored using CSS.

But I didn’t like this solution: it seems to me that it simply moves the problem, without solving it. How many real-world logos have components that all have the same shape?

Sara Soueidan explains the problem much better then I do and offers us a clever solution using CSS variables. Unfortunately CSS variables are still an experimental technology and Microsoft browsers don’t support them.

The Solution

As it often happens, the solution is so head-slappingly simple that it will make you feel stupid for not having thought about it before.

I came across it looking at the new Medium logo some months ago (it seems Medium has since changed their logo code – you’ll have to take my word).

You can see that Medium logo consists of four ‘shapes’, each filled with a different flat color. The B&W version is identical to the green one (except for the colour, of course).

The solution for having a single file for both versions was to simply build a symbol for each shape, each of them within the same viewBox.

Let’s apply it to our example and create a symbol for each shape in our image. They all share the same viewBox of the whole image (0 0 54 54), so they place themselves in the right position without any additional instruction. Just take care to avoid fill, stroke, style etc. attributes in the symbol code).

Continue reading %‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)%

by Massimo Cassandro via SitePoint