diff --git a/index.html b/index.html
index 16a072a..52753af 100644
--- a/index.html
+++ b/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 @@
Preview
Custom Fonts
+
+
+
+
+
+
@@ -333,6 +345,22 @@ Preview
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('');
diff --git a/saveSvgAsPng.js b/saveSvgAsPng.js
index 7a538e3..e235e54 100644
--- a/saveSvgAsPng.js
+++ b/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 = "";