• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Text in SVG

SVG treats a text element in much the same way that it treats graphical and shape elements. You position text with x and y coordinates and use fill and stroke options to color text the same way you would with a <circle> or <rect> element. However, SVG allows a surprising amount of control over how text appears (such as fonts, letter spacing, alignment), much like any good text layout program, but in addition offers the ability to internationalize your text message. Few other applications or computer languages permit this flexibility. This is because text in SVG remains character data even after it is rendered, so it is searchable and can be edited, even if it is a graphical element.

The <text> Element

In SVG, text is rendered with the <text> element. The simplest example of a <text> element is one that uses just x and y attributes to place it. Text is rendered by default with a black fill and no outline. Unlike other objects, this is usually fine for words. Example 3-10 shows this simple use of the <text> element.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint