SVG (Scalable Vector Graphics) is a markup language for describing two-dimensional vector graphics. You can use text in SVG to add various types of text elements to your graphics. Here are some ways to use text in SVG:
<text>
Element:
The <text>
element is used to create simple text elements. You can specify the text content and position within the SVG canvas.
xml<svg width="300" height="100">
<text x="10" y="40">Hello, SVG!</text>
</svg>
Text Styling: You can apply various styling options to the text, such as font size, font family, fill color, stroke, etc.
xml<svg width="300" height="100">
<text x="10" y="40" font-family="Arial" font-size="20" fill="blue">Styled Text</text>
</svg>
<tspan>
Element:
The <tspan>
element allows you to group multiple text spans within a single <text>
element. This is useful for applying different styles to different parts of the text.
xml<svg width="300" height="100">
<text x="10" y="40">
<tspan fill="red">Red</tspan>
<tspan fill="green" dx="5">Green</tspan>
<tspan fill="blue" dx="5">Blue</tspan>
</text>
</svg>
Text Paths:
You can place text along a path using the <textPath>
element. This allows you to create text that follows a specific shape or curve.
xml<svg width="300" height="100">
<path id="myPath" d="M10 80 Q 52.5 10, 95 80 T 180 80" />
<text>
<textPath href="#myPath">Curved Text</textPath>
</text>
</svg>
Text Rotation:
You can rotate text using the rotate
attribute.
xml<svg width="300" height="100">
<text x="10" y="40" transform="rotate(45 10,40)">Rotated Text</text>
</svg>
Text Alignment:
You can use the text-anchor
attribute to specify the alignment of the text. Values can be "start," "middle," or "end."
xml<svg width="300" height="100">
<text x="10" y="40" text-anchor="start">Start</text>
<text x="150" y="40" text-anchor="middle">Middle</text>
<text x="290" y="40" text-anchor="end">End</text>
</svg>
These are just a few examples, and SVG provides a rich set of features for working with text. You can explore additional attributes and elements to customize text in SVG according to your design needs.