w3c / smufl

Standard Music Font Layout
https://w3c.github.io/smufl/latest/
215 stars 35 forks source link

Clarification about symbol bounding box and viewBox #287

Open raiatea opened 6 months ago

raiatea commented 6 months ago

In the context of rendering the SVG output of Verovio with SharpVectors (Windows, C#, WPF), there is an issue with the SMuFL font Leipzig being clipped.

Correct rendering in a webbrowser: Other

SharpVectors: SharpVectors

I see two issues: the font definition, and the renderer, which is investigated. Concerning the font, I'm wondering if it defines correctly the viewBox of a symbol.

Example for the glyph E0A4

The Leipzig font defines:

  <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>

and <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>

Its looks like there is a mismatch between the viewBox and the bounding box of the shape that can only be clipped. The attribute overflow=visible would avoid a clipping, but SharpVectors doesn't seem to support it, or at least in some version of outdated SVG specification, hence the shape is clipped.

A simple SVG generated by Verovio (edited with only that glyph):

<?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>

So my question is : shouldn't the viewBox fit exactly the shape, and not require overflow=visible for correct rendering ?

Also, which tool is used to edit a font like Leipzig ?