Forum How do I...?

SVG shape-rendering crispEdges PDF

dancotter
Consider a embedded SVG in HTML that has aligned rects such as:
<svg style="background-color: rgb(255,255,255);" width="18mm" height="18mm" viewbox="0 0 18 18">
	<rect width="18" height="18" fill-opacity="0.0"/>
	<rect x="0" y="0" width="1" height="1" style="fill:rgb(0,0,0);stroke-width:0;"/>
	<rect x="0" y="1" width="5" height="1" style="fill:rgb(0,0,0);stroke-width:0;"/>
	<rect x="0" y="2" width="1" height="1" style="fill:rgb(0,0,0);stroke-width:0;"/>
	<rect x="0" y="4" width="6" height="1" style="fill:rgb(0,0,0);stroke-width:0;"/>
	<rect x="0" y="5" width="1" height="1" style="fill:rgb(0,0,0);stroke-width:0;"/>
</svg>


In a browser (like Chromium) each rect will not always render at the same X pixel - causing jaggies down X=0 as it transitions between the rects.

This problem is fixed in a browser by adding 'shape-rendering="crispEdges"' to each rect.

However in a PDF generated by PrinceXML, even when cirspEdges is specified, the jaggies remain for all the PDF viewers I have tried?


mikeday
I'm not sure if it's possible to change this as PDF files are resolution-independent (the "P" in PDF stands for Portable) so the PDF viewer is responsible for making decisions about exactly how to rasterise paths. To guarantee crisp lines at every zoom level would require an equivalent of the shape-rendering attribute to be used in the PDF, but I'm not aware of PDF having any drawing commands for that.