svg_utils icon indicating copy to clipboard operation
svg_utils copied to clipboard

Style of svg tag gets discarded.

Open Wrzlprmft opened this issue 4 years ago • 3 comments

I reduced a file generated by Batik to the following minimal example:

<svg style="stroke:black" width="1000" height="1000" >
<line style="fill:none" x1="900" x2="100" y1="100" y2="900" />
</svg>

As interpreted by Inkscape, this contains a visible line. I tried to use this as follows:

import svgutils.compose as sc
sc.Figure( "16in", "16in", sc.SVG("input.svg") ).save("output.svg")

This produces an output.svg with the following content:

<?xml version='1.0' encoding='ASCII' standalone='yes'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16.0in" viewBox="0 0 16.0in 16.0in" height="16.0in">
  <g>
    <g><line style="fill:none" x1="900" x2="100" y1="100" y2="900"/>
</g>
  </g>
</svg>

Here, the line is not visible anymore since the stroke:black style has gone.

I am not sure whether this is a problem with Batik not producing standard-conforming SVGs or a problem with SVG utils.

This issue seems related to it, but the issue as well as the answer are somewhat cryptic.

Wrzlprmft avatar Sep 15 '20 09:09 Wrzlprmft

hi, thanks for the report, indeed we do ignore the style attributes in svg tag, but I am not sure whether style is allowed in <svg> by the the standard.

btel avatar Sep 23 '20 09:09 btel

I am not sure whether style is allowed in <svg> by the the standard.

If I understand the specification correctly, it is: style is listed amongst the possible attributes of <svg>.

Wrzlprmft avatar Sep 23 '20 12:09 Wrzlprmft

Indeed, thanks for checking. We should probably copy the style attribute from svg tag to the enclosing <g> attribute, something like this should work:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16.0in" viewBox="0 0 16.0in 16.0in" height="16.0in">
  <g  style="stroke:black">
    <g><line style="fill:none" x1="900" x2="100" y1="100" y2="900"/>
</g>
  </g>
</svg>

https://jsfiddle.net/reco8wy9/1/

Would you like to submit a PR?

btel avatar Sep 23 '20 16:09 btel