Clarification about symbol bounding box and viewBox
raiatea opened this issue · 0 comments
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:
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 ?