Differences in SVG and PDF

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts

MIT License

667 stars 104 forks source link

Differences in SVG and PDF #18

Closed psamim closed 7 years ago

psamim commented 7 years ago

Hi,

When I convert my svg file some shapes are not converted, and some unknown shapes are added.

I have my files at the repo below. For example lines inside the top rectangle are not drawn and two small black boxes appear at the corner of charts.

Output PDF file

https://github.com/psamim/svg2pdf.js-test

(npm install , ./node_modules/.bin/webpack ./entry.js bundle.js, then open index.html)

Thanks, Samim

ygra commented 7 years ago

The blob in the upper left of the chart is the tooltip which is within a group that's styled as display: none;.
The thick black lines seem to be lines that have stroke-opacity set as well as a clipping path applied. Neither seems to work.
The lines in the table at the top have a fractional stroke-width smaller than 1. Maybe that's a problem (all other lines that are present in the image seem to have a stroke-width greater than or equal to 1).

psamim commented 7 years ago

The problem with the lines seems to be because of "fill:none;" style. This document does not draw the line in pdf:

<svg
   xmlns="http://www.w3.org/2000/svg"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1" >
  <g >
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter"
       d="m 23.160319,131.71673 152.702371,0.75595"
       />
  </g>
</svg>

While this one is OK:

<svg
   xmlns="http://www.w3.org/2000/svg"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1" >
  <g >
    <path
       style="fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter"
       d="m 23.160319,131.71673 152.702371,0.75595"
       />
  </g>
</svg>

Both are fine in the browser. Is a bug?

yGuy commented 7 years ago

The problem is that svg2pdf.js does not yet support the CSS style declaration for the strokes in paths. Instead of node.getAttribute(name) we should be using the getAttribute(node, name, cssname) helper function, which also considers properties set via CSS.

HackbrettXXX commented 7 years ago

I was able to fix the lines of the table (was a bug while parsing the path "d" attribute) and the css attributes.

However, I can't get rid of the the black "shadow" below the graph lines, although the opacity is respected (as far as I can see). Maybe this is because there are several shadows stacked atop of each other and the transparency is handled differently by PDF.

yGuy commented 7 years ago

I'm closing this because the most obvious problems have been fixed with the latest release. Please open a new and more specific issue if you think that's necessary.