Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes #29. added charset=utf8 and set default image sizes to 100% #32

Merged
merged 1 commit into from
Jun 6, 2016
Merged

fixes #29. added charset=utf8 and set default image sizes to 100% #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
SVGCache.init(options);
return function(style, result) {
return style.walkDecls(/^background|^filter|^content|image$/, function(decl) {
var ___, error, matches, name, params, replace, svg;
var ___, error, error1, matches, name, params, replace, svg;
if (!decl.value) {
return;
}
Expand All @@ -34,8 +34,8 @@
}
try {
svg = SVGCache.get(name);
} catch (_error) {
error = _error;
} catch (error1) {
error = error1;
if (silent) {
decl.warn(result, "postcss-svg: " + error);
} else {
Expand Down
10 changes: 5 additions & 5 deletions dist/lib/svg_image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
if (this.svgo) {
svg = this._svgoSync(svg);
}
return "url(\"data:image/svg+xml," + (encodeURIComponent(svg)) + "\")";
return "url(\"data:image/svg+xml;charset=utf-8," + (encodeURIComponent(svg)) + "\")";
};

SVGImage.prototype._svgoSync = function(svgString) {
Expand Down Expand Up @@ -117,8 +117,8 @@
doc.setAttribute('style', "{{= " + (_.map(['fill', 'stroke'], transform).join('+')) + " }}");
}
if (!(this.svgAttributes.height || this.svgAttributes.width)) {
doc.setAttribute('height', "{{= it['[height]'] || it['[size]'] || '' }}");
return doc.setAttribute('width', "{{= it['[width]'] || it['[size]'] || '' }}");
doc.setAttribute('height', "{{= it['[height]'] || it['[size]'] || '100%' }}");
return doc.setAttribute('width', "{{= it['[width]'] || it['[size]'] || '100%' }}");
}
};

Expand Down Expand Up @@ -207,7 +207,7 @@
};

SVGImage.prototype._addColor = function(type, attributes, node) {
var base, color, key, selectors, typeSelector;
var base, color, error, key, selectors, typeSelector;
try {
color = attributes[type].value === 'none' ? Color('rgba(255, 255, 255, 0)') : Color(attributes[type].value);
typeSelector = "[" + type + "]";
Expand Down Expand Up @@ -235,7 +235,7 @@
return "it[\'" + selector + "\']";
});
return node.attributes[attributes[type].index].value = "{{= " + (selectors.join(' || ')) + " || \'" + attributes[type].value + "\'}}";
} catch (_error) {
} catch (error) {

}
};
Expand Down
22 changes: 11 additions & 11 deletions example/output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ header h1 a:after {
content: '';
width: 50px;
height: 50px;
content: url("data:image/svg+xml,%3Csvg%20id%3D%22ei-sc-github-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3Ablack%3B%22%20height%3D%22%22%20width%3D%22%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M25%2010c-8.3%200-15%206.7-15%2015%200%206.6%204.3%2012.2%2010.3%2014.2.8.1%201-.3%201-.7v-2.6c-4.2.9-5.1-2-5.1-2-.7-1.7-1.7-2.2-1.7-2.2-1.4-.9.1-.9.1-.9%201.5.1%202.3%201.5%202.3%201.5%201.3%202.3%203.5%201.6%204.4%201.2.1-1%20.5-1.6%201-2-3.3-.4-6.8-1.7-6.8-7.4%200-1.6.6-3%201.5-4-.2-.4-.7-1.9.1-4%200%200%201.3-.4%204.1%201.5%201.2-.3%202.5-.5%203.8-.5%201.3%200%202.6.2%203.8.5%202.9-1.9%204.1-1.5%204.1-1.5.8%202.1.3%203.6.1%204%201%201%201.5%202.4%201.5%204%200%205.8-3.5%207-6.8%207.4.5.5%201%201.4%201%202.8v4.1c0%20.4.3.9%201%20.7%206-2%2010.2-7.6%2010.2-14.2C40%2016.7%2033.3%2010%2025%2010z%22%2F%3E%3C%2Fsvg%3E");
content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22ei-sc-github-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3Ablack%3B%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M25%2010c-8.3%200-15%206.7-15%2015%200%206.6%204.3%2012.2%2010.3%2014.2.8.1%201-.3%201-.7v-2.6c-4.2.9-5.1-2-5.1-2-.7-1.7-1.7-2.2-1.7-2.2-1.4-.9.1-.9.1-.9%201.5.1%202.3%201.5%202.3%201.5%201.3%202.3%203.5%201.6%204.4%201.2.1-1%20.5-1.6%201-2-3.3-.4-6.8-1.7-6.8-7.4%200-1.6.6-3%201.5-4-.2-.4-.7-1.9.1-4%200%200%201.3-.4%204.1%201.5%201.2-.3%202.5-.5%203.8-.5%201.3%200%202.6.2%203.8.5%202.9-1.9%204.1-1.5%204.1-1.5.8%202.1.3%203.6.1%204%201%201%201.5%202.4%201.5%204%200%205.8-3.5%207-6.8%207.4.5.5%201%201.4%201%202.8v4.1c0%20.4.3.9%201%20.7%206-2%2010.2-7.6%2010.2-14.2C40%2016.7%2033.3%2010%2025%2010z%22%2F%3E%3C%2Fsvg%3E");
}

header ul {
Expand All @@ -61,7 +61,7 @@ header ul li:before{
content: '';
width: 25px;
height: 25px;
background: url("data:image/svg+xml,%3Csvg%20id%3D%22ei-check-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3Agreen%3B%22%20height%3D%22%22%20width%3D%22%22%3E%3Cpath%20d%3D%22M25%2042c-9.4%200-17-7.6-17-17S15.6%208%2025%208s17%207.6%2017%2017-7.6%2017-17%2017zm0-32c-8.3%200-15%206.7-15%2015s6.7%2015%2015%2015%2015-6.7%2015-15-6.7-15-15-15z%22%2F%3E%3Cpath%20d%3D%22M23%2032.4l-8.7-8.7%201.4-1.4%207.3%207.3%2011.3-11.3%201.4%201.4z%22%2F%3E%3C%2Fsvg%3E");
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22ei-check-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3Agreen%3B%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20d%3D%22M25%2042c-9.4%200-17-7.6-17-17S15.6%208%2025%208s17%207.6%2017%2017-7.6%2017-17%2017zm0-32c-8.3%200-15%206.7-15%2015s6.7%2015%2015%2015%2015-6.7%2015-15-6.7-15-15-15z%22%2F%3E%3Cpath%20d%3D%22M23%2032.4l-8.7-8.7%201.4-1.4%207.3%207.3%2011.3-11.3%201.4%201.4z%22%2F%3E%3C%2Fsvg%3E");
left: -25px;
top: 0;
}
Expand All @@ -73,7 +73,7 @@ header ul li:last-child:before {
header ul li:last-child i {
position: absolute;
display: block;
content: url("data:image/svg+xml,%3Csvg%20id%3D%22ei-like-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3A%2346629E%3B%22%20height%3D%22%22%20width%3D%22%22%3E%3Cpath%20d%3D%22M40%2023.2c0-2.1-1.7-3.2-4-3.2h-6.7c.5-1.8.7-3.5.7-5%200-5.8-1.6-7-3-7-.9%200-1.6.1-2.5.6-.3.2-.4.4-.5.7l-1%205.4c-1.1%202.8-3.8%205.3-6%207V36c.8%200%201.6.4%202.6.9%201.1.5%202.2%201.1%203.4%201.1h9.5c2%200%203.5-1.6%203.5-3%200-.3%200-.5-.1-.7%201.2-.5%202.1-1.5%202.1-2.8%200-.6-.1-1.1-.3-1.6.8-.5%201.5-1.4%201.5-2.4%200-.6-.3-1.2-.6-1.7.8-.6%201.4-1.6%201.4-2.6zm-2.1%200c0%201.3-1.3%201.4-1.5%202-.2.7.8.9.8%202.1%200%201.2-1.5%201.2-1.7%201.9-.2.8.5%201%20.5%202.2v.2c-.2%201-1.7%201.1-2%201.5-.3.5%200%20.7%200%201.8%200%20.6-.7%201-1.5%201H23c-.8%200-1.6-.4-2.6-.9-.8-.4-1.6-.8-2.4-1V23.5c2.5-1.9%205.7-4.7%206.9-8.2v-.2l.9-5c.4-.1.7-.1%201.2-.1.2%200%201%201.2%201%205%200%201.5-.3%203.1-.8%205H27c-.6%200-1%20.4-1%201s.4%201%201%201h9c1%200%201.9.5%201.9%201.2z%22%2F%3E%3Cpath%20d%3D%22M16%2038h-6c-1.1%200-2-.9-2-2V22c0-1.1.9-2%202-2h6c1.1%200%202%20.9%202%202v14c0%201.1-.9%202-2%202zm-6-16v14h6V22h-6z%22%2F%3E%3C%2Fsvg%3E");
content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22ei-like-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3A%2346629E%3B%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20d%3D%22M40%2023.2c0-2.1-1.7-3.2-4-3.2h-6.7c.5-1.8.7-3.5.7-5%200-5.8-1.6-7-3-7-.9%200-1.6.1-2.5.6-.3.2-.4.4-.5.7l-1%205.4c-1.1%202.8-3.8%205.3-6%207V36c.8%200%201.6.4%202.6.9%201.1.5%202.2%201.1%203.4%201.1h9.5c2%200%203.5-1.6%203.5-3%200-.3%200-.5-.1-.7%201.2-.5%202.1-1.5%202.1-2.8%200-.6-.1-1.1-.3-1.6.8-.5%201.5-1.4%201.5-2.4%200-.6-.3-1.2-.6-1.7.8-.6%201.4-1.6%201.4-2.6zm-2.1%200c0%201.3-1.3%201.4-1.5%202-.2.7.8.9.8%202.1%200%201.2-1.5%201.2-1.7%201.9-.2.8.5%201%20.5%202.2v.2c-.2%201-1.7%201.1-2%201.5-.3.5%200%20.7%200%201.8%200%20.6-.7%201-1.5%201H23c-.8%200-1.6-.4-2.6-.9-.8-.4-1.6-.8-2.4-1V23.5c2.5-1.9%205.7-4.7%206.9-8.2v-.2l.9-5c.4-.1.7-.1%201.2-.1.2%200%201%201.2%201%205%200%201.5-.3%203.1-.8%205H27c-.6%200-1%20.4-1%201s.4%201%201%201h9c1%200%201.9.5%201.9%201.2z%22%2F%3E%3Cpath%20d%3D%22M16%2038h-6c-1.1%200-2-.9-2-2V22c0-1.1.9-2%202-2h6c1.1%200%202%20.9%202%202v14c0%201.1-.9%202-2%202zm-6-16v14h6V22h-6z%22%2F%3E%3C%2Fsvg%3E");
width: 25px;
height: 25px;
left: -25px;
Expand Down Expand Up @@ -131,33 +131,33 @@ pre.example:before {
}

.simple-inline:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22none%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22none%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

.color:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22red%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22red%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22red%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22red%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E");
}

.fill-stroke:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22brown%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22brown%22%2F%3E%3C%2Fsvg%3E");
}

.tag-name:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22gray%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22gray%22%2F%3E%3C%2Fsvg%3E");
}

.class-name:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22none%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22brown%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22none%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22brown%22%2F%3E%3C%2Fsvg%3E");
}

.color-group:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22red%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22%2300f%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22red%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22%2300f%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E");
}

.identifier:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22gray%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22brown%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22rgba(105%2C200%2C250%2C.2)%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22gray%22%2F%3E%3C%2Fsvg%3E");
}

.color-index:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22rgba(105%2C200%2C250%2C.2)%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22gray%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22brown%22%2F%3E%3C%2Fsvg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22rgba(105%2C200%2C250%2C.2)%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22gray%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22brown%22%2F%3E%3C%2Fsvg%3E");
}
6 changes: 3 additions & 3 deletions lib/svg_image.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class SVGImage
params = _.extend({}, @defaults, params)
svg = @template(params)
svg = @_svgoSync(svg) if @svgo
"url(\"data:image/svg+xml,#{encodeURIComponent(svg)}\")"
"url(\"data:image/svg+xml;charset=utf-8,#{encodeURIComponent(svg)}\")"

_svgoSync: (svgString) ->
result = false
Expand Down Expand Up @@ -69,8 +69,8 @@ class SVGImage
doc.setAttribute('style', "{{= #{_.map(['fill', 'stroke'], transform).join('+')} }}")

unless @svgAttributes.height || @svgAttributes.width
doc.setAttribute('height', "{{= it['[height]'] || it['[size]'] || '' }}")
doc.setAttribute('width', "{{= it['[width]'] || it['[size]'] || '' }}")
doc.setAttribute('height', "{{= it['[height]'] || it['[size]'] || '100%' }}")
doc.setAttribute('width', "{{= it['[width]'] || it['[size]'] || '100%' }}")

_parseNode: (node, result, callback, path='') ->
if node.childNodes
Expand Down