saveSvgAsPng
saveSvgAsPng copied to clipboard
CSS rule breaks export?
After importing the css for the material design icons I get the following error
import "@mdi/font/css/materialdesignicons.css";
There was an error loading the data URI as an image on the following SVG
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY nbsp " ">]><svg width="200" height="150" id="svg" version="1.1" viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"><![CDATA[
.container.grow-shrink-0 { -moz-box-flex: 0; flex-grow: 0; flex-shrink: 0; }
.container.fill-height { -moz-box-align: center; align-items: center; display: flex; flex-wrap: wrap; }
.container.fill-height > .row { -moz-box-flex: 1; flex: 1 1 100%; max-width: 100%; }
.container.fill-height > .layout { height: 100%; -moz-box-flex: 1; flex: 1 1 auto; }
.container.fill-height > .layout.grow-shrink-0 { -moz-box-flex: 0; flex-grow: 0; flex-shrink: 0; }
.container.grid-list-xs .layout .flex { padding: 1px; }
.container.grid-list-xs .layout:only-child { mar…
I tried to disable font rule detection
{
fonts: [],
}
Overriding css:
{
modifyCss() {
return "";
},
}
And
{
modifyStyle() {
return "";
},
selectorRemap() {
return "";
}
}
But that doesn't seem to help.
Going through the mdi font css file and removing parts I've been able to track the issue down to one rule that causes the issue:
.mdi-sign-direction-remove::before {
content: "\FFFE";
}
If I don't import the mdi font file but I just include the following rule it fails, both in Firefox and Chrome.
.someselector {
content: "\FFFE";
}
Chrome shows a longer error which included the one problematic rule decoded:
.someselector[data-v-469af010] { content: "￾"; }
It contained the full svg file, which I've attached: test.svg.txt
If I save that as a .svg file and open it in the browser there is no issue.