fixsvgstack.jquery.js

(function($) {

  // Setup
  // ----------

  // The fix is for webkit browsers only
  // [https://bugs.webkit.org/show_bug.cgi?id=91790]()

  if(!(/WebKit/.test(navigator.userAgent))) {
    // return functions that do nothing but support chaining
    $.fn.fixSVGStack = function() { return this; };
    $.fn.fixSVGStackBackground = function() { return this; };
    return;
  }

  // Enabled / disable support for a dirty CSS-Hack
  // if `USE_DIRTY_CSS_CONTENT_HACK` is true the following CSS enables the fix
  // – otherwise only inline styles can be fixed
  //
  // ```
  // .classname {
  //   background: transparent url('stack.svg#SVG') no-repeat top left;
  //   content: 'stack.svg#SVG'; /* use content to pass url to webkit fixSVGStackBackground */
  // }
  // ```
  //
  var USE_DIRTY_CSS_CONTENT_HACK = true;

  // The Fix
  // ----------

  // Caches XML of SVG Elements (less parsing)
  var cache = {};

  // Reads SVG Stack via Ajax and returns one element encoded data-uri.
  var i = 0;
  function getdataURIFromStack(url, cb) {

    if(url in cache) {
      cb(cache[url]);
    }

    // `url` must be in the form filename.svg#id
    var parts = url.split('#');
    if(parts.length !== 2) {
      cb(false);
    }
    
    var processStack = function(xmlText) {
      
      var xml = (new window.DOMParser()).parseFromString(xmlText, "text/xml")
      // `parts[1]` contains id
      var svg = xml.getElementById(parts[1]);
      if(svg == null) {
        cache[url] = false;
        cb(false);
      }
      // iOS Safari fix:
      // Firefox uses viewBox and can't scale SVGs when width and height
      // attributes are defined.
      // Safari on iOS needs width and height to scale properly
      var viewBox = svg.getAttribute('viewBox');
      if(viewBox && (viewBoxData = viewBox.split(' ')).length == 4) {
        svg.setAttribute('width', viewBoxData[2]);
        svg.setAttribute('height', viewBoxData[3]);
      }

      var svgString = (new XMLSerializer()).serializeToString(svg);
      var dataURI = 'data:image/svg+xml;utf-8,' + escape(svgString);
      cache[url] = dataURI;
      cb(dataURI);
    }

    // Ajax request, browser handles caching
    $.ajax({
        // `parts[0]` contains filename.svg
        url: parts[0],
        cache: true,
        // Read SVG as 'text', jQuerys XML Parsing is broken with SVGs
        dataType: 'text',
        success: processStack
      });
  }

  // Fix for SVG Stacks in background

  $.fn.fixSVGStackBackground = function() {
    
    this.each(function() {
      
      var $el = $(this);
      
      // At the heart of the bug:
      // Both jquery's `$el.css('background-image')` and `getComputedStyle($el[0], null).backgroundImage`
      // return and url without the #target part;

      var url = $el[0].style.backgroundImage.slice(4, (- 1)).replace(/["']/g, '');

      // Here is the quick and dirty hack, if enabled

      if(USE_DIRTY_CSS_CONTENT_HACK) {
        // Read url form `style.content`, the css content property is used to transport the information
        var style = getComputedStyle($el[0], null);
        if(style.backgroundImage.indexOf('.svg') !== -1 && style.content.indexOf('.svg#') !== -1) {
          url = style.content.replace(/["']/g, '');
        }
      }

      if(url.indexOf('.svg#') === -1) {
        return;
      }

      getdataURIFromStack(url, function(dataURI) {
        if(dataURI === false) {
          return;
        }
        // Replace background-image url with dataURI
        $el.css('background-image', 'url(' + dataURI + ')');
      });

    });
    return this;
  };

  // Fix for SVG Stacks in img Tags

  $.fn.fixSVGStack = function() {
    this.each(function() {
      
      var $el = $(this);
      var url = $el.attr('src');

      if(url.indexOf('.svg#') === -1) {
        return;
      }
      getdataURIFromStack(url, function(dataURI) {
        if(dataURI === false) {
          return;
        }
        // Replace src with dataURI
        $el.attr('src', dataURI);
      });
    });
    return this;
  };

})(jQuery);