Ceci est une ancienne révision du document !
Over the past few months, we’ve looked at various tricks and effects that can be achieved when using an SVG file in a web page via the HTML <img> element. But using an SVG like that is subject to various security restrictions imposed by the browser, preventing you from referencing external files (fonts, css, linked bitmaps) or using JavaScript. So now we’re going to move on to alternative methods of using SVG in a web page, which offer a little more scope for customisation.
This instalment will look at a little CSS trick for inheriting a color from your HTML page into your SVG. Unfortunately, the laws of CSS scoping mean that this one works only if you inline your SVG code right into your HTML. This requires some care and attention, but isn’t really that difficult, as you can largely copy and paste the contents of your SVG file from within a text editor. It does bloat the size of your HTML, but, conversely, you make a saving in not having a separate SVG image to download. Let’s start with a basic HTML page (top right).
Now we need some SVG to put into the file. For this demonstration, I created a simple rounded rectangle in Inkscape, then saved it as in “Optimised SVG” format to clear out a lot of the unnecessary metadata and other content. Even then, I was able to manually trim the resulting file a little further, as the namespace declaration isn’t required, and I was left with a single <g> wrapping the content which serves no purpose in this case.
One option I did select in the save dialog was to “Convert CSS attributes to XML attributes”. This breaks down the otherwise densely filled “style” attribute into a series of individual presentation attributes. You don’t have to do that – this technique works just as well with the style attribute, or even a <style> section elsewhere in the XML – but having the styling split into separate attributes makes it a little clearer to explain what’s happening. The result of the export, manual trimming, and reformatting to fit the magazine, was the chunk of SVG shown below.
Copying this code and pasting it inside the <div> in the HTML file results, as you might expect, in the browser drawing a rounded rectangle, with a dark red fill. No surprises so far.
The next step is to throw away the “color” attribute entirely: it’s not needed in SVG, where we already have fill and stroke colors, but if it’s left in place it will affect the CSS cascade and prevent the effect we’re trying to achieve. That effect is to get the SVG to use the current font color from the parent HTML page. We’ll use it for the fill in this case, so that our rectangle basically becomes a giant color swatch displaying the browser’s font color. To do this, we simply have to replace the value of the “fill” attribute with the keyword “currentColor” (note the spelling and capitalisation). Code is shown top right on this page.
Reloading the page will most likely show the rectangle filled with black. What else were you expecting? Black is the default color for text in an HTML page if you haven’t styled things differently. But we can change that by setting the CSS “color” property on the <svg> element or, crucially, one of its ancestors. For example, let’s change the <div>:
<body>
<div style=“color: red;”>
<svg width=“250” height=“250”>
...
Now reloading the page in the browser gives the result shown below left.
You’d be forgiven for not getting terribly excited by this, but take a step back and think about what you’ve achieved: you’ve set a color inside your SVG content based on a CSS value in your HTML. Still not getting it? Let’s add an ID to the <rect> element, then create a couple more divs (below). In case you hadn’t guessed, the <use> element lets you re-use a snippet of SVG elsewhere, by referencing its ID in the fragment identifier part of the URL in the “href” attribute. In this case, we’re referencing an element in the same file, so we don’t need the full URL – just the fragment identifier (the ID preceded by a hash). So this code just tells the browser to render three copies of our <rect>, but the CSS in each <div>, combined with the use of currentColor in the SVG, results in some rather cubist looking traffic lights:
Let’s put this to a more practical use. How about icons for a website? Here (shown right) I’ve created four icons, each in a separate layer in Inkscape, and given each layer a descriptive ID. The details of the paths are omitted for brevity. The “color” attributes are removed, and the fill or stroke color set to “currentColor” as necessary. Then the whole SVG block is hidden using CSS in the <svg> element.
Now each individual icon in the set can be displayed on the page via a <use> element, with its size and color set on the SVG element that contains the <use>, or even on a parent element above that – as demonstrated with these couple of sections (next page, top right).
Of course the color could be set at a much higher level on the page, so it needs to be set only once for the whole page – or you could use CSS variables for the same effect. Now a change to a single color will alter all the icons used on your page: you’ve just created a means of applying a theme. Because the CSS “color” property also affects the text on the page, you can ensure that your icons are kept in sync with the text, whichever theme is selected. As a demonstration, suppose we use a block like this several times (next page, bottom right).
For each copy of this block, we’ll change the color values in the <div>. A little extra CSS adds a border that also has its color set to “currentColor”, and for some of the copies we’ll even put in a “background” property to produce an inverted look. Here’s the result of a few minutes of copying, pasting, and editing some CSS – all with only a single copy of the SVG icons, each referenced multiple times:
I’ll confess this trick of using currentColor in SVG is a limited one. The SVG has to be inlined with your HTML, and you can change only a single color. But, with a cleverly designed SVG file, it’s possible to give the impression of something more sophisticated – by masking the colored element with a gradient, or using a filter to alter the color, for example. There is one interesting thing to note about this technique: it will work in Internet Explorer right the way back to version 9! If you need to theme some icons on a website, but still need IE support (so no CSS variables), this might be just the trick you need.