Cross Browser SVG Sprites with JavaScript

Inline SVGs are great for icons in your applications.

They much smaller than font icons and far more accessible.

This snippet will create an SVG sprite from a string.

It will let you avoid dealing with CORS/Browser security issues with SVGs serving from different domains.

It also means you won’t need to ajax your sprite into the page after it loads.

function createSVGSprite(svgString){
  // create SVG
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  // set namespaces
  svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink')
  svg.setAttribute('width', '0')
  svg.setAttribute('height', '0')
  svg.setAttribute('style', 'display: none')
  // Create a dummy div
  var div = document.createElement('div');
  // Wrap the svg string to a svg object (string)
  var svgfragment = '<svg>' + svgString + '</svg>'
  // Add fragment to the div
  div.innerHTML = '' + svgfragment
  // Splice the children of the SVG and append into the real SVG
  Array.prototype.slice.call(div.childNodes[0].childNodes).forEach(function (el) {
      svg.appendChild(el)
  });
  return svg
}

/* usage: */
// stringified SVG
var svgPathString = "<svg style=\"position:absolute; width: 0; height: 0\"><symbol viewBox=\"0 0 26 26\" id=\"back\"><path d=\"M23.954 14H5.144l5.6 8h-2.44l-6.302-9 6.301-9h2.442l-5.601 8h18.81a11.121 11.121 0 0 1 0 2z\"></path></symbol></svg>"
// create sprite
var svg = createSVGSprite(svgPathString)
// insert sprite into the DOM
document.body.appendChild(svg)
<!-- in your html reference the symbol with the id 'back' -->
<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back"></use>
</svg>

Demo

See the Pen Cross Browser SVG Sprites by David Wells (@DavidWells) on CodePen.

Comments