exupero / saveSvgAsPng

Save SVGs as PNGs from the browser.
MIT License
1.09k stars 362 forks source link

CSS rule breaks export? #236

Open peteruithoven opened 4 years ago

peteruithoven commented 4 years ago

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 "&#160;">]><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…
peteruithoven commented 4 years ago

I tried to disable font rule detection

{
        fonts: [],
}

Overriding css:

{
        modifyCss() {
          return "";
        },
}

And

{
        modifyStyle() {
          return "";
        },
        selectorRemap() {
          return "";
        }
}

But that doesn't seem to help.

peteruithoven commented 4 years ago

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";
}
peteruithoven commented 4 years ago

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.