allow font cleaning and remapping for SVG output

index.html

@@ -12,6 +12,10 @@
     src: url(stalemate.ttf) format('truetype');
   }
 
+  #illustrator-font text {
+    font-family: 'Georgia';
+  }
+
   input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
     padding: 15px;
   }
@@ -258,6 +262,14 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
         <text x=100 y=100 text-anchor=middle dy=14 style="font-family:'Stalemate';font-size:36pt;">Custom Fonts</text>
       </svg>
     </li>
+
+    <li id=illustrator-font>
+      <svg width=200 height=200>
+        <text x=100 y=100 text-anchor=middle dy=14 style="font-size:36pt;">Illustrator Fonts</text>
+      </svg>
+      <button id="illustrator-btn" class="save btn">Save as SVG</button>
+    </li>
+
   </ul>
 </div>
 
@@ -333,6 +345,22 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
   inlineTest('With opacity', $('#opacity'));
   inlineTest('With custom fonts', $('#custom-font'));
 
+  $('#illustrator-btn').on('click', function() {
+    svgAsDataUri($('#illustrator-font svg')[0], {
+      cleanFontDefs: true,
+      fontFamilyRemap: { "Georgia": "Arial"}
+    }, function(uri) {
+      var a = document.createElement('a');
+      a.download = 'test.svg';
+      a.href = uri;
+      document.body.appendChild(a);
+      a.addEventListener("click", function(e) {
+        a.parentNode.removeChild(a);
+      });
+      a.click();
+    });
+  });
+
   var $sandbox = $('#sandbox');
   $sandbox.find('.render').click(function() {
     $sandbox.find('.error').hide().text('');

saveSvgAsPng.js

@@ -65,9 +65,10 @@
     }
   }
 
-  function styles(el, selectorRemap) {
+  function styles(el, options) {
     var css = "";
     var sheets = document.styleSheets;
+    var selectorRemap = options.selectorRemap;
     for (var i = 0; i < sheets.length; i++) {
       try {
         var rules = sheets[i].cssRules;
@@ -98,7 +99,14 @@
 
             if (match) {
               var selector = selectorRemap ? selectorRemap(rule.selectorText) : rule.selectorText;
-              css += selector + " { " + rule.style.cssText + " }\n";
+              var cssText;
+              if (options.cleanFontDefs && rule.cssText.match(/font-family/)) {
+                var cleanedFontDec = cleanFonts(rule.style.cssText, rule.style.fontFamily, options.fontFamilyRemap);
+                cssText = selector + " { " + cleanedFontDec + " }\n";
+              } else {
+                cssText = selector + " { " + rule.style.cssText + " }\n";
+              }
+              css += cssText;
             } else if(rule.cssText.match(/^@font-face/)) {
               css += rule.cssText + '\n';
             }
@@ -109,6 +117,15 @@
     return css;
   }
 
+  var fontFamilyAllRe = /font-family:\s?(.+?);/;
+
+  function cleanFonts(cssText, fontFamily, fontFamilyRemap) {
+    var firstFamily = fontFamily.split(',')[0];
+    var familyDec = fontFamilyRemap[firstFamily] || firstFamily;
+    var replacedFamily = cssText.replace(fontFamilyAllRe, 'font-family: ' + familyDec + ';');
+    return replacedFamily;
+  }
+
   function getDimension(el, clone, dim) {
     var v = (el.viewBox && el.viewBox.baseVal && el.viewBox.baseVal[dim]) ||
       (clone.getAttribute(dim) !== null && !clone.getAttribute(dim).match(/%$/) && parseInt(clone.getAttribute(dim))) ||
@@ -132,6 +149,8 @@
 
     options = options || {};
     options.scale = options.scale || 1;
+    options.cleanFontDefs = options.cleanFontDefs || false;
+    options.fontFamilyRemap = options.fontFamilyRemap || {};
     var xmlns = "http://www.w3.org/2000/xmlns/";
 
     inlineImages(el, function() {
@@ -173,7 +192,7 @@
 
       outer.appendChild(clone);
 
-      var css = styles(el, options.selectorRemap);
+      var css = styles(el, options);
       var s = document.createElement('style');
       s.setAttribute('type', 'text/css');
       s.innerHTML = "<![CDATA[\n" + css + "\n]]>";