Encoded characters shows ok on HTML but get literally shown on SVG

Question

I have a HTML page where a SVG element is created through javascript.

If I use encoded characters in the HTML portion of the page, like µ/m³, it's perfectly rendered as µ/m³

However, when I put the same text inside a SVG text element, the literal µ/m³ text is shown on the page.

The whole page encoding is UTF-8 and both files HTML and javascript are saved with UTF-8 encoding.

Any idea about what can be happening here?

EDIT: I add the full source code of the page once javascript has added the SVG part. The same effect is happening here, the page renders ok the encoded chars just before the svg part, but shows them encoded inside the svg code

    <head>
    <meta charset="utf-8">
    <title>Gráficas de calidad del aire</title>
    <link type="text/css" rel="stylesheet" href="../css/main.css">
 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="../js/airQuality.js" type="text/javascript"></script>
    </head><body><div id="menu"><ul><li id="ultima" class="menuEle">Última medición global</li><li id="so2" title="Dióxido de sulfuro" class="menuEle selected">SO2</li><li id="no" title="Óxido de nitrógeno" class="menuEle">NO</li><li id="no2" title="Dióxido de nitrógeno" class="menuEle">NO2</li><li id="co" title="Monóxido de carbono" class="menuEle">CO</li><li id="pm10" title="Partículas en suspensión de menos de 10 micrómetros" class="menuEle">PM10</li><li id="o3" title="Ozono" class="menuEle">O3</li></ul></div>
 <div id="mainContainer">µg/m³
  <svg class="chart" width="1000" height="600"><g transform="translate(50, 0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M-6,580.5H0.5V5.5H-6"></path><g class="tick" opacity="1" transform="translate(0,580.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,498.3571428571429)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">50</text></g><g class="tick" opacity="1" transform="translate(0,416.2142857142857)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">100</text></g><g class="tick" opacity="1" transform="translate(0,334.07142857142856)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">150</text></g><g class="tick" opacity="1" transform="translate(0,251.92857142857144)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">200</text></g><g class="tick" opacity="1" transform="translate(0,169.78571428571428)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">250</text></g><g class="tick" opacity="1" transform="translate(0,87.64285714285717)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">300</text></g><g class="tick" opacity="1" transform="translate(0,5.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">350</text></g></g><g transform="translate(0, 580)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M1000.5,6V0.5H50.5V6"></path><g class="tick" opacity="1" transform="translate(972.0568862275449,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(903.7934131736527,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Wed 13</text></g><g class="tick" opacity="1" transform="translate(835.5299401197605,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(767.2664670658683,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Tue 12</text></g><g class="tick" opacity="1" transform="translate(699.002994011976,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(630.7395209580839,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Mon 11</text></g><g class="tick" opacity="1" transform="translate(562.4760479041917,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(494.2125748502994,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Feb 10</text></g><g class="tick" opacity="1" transform="translate(425.9491017964072,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(357.68562874251495,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Sat 09</text></g><g class="tick" opacity="1" transform="translate(289.42215568862275,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(221.15868263473055,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Fri 08</text></g><g class="tick" opacity="1" transform="translate(152.89520958083833,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(84.6317365269461,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Thu 07</text></g></g><g><text class="verticales" x="-285.89285714285717" y="10" transform="rotate(-90)">&amp;#181;g/m&amp;#179;</text></g><g><path d="M1000,566.5285714285715L1000,566.5285714285715L994.311377245509,563.0785714285714L988.622754491018,560.6142857142858L982.9341317365269,567.0214285714286L977.245508982036,567.5142857142857L971.5568862275449,567.1857142857143L965.868263473054,567.6785714285714L960.1796407185628,567.0214285714286L954.4910179640718,564.7214285714285L948.8023952095808,567.1857142857143L943.1137724550898,572.2785714285715L937.4251497005988,574.0857142857143L931.7365269461078,574.25L926.0479041916168,573.5928571428572L920.3592814371258,573.4285714285714L914.6706586826347,573.4285714285714L908.9820359281438,573.4285714285714L903.2934131736527,573.4285714285714L897.6047904191618,571.7857142857143L891.9161676646706,570.1428571428571L886.2275449101797,571.7857142857143L880.5389221556886,571.7857142857143L874.8502994011976,571.7857142857143L869.1616766467066,571.7857142857143L863.4730538922156,570.1428571428571L857.7844311377246,566.8571428571429L852.0958083832335,568.5L846.4071856287425,566.8571428571429L840.7185628742515,566.8571428571429L835.0299401197605,566.8571428571429L829.3413173652694,563.5714285714286L823.6526946107784,561.9285714285714L817.9640718562874,561.9285714285714L812.2754491017964,563.5714285714286L806.5868263473053,568.5L800.8982035928144,568.5L795.2095808383233,570.1428571428571L789.5209580838324,568.5L783.8323353293413,568.5L778.1437125748504,568.5L772.4550898203593,568.5L766.7664670658683,566.8571428571429L761.0778443113772,565.2142857142857L755.3892215568862,563.5714285714286L749.7005988023952,565.2142857142857L744.0119760479042,566.8571428571429L738.3233532934132,565.2142857142857L732.6347305389222,565.2142857142857L726.9461077844311,570.1428571428571L721.2574850299401,570.1428571428571L715.5688622754491,568.5L709.8802395209581,568.5L704.1916167664671,571.7857142857143L698.502994011976,570.1428571428571L692.814371257485,566.8571428571429L687.1257485029939,566.8571428571429L681.437125748503,566.8571428571429L675.7485029940119,568.5L670.059880239521,570.1428571428571L664.3712574850299,571.7857142857143L658.682634730539,571.7857142857143L652.9940119760479,571.7857142857143L647.3053892215569,571.7857142857143L641.6167664670659,571.7857142857143L635.9281437125749,571.7857142857143L630.2395209580839,573.4285714285714L624.5508982035929,571.7857142857143L618.8622754491017,571.7857142857143L613.1736526946108,568.5L607.4850299401197,563.5714285714286L601.7964071856288,561.9285714285714L596.1077844311377,563.5714285714286L590.4191616766467,568.5L584.7305389221557,568.5L579.0419161676646,568.5L573.3532934131737,566.8571428571429L567.6646706586826,568.5L561.9760479041917,568.5L556.2874251497005,570.1428571428571L550.5988023952096,571.7857142857143L544.9101796407185,570.1428571428571L539.2215568862275,570.1428571428571L533.5329341317365,568.5L527.8443113772455,570.1428571428571L522.1556886227545,570.1428571428571L516.4670658682635,568.5L510.7784431137724,570.1428571428571L505.0898203592814,565.2142857142857L499.4011976047904,565.2142857142857L493.7125748502994,566.8571428571429L488.0239520958084,568.5L482.33532934131733,561.9285714285714L476.6467065868263,566.8571428571429L470.9580838323353,566.8571428571429L465.2694610778443,566.8571428571429L459.5808383233533,568.5L453.8922155688623,575.0714285714286L448.20359281437123,576.7142857142857L442.5149700598802,576.7142857142857L436.8263473053892,576.7142857142857L431.1377245508982,576.7142857142857L425.4491017964072,575.0714285714286L419.7604790419162,575.0714285714286L414.0718562874252,575.0714285714286L408.3832335329341,576.7142857142857L402.6946107784431,576.7142857142857L397.0059880239521,576.7142857142857L391.3173652694611,576.7142857142857L385.62874251497004,576.7142857142857L379.94011976047904,576.7142857142857L374.251497005988,576.7142857142857L368.56287425149696,576.7142857142857L362.87425149700596,576.7142857142857L357.18562874251495,576.7142857142857L351.49700598802394,576.7142857142857L345.80838323353294,575.0714285714286L340.11976047904193,575.0714285714286L334.43113772455087,573.4285714285714L328.74251497005986,570.1428571428571L323.05389221556885,570.1428571428571L317.36526946107784,570.1428571428571L311.67664670658684,568.5L305.98802395209583,568.5L300.2994011976048,568.5L294.61077844311376,566.8571428571429L288.92215568862275,563.5714285714286L283.23353293413174,565.2142857142857L277.54491017964074,565.2142857142857L271.85628742514973,568.5L266.16766467065867,566.8571428571429L260.47904191616766,570.1428571428571L254.79041916167665,573.4285714285714L249.10179640718562,573.4285714285714L243.4131736526946,571.7857142857143L237.7245508982036,573.4285714285714L232.0359281437126,571.7857142857143L226.34730538922156,571.7857142857143L220.65868263473055,570.1428571428571L214.97005988023952,568.5L209.28143712574848,570.1428571428571L203.59281437125748,570.1428571428571L197.90419161676647,570.1428571428571L192.21556886227543,570.1428571428571L186.52694610778443,570.1428571428571L180.83832335329342,566.8571428571429L175.1497005988024,566.8571428571429L169.46107784431138,563.5714285714286L163.77245508982037,558.6428571428571L158.08383233532933,557L152.39520958083833,565.2142857142857L146.7065868263473,566.8571428571429L141.01796407185628,563.5714285714286L135.32934131736528,563.5714285714286L129.64071856287424,565.2142857142857L123.95209580838323,568.5L118.26347305389221,570.1428571428571L112.5748502994012,568.5L106.88622754491018,565.2142857142857L101.19760479041916,555.3571428571429L95.50898203592814,568.5L89.82035928143712,568.5L84.1317365269461,570.1428571428571L78.44311377245509,570.1428571428571L72.75449101796407,568.5L67.06586826347305,566.8571428571429L61.377245508982035,568.5L55.68862275449102,570.1428571428571L50,570.1428571428571" stroke="blue" stroke-width="2" fill="none"></path></g><g><rect x="50" y="5" width="970" height="1" stroke="red"></rect></g></svg>
 </div>


</body>

We need to see the javascript I think, I suspect that's where your error is. — Robert Longson, Feb 14 '19 at 08:20
@RobertLongson On the javascript there is a hash that associates elements to units myArray = { "so": "µ/m³", .....}; And I use it to build the svg text node through d3.js with something like chart.add("text").attrib("blablabla", "blablabla").text(myArray[currentElement]); I'll try to post the relevant code when arrive at home. — Bardo, Feb 14 '19 at 10:41
I'm starting to think that this have something to do with the double quotes... on the previous message I enclosed the encoded text in double quotes (as it is on the javascript code) and so page has shown it as is, while on the html page it's not surrounded by the quotes and the entities are resolved. — Bardo, Feb 14 '19 at 10:43
Bypassing the question, why not Just use the characters µ/m³ directly? — Tom Blodget, Feb 14 '19 at 11:12
@TomBlodget those characters come from an external source on open data formats, and they come encoded as html entities. — Bardo, Feb 14 '19 at 12:13

score 1 · Accepted Answer · answered Feb 14 '19 at 18:33

You can use selection.html("µ/m³"). This causes the string to be parsed as XML, and the entities gets replaced by the characters they represent.

I know there is a paragraph in the d3 doc that says

Also, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html.

This seems to be a very old text and is no longer true, unless you want to support browsers like IE<=8 or Opera<=12. For all other browsers this works.

Encoded characters shows ok on HTML but get literally shown on SVG

1 Answers1