SVG text element with Unicode characters

Question

First - a short description of a problem. I write a JavaScript function to put some text label's in SVG canvas. Here it is:

function set_label(x,y,title)
{
 var newTitle = document.createElementNS(svgNS,"text");
 newTitle.setAttributeNS(null,"x",x);
 newTitle.setAttributeNS(null,"y",y);
 newTitle.setAttributeNS(null,"font-size","17px");
 newTitle.setAttributeNS(null,"font-family","WinGreek");      
 var textNode = document.createTextNode(title);
 newTitle.appendChild(textNode);
 document.getElementById("viewport").appendChild(newTitle);   
}

I must use Greek font due to my project points. So, I call function:

set_label (10,50,'Qitos')

this will display Ktitos label - no problem.

But - when i try to call like this:

set_label (10,50,'Qam&#218;raj')

or even worse:

set_label (10,50,'&#920;&#945;&#961;&#963;&#945;&#957;&#948;&#945;&#955;&#945;')

this must display Θαρσανδαλα title formed all from special characters - a problem accrue - utf-8 symbol appear like i write it - with code :(

After some research here in other similar question's, i find that if I convert UTF-8 code to ESC sequence, like \U00B0 - this must solve that problem, but... - I cant figure it how to do this and - how to do that if special character is in middle of string - like second example

I relabelled this as unicode instead of UTF-8 since it has nothing to do with UTF-8. There is no such thing as a UTF-8 symbol. Unicode defines a mapping between integers and symbols. UTF-8 defines a mapping between integers and byte sequences. See http://www.differencebetween.net/technology/difference-between-unicode-and-utf-8/ for a more thorough explanation. — Mike Samuel, Apr 29 '11 at 14:25

score 12 · Accepted Answer · edited Jan 24 '12 at 13:23

It's really easy: just put the actual Unicode characters you want into your document, save the document as UTF-8, and specify that the document is using the UTF-8 character set.

Here's a live example on my website showing that you can use these characters:

In the title of the page.
Directly in your text.
Inside JavaScript strings.

Note that I've saved this file with a UTF-8 encoding and notice that the top of the file has:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

On the off chance that my site is down, here's the content of the example:

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> 
  <meta http-equiv="content-type"
        content="application/xhtml+xml; charset=utf-8"/>
  <title>Θαρσανδαλα</title> 
  <style type="text/css" media="screen"> 
    body { background:#eee; margin:0 }
    svg { display:block; border:1px solid #ccc; margin:2em auto;
          width:300px; height:200px; background:#fff }
    svg text { text-anchor:middle }
  </style> 
</head><body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"
       viewBox="-150 -100 300 200">
    <text>Inline: Θαρσανδαλα</text>
  </svg> 
  <script type="text/javascript"><![CDATA[
    var svg  = document.getElementsByTagName('svg')[0];     
    createOn(svg,'text',{y:20,"font-size":"17px"},"Generated: Θαρσανδαλα");

    function createOn(root,name,attrs,text){
      var doc=root.ownerDocument, svg=root;
      while (svg.tagName!='svg') svg=svg.parentNode;
      var svgNS = svg.getAttribute('xmlns');
      var el = doc.createElementNS(svgNS,name);
      for (var attr in attrs){
        if (attrs.hasOwnProperty(attr)){
          var parts = attr.split(':');
          if (parts[1]) el.setAttributeNS(
            svg.getAttribute('xmlns:'+parts[0]), parts[1], attrs[attr]
          );
          else el.setAttributeNS(null,attr,attrs[attr]);
        }
      }
      if (text) el.appendChild(document.createTextNode(text));
      return root.appendChild(el);
    }          
  ]]></script> 
</body></html>

Yes, that is great alternative! May I use your method in my project? thank you in advance. — xentia, Apr 29 '11 at 22:28

Mike Samuel · Answer 2 · 2011-04-29T14:24:05.203

4

Replace

set_label (10,50,'Qam&#218;raj')

with

set_lavel(10, 50, "Qam\u00DAraj");

"\u00DA" is four hex digits for Codepoint 218.

Similarly, your other label would be

set_label (10,50,'\u0398\u03b1\u03c1\u03c3\u03b1\u03bd\u03b4\u03b1\u03bb\u03b1')

If you want to find the hex for a Greek character, you can go to http://www.squarefree.com/shell/shell.html and type something like

var hex = "Α".charCodeAt(0).toString(16);
[, "\\x0", "\\x", "\\u0", "\\u"][hex.length] + hex;

which for "Α" produces

\u0391

edited Apr 29 '11 at 14:24

answered Apr 29 '11 at 14:17

Mike Samuel

118,113
30
216
245

I found a possible solution on this site: http://people.w3.org/rishida/tools/conversion/ this is a wonderful java script convertor from and to all variations of coding. Java Script engine behind this is just what I need for my problem. Just to see if i can use it in my project - i don't know, i must contact the author. – xentia Apr 29 '11 at 22:01

SVG text element with Unicode characters

2 Answers2

Linked