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/sp         


        

Answer 1

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.