Feature request: Support css shape-rendering

[RAlfoeldi]

Rendered SVG images are not anti aliased. I would assume (hope) that the underlying The Batik implementation supports shape-rendering (https://xmlgraphics.apache.org/batik/status.html) and that this would "only" require routing the css property to Batik.

My impression is that at the moment shape-rendering is actively filtered and removed:

com.openhtmltopdf.css-parse WARNING:: (null#inline_style_1) shape-rendering is an unrecognized CSS property at line 27. Ignoring declaration.

[rototor]

Batik is in minimal maintenance mode since 2007, it is very likely that it does not know it. Openhtmltopdf uses Batik with my pdfboxgraphics2d adapter to render the SVG as vector shapes in the PDF(if possible - if you use transparency or filters everything becomes a low quality RBG image…). So how those shapes are rendered is fully depending on your PDF viewer or printer. You should compare different PDF viewers, you might see some quality differences in the rendering. I don‘t know of any way to specify the rendering quality in PDF.

[RAlfoeldi]

Ok, maybe the original post wasn't clear about this. Rendering SVGs as PDFs works fine. Anti-aliasing does it's thing and all shapes look great. This is probably just the PDF viewer doing it's thing correctly.

The problem only comes up when rendering rasterized images, i.e. jpg, png, etc.

Batik seems to understand the shape-rendering property as, if it is included in the SVG file itself, the resulting image is rendered correctly. The only problem with that is that all graphic assets used during rendering have to be manually edited beforehand instead of just applying a CSS property to the surrounding div.

The following svg file works. Notice the shape-rendering="geometricPrecision"

<svg preserveAspectRatio="xMinYMin" width="100%" height="100%" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
    <g fill="none" fill-rule="evenodd">...

works and renders to

The exact same svg file without shape-rendering="geometricPrecision"

<svg preserveAspectRatio="xMinYMin" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
    <g fill="none" fill-rule="evenodd">...

results in a pixealted image

As most available svg files come without a shape-rendering property regardless of stock or custom made we at the moment have to manually edit all svg file to include shape-rendering. It would be cool if we could use css in an enclosing

like

/* This property is ignored by openHtmlToPdf at the moment, we therefore have to include
   shape-rendering="geometricPrecision" in the svgs themselves. As soon as openHtmlToPdf allows this property
   (https://github.com/danfickle/openhtmltopdf/issues/692) we can stop editing svg images before use.*/
.aliased svg {
    shape-rendering: geometricPrecision;
}

As mentioned in the op, this css property is remove by openHtmlToPdf

com.openhtmltopdf.css-parse WARNING:: (null#inline_style_1) shape-rendering is an unrecognized CSS property at line 30. Ignoring declaration.

[syjer]

@RAlfoeldi FYI, I've submitted a PR

[RAlfoeldi]

Thank you very much. Greatly appreciated!