<div dir="ltr">Hoi Reinier,<div><br></div><div>If you add an attribute called "type" to a note, this attribute will be converted to a class name in the rendered SVG using verovio.</div><div><br></div><div>Example:</div><div><br></div><div><div><font color="#9900ff"><note xml:id="note-L3F1" type="</font><font color="#ff00ff"><b>highlight</b></font><font color="#9900ff">" dur="4" oct="5" pname="f" accid="s"></font></div><div><font color="#9900ff">     <artic xml:id="artic-L3F1" artic="stacc acc" /></font></div><div><font color="#9900ff"></note></font></div><div><br></div><div>representing the note:</div><div><img src="cid:ii_15f3540cf10eadc9" alt="Inline images 1" width="93" height="74" style="margin-right: 0px;"><br></div><div>I added the attribute type="highlight" to the note.  When converted to SVG using verovio:</div><div><br></div><div><div><font color="#0000ff">       <g class="note </font><b><font color="#ff00ff">highlight</font></b><font color="#0000ff">" id="note-L3F1"></font></div><div><font color="#0000ff">        <</font><b><font color="#ff9900">use</font></b><font color="#0000ff"> xlink:href="#E0A4" x="1094" y="1400" height="720px" width="720px" /></font></div><div><font color="#0000ff">        <g class="</font><b><font color="#ff9900">stem</font></b><font color="#0000ff">" id="stem-0000000078965084"></font></div><div><font color="#0000ff">         <rect x="1094" y="1422" height="608" width="20" /></font></div><div><font color="#0000ff">        </g></font></div><div><font color="#0000ff">        <g class="</font><b><font color="#ff9900">accid</font></b><font color="#0000ff">" id="accid-0000001530885643"></font></div><div><font color="#0000ff">         <use xlink:href="#E262" x="825" y="1400" height="720px" width="720px" /></font></div><div><font color="#0000ff">        </g></font></div><div><font color="#0000ff">        <g class="</font><b><font color="#ff9900">artic</font></b><font color="#0000ff">" id="artic-L3F1"></font></div><div><font color="#0000ff">         <g class="</font><b><font color="#ff9900">articPart</font></b><font color="#0000ff">" id="artic-part-</font><wbr><font color="#0000ff">0000000021272942"></font></div><div><font color="#0000ff">          <use xlink:href="#E4A2" x="1183" y="1265" height="514px" width="514px" /></font></div><div><font color="#0000ff">         </g></font></div><div><font color="#0000ff">         <g class="</font><b><font color="#ff9900">articPart</font></b><font color="#0000ff">" id="artic-part-</font><wbr><font color="#0000ff">0000001052050792"></font></div><div><font color="#0000ff">          <use xlink:href="#E4A0" x="1119" y="1172" height="514px" width="514px" /></font></div><div><font color="#0000ff">         </g></font></div><div><font color="#0000ff">        </g></font></div><div><font color="#0000ff">       </g></font></div></div><div><br></div><div>Notice that the note has an added class "highlight" which comes from note@type in the MEI data.  This class can be used to select the note or parts of the note for manipulation with CSS.  </div><div><br></div><div>Also notice the internal structure of the SVG note.  The notehead is given first use element and is not wrapped in a separate g element like the other pieces.  The notehead is given by the first <use> element:</div><div><div><font color="#0000ff">        <</font><b><font color="#ff9900">use</font></b><font color="#0000ff"> xlink:href="#E0A4" x="1094" y="1400" height="720px" width="720px" /></font></div></div><div class="gmail_extra"><br></div></div><div class="gmail_extra">So the CSS code to highlight only the notehead would be:</div><div class="gmail_extra"><br></div><div class="gmail_extra"><font color="#38761d"><style></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight > use {</font></div><div class="gmail_extra"><font color="#38761d">       fill: chocolate;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"></style></font></div><div class="gmail_extra"><img src="cid:ii_15f355904e621460" alt="Inline images 1" width="163" height="117" style="margin-right: 0px;"><br></div><div class="gmail_extra">The "<font color="#38761d">></font>" in the selector </div><div class="gmail_extra"><font color="#38761d">    g.note.highlight > use</font></div><div class="gmail_extra">means to select all use elements which are direct children of g.note.highlight (not any of the grandchildren or later descendants).</div><div class="gmail_extra"><br class="gmail-Apple-interchange-newline">Note in particular that in order to use CSS on the SVG image, the SVG must be directly in the DOM (HTML code) and not loaded as an image with <img>.<br></div><div class="gmail_extra"><br></div><div class="gmail_extra">Here is a more complicated stylesheet to highlight all of the components of the note:</div><div class="gmail_extra"><br></div><div class="gmail_extra"><div class="gmail_extra"><font color="#38761d"><style><div id="gmail_4r2gdgovlun3" style="display:inline-block"></div></font></div><div class="gmail_extra"><font color="#38761d">@namespace xlink '<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>';</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight > use {</font></div><div class="gmail_extra"><font color="#38761d">        fill: chocolate;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.accid {</font></div><div class="gmail_extra"><font color="#38761d">        fill: limegreen;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.stem {</font></div><div class="gmail_extra"><font color="#38761d">        fill: orange;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.artic {</font></div><div class="gmail_extra"><font color="#38761d">        fill: red;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight use[xlink|href="#E4A2"] {</font></div><div class="gmail_extra"><font color="#38761d">        fill: hotpink;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d"></style></font></div><div class="gmail_extra"><br></div><div class="gmail_extra">which produces:</div><div class="gmail_extra"><br></div><div class="gmail_extra"><img src="cid:ii_15f356d61203da6b" alt="Inline images 4" width="277" height="212" style="margin-right: 0px;"><br></div><div class="gmail_extra"><br></div><div class="gmail_extra">The last selector:</div><div class="gmail_extra"><span style="color:rgb(56,118,29)">    g.note.highlight use[xlink|href="#E4A2"]</span></div></div><div class="gmail_extra">is used to specifically select staccatos on the highlighted note using the SMuFL codepoint for staccatos.  This selector requires loading the xlink namespace into the stylesheet:</div><div class="gmail_extra">      <span style="color:rgb(56,118,29)">@namespace xlink '<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>';</span></div><div><span style="color:rgb(56,118,29)"><br></span></div><div class="gmail_extra">The stem is shown visually above the notehead, so the notehead may be moved in the future:</div><div class="gmail_extra">     <a href="https://github.com/rism-ch/verovio/issues/520">https://github.com/rism-ch/verovio/issues/520</a></div><div class="gmail_extra"><br></div><div class="gmail_extra">Beams and slurs/ties would require more coloring for the stroke attribute. </div><div class="gmail_extra"><br></div><div class="gmail_extra">Here is the full HTML example (with the embedded SVG):</div><div class="gmail_extra"><br></div><div class="gmail_extra"><div class="gmail_extra"><font color="#b45f06"><html></font></div><div class="gmail_extra"><font color="#b45f06"><head></font></div><div class="gmail_extra"><font color="#b45f06"><title>Test Notes</title></font></div><div class="gmail_extra"><font color="#b45f06"></head></font></div><div class="gmail_extra"><font color="#b45f06"><body></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#38761d"><style></font></div><div class="gmail_extra"><font color="#38761d">@namespace xlink '<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>';</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight > use {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre">        </span>fill: chocolate;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.accid {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre">        </span>fill: limegreen;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.stem {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre"> </span>fill: orange;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.artic {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre">   </span>fill: red;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight use[xlink|href="#E4A2"] {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre">    </span>fill: hotpink;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d"></style></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#0000ff"><svg width="2100.00px" height="2970.00px" version="1.1" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" xmlns:xlink="<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>" overflow="visible"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">       </span><desc>Engraved by Verovio 2.0.0-dev-ae70647-dirty</desc></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre"> </span><defs></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">         </span><symbol id="E050" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                    </span><path transform="scale(1,-1)" d="M441 -245c-23 -4 -48 -6 -76 -6c-59 0 -102 7 -130 20c-88 42 -150 93 -187 154c-26 44 -43 103 -48 176c-4 60 11 123 44 189c29 57 65 106 110 148s96 85 153 127c-3 16 -8 46 -13 92c-4 43 -5 73 -5 89c0 117 16 172 69 257c34 54 64 82 89 82c21 0 43 -30 69 -92 s39 -115 41 -159c2 -120 -19 -173 -67 -256c-13 -20 -63 -90 -98 -118c-13 -9 -25 -19 -37 -29l31 -181c8 1 18 2 28 2c58 0 102 -12 133 -35c59 -43 92 -104 98 -184c11 -135 -80 -229 -180 -270c8 -57 17 -110 25 -162c5 -31 6 -58 6 -80c0 -30 -5 -53 -14 -70 c-35 -64 -88 -99 -158 -103c-42 -3 -83 6 -124 26c-50 24 -77 59 -80 105c-2 34 5 63 20 87c18 28 45 42 79 44c51 4 99 -40 103 -87c4 -56 -30 -94 -105 -115c17 -24 51 -36 102 -36c62 0 116 43 140 85c9 16 13 41 13 74c0 20 -1 42 -5 67c-8 53 -18 106 -26 159zM461 939 c-95 0 -135 -175 -135 -286c0 -24 2 -48 5 -71c50 39 92 82 127 128c43 57 63 106 60 148c-4 54 -23 82 -57 81zM406 119l54 -326c80 27 116 88 109 184c-7 99 -62 146 -163 142zM382 117c-74 -2 -132 -50 -128 -127c2 -46 43 -99 75 -115c-3 -2 -7 -5 -10 -10 c-70 33 -116 88 -123 172c-5 73 42 135 88 170c23 17 49 29 78 36l-29 170c-21 -13 -52 -37 -92 -73c-50 -44 -86 -84 -109 -119c-49 -75 -71 -140 -67 -195c5 -68 35 -127 93 -176s125 -73 203 -73c25 0 50 3 75 9c-19 111 -36 221 -54 331z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">         </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">              </span><symbol id="E0A4" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                    </span><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" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">              </span><symbol id="E262" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                    </span><path transform="scale(1,-1)" d="M136 186v169h17v-164l44 14v-91l-44 -14v-165l44 12v-91l-44 -13v-155h-17v150l-76 -22v-155h-17v149l-43 -13v90l43 14v167l-43 -14v92l43 13v169h17v-163zM60 73v-167l76 22v168z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">              </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">              </span><symbol id="E4A2" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                    </span><path transform="scale(1,-1)" d="M0 45c0 13.333 4.33301 24.667 13 34s19.333 14.333 32 15c14 0 25.667 -4 35 -12s14.333 -19 15 -33c0 -13.333 -4.33301 -24.667 -13 -34s-19.333 -14.333 -32 -15c-14 0 -25.667 4 -35 12s-14.333 19 -15 33z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">          </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">              </span><symbol id="E4A0" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                    </span><path transform="scale(1,-1)" d="M0 236l347 -119l-347 -117v33l252 84l-252 86v33z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">               </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">      </span></defs></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">        </span><style type="text/css">g.page-margin{font-family:Times;} g.tempo{font-weight:bold;} g.dir, g.dynam{font-style:italic;} g.label{font-weight:normal;}</style></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">    </span><svg class="definition-scale" viewBox="0 0 21000 29700"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">           </span><g class="page-margin" transform="translate(500, 500)"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                    </span><g class="system" id="system-0000000147693057"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                            </span><g class="section boundaryStart" id="section-0000000211317838" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                          </span><g class="measure" id="measure-L2"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                        </span><g class="staff" id="staff-L2F1N1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                </span><path d="M0 1400 L1829 1400" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                               </span><path d="M0 1580 L1829 1580" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                               </span><path d="M0 1760 L1829 1760" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                               </span><path d="M0 1940 L1829 1940" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                               </span><path d="M0 2120 L1829 2120" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                               </span><g class="clef"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                     </span><use xlink:href="#E050" x="90" y="1940" height="720px" width="720px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                              </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                           </span><g class="layer" id="layer-L2F1N1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                        </span><g class="note highlight" id="note-L3F1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                          </span><g class="stem" id="stem-0000000078965084"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                        </span><rect x="1094" y="1422" height="608" width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                             </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                           </span><use xlink:href="#E0A4" x="1094" y="1400" height="720px" width="720px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                            </span><g class="accid" id="accid-0000001530885643"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                      </span><use xlink:href="#E262" x="825" y="1400" height="720px" width="720px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                             </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                           </span><g class="artic" id="artic-L3F1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                  </span><g class="articPart" id="artic-part-0000000021272942"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                             </span><use xlink:href="#E4A2" x="1183" y="1265" height="514px" width="514px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                    </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                   </span><g class="articPart" id="artic-part-0000001052050792"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                             </span><use xlink:href="#E4A0" x="1119" y="1172" height="514px" width="514px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                                    </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                           </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                   </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                           </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                   </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                   </span><g class="barLineAttr" id="bline-0000001518569483"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                                </span><path d="M1664 1400 L1664 2120" stroke="#000000" stroke-width="30" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                            </span><path d="M1784 1400 L1784 2120" stroke="#000000" stroke-width="90" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                                    </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                           </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                           </span><g class="boundaryEnd section-0000000211317838" id="bdend-0000001273392098" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">                     </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">           </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre">   </span></svg></font></div><div class="gmail_extra"><font color="#0000ff"></svg></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#b45f06"></body></font></div><div><br></div><div><br></div><div><br></div></div><div class="gmail_extra"><br></div><div class="gmail_extra"><br></div></div>