search

RazrFalcon / resvg

An SVG rendering library.
Mozilla Public License 2.0
2.61k stars 215 forks source link

Rasterization errors on small details #503

Open Azervu opened 2 years ago

Azervu commented 2 years ago

This test image has some rasterization issues

<?xml version="1.0" encoding="UTF-8"?>
<svg width="15" height="15" version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
 <path d="m3.875 1v2.875h-2.875v1.25h2.875v2.875h1.25v-2.875h2.875v-1.25h-2.875v-2.875z" fill="#ff0" stop-color="#000000"/>
 <path d="m7.5 7.5h5v5h-5z" fill="none" stop-color="#000000" stroke="#f00" stroke-linecap="square"/>
</svg>

Result(scale up x8):

test_resvg

Inkscape for comparison: test_inkscape

RazrFalcon commented 2 years ago

Seems like a tiny-skia/Skia bug to me.

This is how Skia itself renders it:

image

A bit different, but still not quite right.

You can actually mitigate it by removing stroke-linecap="square"

I will keep this bug open, but it has nothing to do with resvg, bug rather with tiny-skia. See https://github.com/RazrFalcon/tiny-skia/issues/44

Azervu commented 2 years ago

Can confirm the workaround works on the red one, the yellow one hovever turned out to be an aliasing issue.

Edit: issue https://github.com/RazrFalcon/tiny-skia/issues/8 would fix this

RazrFalcon commented 2 years ago

Are you sure it relates to analytical anti-aliasing? In Skia, it triggered only in specific cases and I'm not sure it affects your case.

Azervu commented 2 years ago

The issue is the path intersecting the sampling points

<svg xmlns="http://www.w3.org/2000/svg" width="23" height="13">
    <path d="M3.876 1v2.876H1v1.248h2.876V8h1.248V5.124H8V3.876H5.124V1z" fill="#f00"/>
    <path d="M10.875 5v2.875H8v1.25h2.875V12h1.25V9.125H15v-1.25h-2.875V5z" fill="#ff0"/>
    <path d="M17.874 1v2.874H15v1.252h2.874V8h1.252V5.126H22V3.874h-2.874V1z" fill="#0f0"/>
</svg>

test The red cross is slightly smaller, the green slightly larger.