Inline SVG Sprite – Create usage and automation

This article should be seen as a continuation of SVG sprite as background: Usage and automation. The same preconditions and setup apply.

Instead of using SVGs as background graphics, this technique is about using SVG graphics like images as inline elements. The advantage of this method is that two colors can be adjusted in the inline SVG and scaling is easier.

SVGs with symbols as inline svg

A brief summary of this method:

Nutzung als inline SVG-Element (<svg><use xlink:href=“sprite.svg#symbol“ /></svg>)
Größe des Icons sehr leicht per CSS einstellbar
SVG-Daten sind cachebar
Zwei Farben sind manipulierbar
Beim Abruf von externen Servern ist auf CORS zu achten

Configure Grunt Task

The configuration of the symbol task is very simple. Only the target path and the name of the sprite is specified. I define the settings for the symbol mode as follows:

JavaScript

svg_sprite: {
  icons: {
    expand: true,
    cwd: 'src/img',
    src: ['**/*.svg'],
    dest: "./",
    options: {
      mode: {
        symbol: {
          bust: false,
          dest: "dest/css",
          sprite: "../img/symbols.svg"          
        }
      }
    }
  }
}

With the configuration options in the svg section you can still influence the final result and control the output a bit.

JavaScript

svg: {                       
  xmlDeclaration: true,    
  doctypeDeclaration: true,
  namespaceIDs: true,      
  dimensionAttributes: true
}

Use inline SVG Sprite

As a result of the task we get a clean and optimized symbols.svg. We can now reference this in an <use>-tag.

Markup

<svg class="icon">
  <use xlink:href="symbols.svg#shopping-cart"></use>
</svg>

Again, the ID (hash value) corresponds to the file name of the original SVG graphic.

demo

In the demo on codepen.io, the inline SVG graphic was now not referenced externally, but placed inline in the page. But the effect is the same. Move the mouse over the symbols.

See the Pen
Inline SVG Sizing by Markus Winkelmann (@designerzone)
on CodePen.

When referencing externally, you must explicitly ensure that you do not try to make any cross-domain requests (cross-origin resource sharing). Or you have to make sure that a corresponding call is allowed by a header on the SVG response.

Color manipulation

With this method you can change two colors by a trick. In SVG the desired paths get the presentation attribute fill=”currentColor”. This attribute causes the selected font color to be the fill color for this element. For this reason, an icon can be “painted” with two colors using fill and color.

Browser compatibility

The general SVG compatibility is very good. However, the method with the fragment identifier on an external resource is not supported by IE and the Android Stock Browser. Here the JavaScript SVG4everybody by Jonathan Neal helps. This fetches the appropriate SVG data via AJAX and inserts it into the page so that the mentioned browsers also display graphics.

Full control over SVG and the paths

If you want to have full color control over an SVG, the complete source code of the SVG must be included inline in the HTML. Then you can assign classes to the individual form elements and style them extensively.