prince seems to ignore the width and height of the outermost svg element and tries to perform some sort of auto-scaling to the whole svg file which seems to be a bit broken.

Elements that extend beyond the edge of the canvas are not clipped, prince just extends the canvas to include them. Not only is this incorrect behaviour but prince alsio gets it wrong as it seems to ignore the stroke width in bounding box calculation.

Any idea when a new beta will be available and if it fixes these SVG issues?

Here is a file showing the problem, changing the height of the first rect element will demonstrate the bug:

(angle brackets changed to square brackets because forum stripped all the xml)

[?xml version="1.0" encoding="UTF-8" standalone="no"?]
[svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="597.61432"
   height="420.47144"
   id="svg2"]
  [rect
     width="800.71429"
     height="800.57144"
     x="42.857143"
     y="123.79076"
     style="fill:#008bff;stroke:#ff0000;stroke-width:51.90000153;stroke-linecap:round;stroke-linejoin:round"
     id="rect2160" /]
  [rect
     width="172.55374"
     height="112.89952"
     x="-221.54988"
     y="379.3512"
     transform="matrix(0.8457978,-0.5335037,0.8871832,0.4614173,0,0)"
     style="stroke:#00dd00;stroke-width:13.14568424;stroke-linecap:round;stroke-linejoin:round;"
     id="rect2162" /]
[/svg]

If possible, please use the viewBox attribute on the <svg> element to specify the exact canvas that you want to render.

that does indeed fix the problem however inkscape does not seem to generate the viewBox attribute on its files so I will have to write a script to fix all my svg files.

Nothing I can't work around but please add it to the TODO list

Also, the opacity attribute is not yet supported, is that something that will be in the next beta?

Thanks!
Alex

Hi,

I've just started to look at SVG as well. I think it will prove to be amazingly useful for me when used as a page background.

I came across the problem with opacity as well. Is that something you will be looking at (Mike)?

Thanks

Peter

The viewport issue seems to be a problem for me as well. I want to have SVG elements that extend outside the page boundaries to allow the page to bleed correctly.

Is this a problem with Inkscape or a problem with Prince?

Alex, if you are still here, can you offer me any guidance as to how to manually put a viewport into the SVG file?

Mike, is there any possibility that Prince could work out the viewport? After all, Inkscape seems to know what the page boundaries are?

Regards

Peter

If you want to create a viewBox manually have a lok at the spec: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

essentially:

viewBox="tlx tly w h"

so for a box at position 5,5 with width 30 and height 40 you would use:

viewBox="5 5 30 40"

and don't forget to capitalise the "B"

Alex,

Thanks for your reply. I am making progress, but I can't get it to work 100%.

My SVG file is A4 (210mm x 297mm). The PDF produced is also A4.

The co-ordinate system in the SVG file seems to have 1mm =~ 3.53px (90dpi) although this does not seem to be stated anywhere in the SVG file itself.

The SVG already contains:

width="744.09448"
height="1052.3622"

So I have added:

viewBox="0 0 744.09448 1052.3622"


This fixes the top-left of the page to correctly exclude things outside the page, but the scaling on the rest of the page is wrong, so I am only seeing about 7/9 of the SVG file.

Is Inkscape using 90dpi but prince using 72dpi and scaling accordingly?

Regards

Peter

how are you including this svg file in your html file?

something like the following should force it to be the right size:

<object data="foo.svg" type="image/svg+xml" width="210mm" height="297mm"/>

I am including it as the background to the page box. i.e.

@page {
size: A4;
background-image: url(template1.svg);
}

ahh ok. perhaps you should try changing the width and height in the svg file to be "100%" (but leave the viewbox as it is) alternatively you could try to set the units in inkscape so that everything is in mm and actually formatted to A4 size... I haven't used inkscape in a while so I'm not sure how to do that, but you can probably find out.

Thanks Alex. I will experiment some more.

Peter

Mike,

Are you able to suggest a way to get my SVG scaled properly as a background image?

Inkscape assumes a fixed 90dpi but Prince seems to assume 72dpi. prince-background-image-resolution does not seem to work with SVG file.

inkscape does not let you change its assumed dpi. I have tried other SVG editors but they just bring different problems.

An immediate fix would be to divide all my coords by 1.25, but that's not really a long term solution.

Thanks

Peter

Hi Peter,

We'll take a look at this issue and see what we can work out. Perhaps we will need to alter the prince-background-image-resolution property to apply to SVG images as well. Would you be able to post an example of the attributes on the top-level <svg> element as generated by Inkscape? (eg. width, height, viewBox, any others?). And perhaps we'll take the discussion to this thread for clarity.

Best regards,

Michael