CODEWITHSUNDEEP
xmlsvg
Jack Blue
Jack Blue

Reputation: 75

How to have a text element say '<'

I am currently drawing SVGs and I want to have a text element that contains a less than symbol. When I try:

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="40" y="40" fill="Black" font-size="25" font-weight="bold" font-family="courier new" ><</text>
</svg>

I get the following error: "StartTag: invalid element name"

Upvotes: 1

Views: 1581

Answers (2)

Alvin K.
Alvin K.

Reputation: 4379

I usually refer to this page and you can also use the hex equivalent, eg < translates to &#x3C;, which is Unicode U+003C.

Upvotes: 1

cvializ
cvializ

Reputation: 616

The < and > characters are special characters in HTML and SVG, used to denote tags, like <svg> and <text>. The renderer thinks you are trying to start a new tag when you use the < in your code. This is why you're getting the error "StartTag: invalid element name"

To tell the renderer you want to print the < character and not start a tag, you need to use an "escape code." In this case, the escape code you want is &lt;

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="40" y="40" fill="Black" font-size="25" font-weight="bold" font-family="courier new" >&lt;</text>
</svg>

Here's a jsFiddle demonstrating the use of that escape code.

There are many other escape codes you can use, too. They can be useful if your keyboard lacks a certain special character, like the British pound, or if you want to output special characters without affecting how your HTML or SVG is parsed by the renderer.

Upvotes: 7

Related Questions