From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Add text to an SVG

Add text to an SVG - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Add text to an SVG

“

- [Instructor] Practically speaking, an SVG is a web document that lives either on its own or inside another web document, and this SVG web document has its own viewport and its own document object model. As a web document, the SVG supports standard web content like live text, as in selectable text that is available in the document object model. That said, text in SVG does not work exactly the same as text in regular HTML. To add live text to an SVG, we use the text element. The text element has the now familiar x and y attributes, only here they define the left baseline anchor point for the text so a value of x 10 and y 20 means that text will start 10 units in from the left and the baseline of the text, so the bottom of the regular letters will appear at 20 units from the top. There are also several specialized attributes that set things like how the text stretches or shrinks depending on available space and similar. The actual text to be displayed in the SVG is placed between the…

Contents