Markers not showing

[biojet1]

Markers not showing

This svg:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <defs>
        <marker id="a" orient="auto" refX="0" refY="0" style="overflow:visible">
            <path d="m5.77 0-8.65 5V-5z" style="fill-rule:evenodd;fill:context-fill;stroke:context-stroke;stroke-width:1pt" transform="matrix(-.8 0 0 -.8 4.8 0)"/>
        </marker>
        <marker id="c" orient="auto" refX="0" refY="0" style="overflow:visible">
            <path d="M8.719 4.034-2.207.016 8.719-4.002c-1.746 2.372-1.736 5.618 0 8.036z" style="stroke:context-stroke;fill-rule:evenodd;fill:context-stroke;stroke-width:.625;stroke-linejoin:round" transform="rotate(180 -.55 0)scale(1.1)"/>
        </marker>
        <marker id="b" orient="auto" refX="0" refY="0" style="overflow:visible">
            <path d="M-3.805-3.959.544 0m-1.831-3.959L3.062 0M1.305-3.959 5.654 0m-9.459 4.178L.544.22m-1.831 3.958L3.062.22M1.305 4.178 5.654.22" style="fill:none;fill-rule:evenodd;stroke:context-stroke;stroke-width:.8;stroke-linecap:round" transform="scale(-1.2)"/>
        </marker>
    </defs>
    <path d="M0 0h120v120H0z" style="fill:#ff7f00;fill-opacity:1;stroke:navy;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:6,2;stroke-dashoffset:0"/>
    <path d="M32.351 11.987c-44.315 25.586.13 78.244 22.056 57.032 23.307-22.549 47.438-37.404 47.438 40.437" style="fill:none;stroke:navy;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:6,2;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#a);marker-mid:url(#b);marker-end:url(#c)"/>
</svg>

Using Inkscape rendered as png:

Using ReSVG rendered as png:

Using USVG renderd as svg:

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <defs/>
    <g id="layer1">
        <path id="rect3445" fill="#ff7f00" stroke="#000080" stroke-width="2" stroke-dasharray="6 2" d="M 0 0 L 120 0 L 120 120 L 0 120 Z"/>
        <path id="path2335" fill="none" stroke="#000080" stroke-width="2" stroke-dasharray="6 2" d="M 32.351086 11.987289 C -11.963883 37.572548 32.480263 90.23143 54.406696 69.01887 C 77.7141 46.470287 101.8453 31.614952 101.8453 109.45611"/>
        <g>
            <g transform="matrix(-1.7320508 1.0000001 -1.0000001 -1.7320508 32.351086 11.987289)">
                <g transform="matrix(-0.8 0 0 -0.8 4.8 0)">
                    <path fill="none" stroke="none" visibility="hidden" d="M 5.77 0 L -2.88 5 L -2.88 -5 L 5.77 0 Z"/>
                </g>
            </g>
            <g transform="matrix(1.4374194 -1.3906206 1.3906206 1.4374194 54.406696 69.01887)">
                <g transform="matrix(-1.2 0 0 -1.2 0 0)">
                    <path fill="none" stroke="none" visibility="hidden" d="M -3.8048675 -3.9585228 L 0.5435209 0"/>
                    <path fill="none" stroke="none" visibility="hidden" d="M -1.2866832 -3.9585228 L 3.0617054 0"/>
                    <path fill="none" stroke="none" visibility="hidden" d="M 1.3053582 -3.9585228 L 5.6537466 0"/>
                    <path fill="none" stroke="none" visibility="hidden" d="M -3.8048675 4.1775837 L 0.5435209 0.21974225"/>
                    <path fill="none" stroke="none" visibility="hidden" d="M -1.2866832 4.1775837 L 3.0617054 0.21974225"/>
                    <path fill="none" stroke="none" visibility="hidden" d="M 1.3053582 4.1775837 L 5.6537466 0.21974225"/>
                </g>
            </g>
            <g transform="matrix(-0.00000009 2 -2 -0.00000009 101.8453 109.45611)">
                <g transform="matrix(-1.1 0 -0 -1.1 -1.1 0)">
                    <path fill="none" stroke="none" visibility="hidden" d="M 8.718588 4.0337353 L -2.2072895 0.01601326 L 8.718589 -4.001708 C 6.9730897 -1.6296469 6.9831476 1.6157441 8.718588 4.0337353 Z"/>
                </g>
            </g>
        </g>
    </g>
</svg>

USVG converted the markers to \<path\/> and \<g\/> but sets fill="none" stroke="none" visibility="hidden"

Replacing stroke="none" to stroke="black" and visibility="hidden" to visibility="visible" and using ReSVG rendered as png:

[LaurenzV]

I think it's because refX and refY are not supported yet. resvg currently expects either of marker-start, marker-mid and marker-end to be available.

https://github.com/RazrFalcon/resvg/blob/22c4bf9eca6c57d6713d5ebedb9862dd80595cb9/crates/usvg-parser/src/marker.rs#L28-L41

[RazrFalcon]

You're using advanced SVG 2 features, they are barely supported by anyone:

And the reason you don't see markers is because we do not support context-fill and context-stroke (SVG 2 features). And while other implementation fallback to black, resvg, for some reason, fallbacks to hidden.

@LaurenzV we do support refX and refY.

[RazrFalcon]

Duplicate of #708

[yisibl]

As of Chrome 124, context-fill and context-stroke are supported.

This can be tested later in Chrome Canary. CL: https://chromium-review.googlesource.com/q/5322726