SVG spritesheet targeting with CSS

Question

I've been trying to find a solution for handling SVG elements used as background images via CSS:

.icon.arrow-down
{
    background-image: url( 'images/spritesheet.svg#arrow-down' );
}

I'm using :target directly in the SVG file in order to target a particular layer (or "group") within the combined SVG spritesheet.

<?xml version="1.0" encoding="utf-8" ?>
<svg class="icon" id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50">
    <defs>
        <style>
            rect, line { shape-rendering: crispEdges; }
            svg .icon { display: none; }
            svg .icon:target { display: inline; }
        </style>
    </defs>

    <!-- Arrows -->
    <g class="icon" id="arrow-down" transform="translate(0,12.5)">
        <path fill="#F00" d="M 0,0 50,0 25,25 z" />
    </g>
    <g class="icon" id="arrow-up" transform="translate(0,12.5)">
        <path fill="#F00" d="M 0,25 50,25 25,0 z" />
    </g>
    ...
</svg>

This works fine for Firefox and IE9+, but in Chrome it seems to be ignoring the #profile part. However, going to the SVG sheet directly in the browser, with the target id, yields the correct image.

Is this a bug in the way Chrome is handling :target in background images?

I'm trying to avoid having to separate everything into their own files, so only one resource is downloaded, but I don't know that it is possible yet.

Notice how the icons are not shown in Chrome, but are in other browsers: http://jsfiddle.net/sYL5F/1/

Answer 1

It's a known issue and is specific to using it as a background and apparently won't be fixed because of security concerns (Opera also doesn't display it). If you view the SVG directly, it works as you would expect.

https://code.google.com/p/chromium/issues/detail?id=128055#c6

SVG stacks will not be supported for CSS properties taking CSS Image values. This includes, but is not limited to, background-image, mask-image, border-image.

This is a resolution of the SVG and CSS WG to differ between resources (like SVG gradients, masks, clipPath) and image values during parse time of CSS. This is a security requirement to protect the users privacy and safety.

See following discussions for further information:

http://lists.w3.org/Archives/Public/www-style/2012Oct/0406.html

http://lists.w3.org/Archives/Public/www-style/2012Oct/0765.html

You're just going to handle your SVG the same way you would an old fashioned sprite map.

Answer 2

For my latest project, I've implemented my own way of creating custom SVG parameters using a PHP MVC framework I've been working on. Essentially, I created a controller for linking to icons:

/icon/NAME_OF_ICON.svg?color=F00

My icon controller takes the filename and injects the GET parameters into the SVG file.

//define( ROOT, "path/to/webroot" );
//$filename = ...get filename from URL...;

$svg = simplexml_load_file( ROOT . "/assets/icons/{$filename}" );
if( isset( $_GET['color'] ) )
{
    $svg->path->addAttribute( 'fill', '#' . $_GET['color'] );
}

header( "Content-type: image/svg+xml" );
echo $svg->asXML( );

I'll be adding code to cache the queried custom SVG's, eventually.