How to pick up glyphs in SVG fonts by their unicode attribute
<p>I'm trying to extract specific characters from SVG fonts designed for music engraving. Music fonts usually contain a large set of characters (> 3500) but I only need a small subset of them in order to cache glyphs in the compressed form for a quickly access.</p>

<p>A typical glyph node usually looks like that:</p>

<pre><code>&lt;glyph unicode="&amp;#xe050;" horiz-adv-x="621" d="..."&gt;
</code></pre>

<p>I therefore need to pick up required glyphs by their "unicode" attribute. I think it should be possible to do with querySelector or jQuery.</p>

<p>What I don't get at all is how the selector should look like. The following (very naive) selector doesn't work:</p>

<pre><code>var myGlyph = document.querySelector("glyph[unicode=e050]");
</code></pre>

<p>A further complication in this case is the fact that there are glyphs having more than one unicode codepoint:</p>

<pre><code>&lt;glyph unicode="&amp;#xe058;&amp;#xe880;" horiz-adv-x="671" d="..."&gt;
</code></pre>

<p>I undestand that I need to create the proper selector for the both cases. I'm a beginner in this area and don't fully understand the selector grammar in the existing documentation.</p>

<p>Could someone point me in the right direction?</p>

<p>Thank you very much in advance!</p>