Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarification about symbol bounding box and viewBox #287

Open
raiatea opened this issue May 8, 2024 · 0 comments
Open

Clarification about symbol bounding box and viewBox #287

raiatea opened this issue May 8, 2024 · 0 comments

Comments

@raiatea
Copy link

raiatea commented May 8, 2024

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant