Corrupted rendering of Verovio SVG output

[raiatea]

Hello,

Issue: SVG files are not correctly rendered in SharpVectors, but are correctly rendered by any online SVG viewer in a webbrowser.

The SVG files are produced by Verovio a C++ music score rendering library (https://github.com/rism-digital/verovio).

Process: Verovio MEI file -> SVG file -> SharpVectors SVG rendering

• Last github releases of SharpVectors and Verovio are build with VS2022.

• Verovio has a test suite, I attached the first sample accid-001, the Verovio SVG output accid-001.zip

• Screenshots of renderings of SVG by an online SVG viewer and WpfSvgTestBox:

Online viewer in webbrowser:

WpfSvgTestBox:

[raiatea]

• Reduced to a single primitive:

SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="2100px" height="2970px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mei="http://www.music-encoding.org/ns/mei" overflow="visible">
   <desc>Engraved by Verovio 4.1.0[undefined]</desc>
   <defs>
      <symbol id="E0A4-1hmocrk" viewBox="0 0 1000 1000" overflow="inherit">
         <path transform="scale(1,-1)" d="M0 -39c0 68 73 172 200 172 c66 0 114 -37 114 -95 c0 -84 -106 -171 -218 -171  c-64 0 -96 30 -96 94z" />
      </symbol>
   </defs>
   <svg class="definition-scale" color="black" viewBox="0 0 21000 29700">
      <use xlink:href="#E0A4-1hmocrk" x="1283" y="1553" height="720px" width="720px" />
   </svg>
</svg>

XAML:

<DrawingGroup xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:svg="http://sharpvectors.codeplex.com/runtime/">
  <DrawingGroup svg:SvgLink.Key="_SvgDrawingLayer">
    <DrawingGroup.ClipGeometry>
      <RectangleGeometry Rect="0,0,2100,2970" />
    </DrawingGroup.ClipGeometry>
    <DrawingGroup.Transform>
      <TranslateTransform X="-0" Y="133" />
    </DrawingGroup.Transform>
    <DrawingGroup>
      <DrawingGroup.ClipGeometry>
        <RectangleGeometry Rect="0,0,2100,2970" />
      </DrawingGroup.ClipGeometry>
      <DrawingGroup svg:SvgObject.UniqueId="95fac669-5d52-4f5a-9c01-5096778d3c89">
        <DrawingGroup.Transform>
          <ScaleTransform ScaleX="0.1" ScaleY="0.1" />
        </DrawingGroup.Transform>
        <DrawingGroup Transform="1,0,0,1,1283,1553" svg:SvgObject.UniqueId="20c3ac8e-2eb1-4565-a08e-afff556e2325">
          <DrawingGroup>
            <DrawingGroup.ClipGeometry>
              <RectangleGeometry Rect="0,0,720,720" />
            </DrawingGroup.ClipGeometry>
            <DrawingGroup svg:SvgObject.Id="E0A4-1hmocrk" svg:SvgObject.UniqueId="f943655e-67f7-4e05-8096-ecd599a63f0d">
              <DrawingGroup.ClipGeometry>
                <RectangleGeometry Rect="0,-200,1000,1000" />
              </DrawingGroup.ClipGeometry>
              <DrawingGroup.Transform>
                <TransformGroup>
                  <ScaleTransform ScaleX="0.72" ScaleY="0.72" />
                  <TranslateTransform X="0" Y="144" />
                </TransformGroup>
              </DrawingGroup.Transform>
              <DrawingGroup Transform="1,0,-0,-1,0,0" svg:SvgObject.UniqueId="0527e871-955f-401e-8548-f9d547806406">
                <GeometryDrawing Brush="#FF000000">
                  <GeometryDrawing.Geometry>
                    <PathGeometry FillRule="Nonzero" Figures="M0,-39C0,29 73,133 200,133 266,133 314,96 314,38 314,-46 208,-133 96,-133 32,-133 0,-103 0,-39z" />
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingGroup>
            </DrawingGroup>
          </DrawingGroup>
        </DrawingGroup>
      </DrawingGroup>
    </DrawingGroup>
  </DrawingGroup>
</DrawingGroup>

The full shape reappears when
moving from the startingpoint 0,-173
or
changing in SVG viewBox="0 0 1000 1000" to viewBox="0 -200 1000 1000"

[raiatea]

I edit with post to avoid fragmentation of information.

1) Font SMuFL

Maybe there is an issue with the font used by Verovio specified by SMuFL.
The font Leipzig has the glyph E0A4 defined as:

  <g c="E0A4" x="0.0" y="-133.0" w="314.0" h="266.0" h-a-x="314" n="noteheadBlack">
    <a n="cutOutNW" x="0.14" y="0.24" />
    <a n="cutOutSE" x="1.09" y="-0.24" />
    <a n="stemDownNW" x="-0.0" y="-0.16" />
    <a n="stemUpSE" x="1.26" y="0.16" />
  </g>

The bounding box is (0, -133, 314, 266).

The glyph path is defined as:
<symbol id="E0A4" viewBox="0 0 1000 1000" overflow="inherit"><path transform="scale(1,-1)" d="M0 -39c0 68 73 172 200 172c66 0 114 -37 114 -95c0 -84 -106 -171 -218 -171c-64 0 -96 30 -96 94z" /></symbol>
The viewBox is (0, 0, 1000, 1000).

It seems there is a mismatch between the bounding box and the viewBox. The viewBox can only clip the shape.
If the viewBox is set to the same boundaries as the bounding box (0, -133, 314, 266), the shape is not clipped when rendered in WpfSvgTextBox.

Using Fontforge to edit the font, I see that it is how it is defined, with paths in positive and negative Ys.
The glyph origin is just where the path is clipped.

So maybe an easier way is to adapt the renderer.

2) Overflow attribute

The issue may come from the handling of the overflow attribute.

The header of Verovio SVG ouput has overflow set to visible.
<svg ... overflow="visible">
<symbol ... viewBox="0 0 1000 1000" overflow="inherit">

I understand the paths outside the viewBox of a symbol should not be clipped.

Documentation about overflow at mozilla.org

This feature is not widely implemented yet.
If it has a value of visible, the attribute has no effect (i.e., a clipping rectangle is not created).

But the rendering in WpfSvgTextBox clips the shape.

I looked at the source code. In WpfRendering.cs, line 330 and 353 are comments about outdated SVG specification of overflow. It looks complex to implement.

[paulushub]

@raiatea Thanks for researching this issue.
Currently, I think the overflow property is not supported in SharpVectors. I will look into it.
Having failed to implement most of the SVG 1.1 features, Mozilla is focusing and documenting
only the SVG 2 features, which are still in draft state.