Vector Graphics Editor
Create and Edit SVG online - Scalable Vector Graphics
open janvas...
SVG - Text
The SVG "text" element draws a graphics element consisting of text.
The location of the text is determined by the "transform" attribute, the last 2 values of the matrix are the x and y position of the text.
The size of the text box area is determined by the "width" and "height" attributes.

The text element must have some added attributes to be loaded and parsed as Janvas text box.
As you can see into the SVG XML code, the text tag have these added attributes:

-  data-type = "TextBox"
-  data-custom-element = "TextEditable_cmp"
-  data-use-rich-text="false"

References: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text


<text data-type="TextBox"
data-custom-element="TextEditable_cmp"
transform="matrix(1,0,0,1,125,109)"
width="285.5970417496952"
height="23.59375"
font-family="Roboto"
font-size="20"
font-style="normal"
font-weight="400"
text-align="left"
text-anchor="start"
data-use-rich-text="false">
<tspan style="white-space: pre;" x="0" dy="19">
<![CDATA[Enter your text here]]>
</tspan>
</text>

SVG - TextPath
The SVG textPath element is used to layout text along a path.
Janvas create a text on path by creating a group that contains the path and the text element.

The path element must have some added attributes to be loaded and parsed as text path.
As you can see into the SVG XML code, the path tag have these added attributes:

-  data-type = "EditableTextPath"

The text element must have some added attributes to be loaded and parsed as text path.
As you can see into the SVG XML code, the text tag have these added attributes:

-  data-type = "TextOnPath"




<g transform="matrix(1,0,0,1, 195.89, 246.336)">
<path d="M 60.13 0 C 60.13 33.20 33.20 60.13 ... Z"
id="path_7f2gqnk"
data-type="EditableTextPath"
transform="matrix(1 0 0 1 0 0)" />
<text data-type="TextOnPath"
data-custom-element="TextEditable_cmp"
transform="matrix(1 0 0 1 0 0)"
width="267.5118321226003"
height="78.6875"
font-family="Roboto"
font-size="20"
font-style="normal"
font-weight="400"
text-align="left"
text-anchor="start"
data-use-rich-text="false" >
<textPath xlink:href="#path_7f2gqnk" startOffset="0">
<tspan style="white-space: pre;"
x="0"
dy="0" >
<![CDATA[Enter your text here]]>
</tspan>
</textPath>
</text>
</g>