Svg font does not support <use> in Safari

nanoemoji --color_format=picosvg

The svg file:

<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle fill="#F49924" cx="100" cy="100" r="100" />
    <ellipse fill="#7E4418" cx="59.545" cy="71.818" rx="15" ry="21.818" />
    <ellipse fill="#7E4418" cx="140.455" cy="71.818" rx="15" ry="21.818" />
</svg>

TTX file:

 <SVG>
    <svgDoc endGlyphID="2" startGlyphID="2">
      <![CDATA[<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs/><g id="glyph2" transform="matrix(6 0 0 6 0 -950)"><path d="M200,100 A100 100 0 1 1 0,100 A100 100 0 1 1 200,100 Z" fill="#F49924"/><path d="M74.545,71.818 A15 21.818 0 1 1 44.545,71.818 A15 21.818 0 1 1 74.545,71.818 Z" fill="#7E4418" id="glyph2::1"/><use href="#glyph2::1" x="80.91"/></g></svg>]]>
    </svgDoc>
  </SVG>

I think Safari does not support <use href="#glyph2::1" x="80.91"/>, so the ellipse on the right is missing.

Expect:

Keynote

[litherum]

I haven’t debugged this, so I don’t know if there are multiple problems with this content, but I can say right off the bat that you need to add the xlink namespace, and qualify the href attribute, as per the SVG 1.1 spec. Try this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs/>
    <g id="glyph2" transform="matrix(6 0 0 6 37.5 -950)">
        <path d="M200,100 A100 100 0 1 1 0,100 A100 100 0 1 1 200,100 Z" fill="#F49924"/>
        <path d="M74.545,71.818 A15 21.818 0 1 1 44.545,71.818 A15 21.818 0 1 1 74.545,71.818 Z" fill="#7E4418" id="glyph2::1"/>
        <use xlink:href="#glyph2::1" x="80.91"/>
    </g>
</svg>

You can see an example of this working correctly in the SVG 1.1 spec: https://www.w3.org/TR/SVG11/images/struct/Use01.svg

So I have to conclude that <use> elements are currently not supported in Safari when they are present in an svg document embedded in OT-SVG font.

We do support <use> elements in OT-SVG.

[yisibl]

Well, that’s ok, but the position is wrong. I think we still need to use picosvg to adjust the position.(Safari)