How to Use SVG <tspan>  Multi-Line Text and Inline Styling
SVG tspan is the tool for multi-line text, mixed font weights, and precise word positioning within an SVG text element.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG tspan for Multi-Line Text
SVG `<text>` does not auto-wrap. Use `<tspan dy='1.2em'>` to simulate line breaks  each tspan with `dy` shifts the baseline down by the specified amount relative to the previous line.
- <tspan x='10' dy='1.2em'>Line 2 text</tspan>
- dy='1.2em' adds line spacing relative to current position
- Reset x on each tspan for left-aligned multi-line text
Inline Styling with tspan
Apply different font-weight, fill, font-size, or text-decoration to individual words by wrapping them in `<tspan>` with presentation attributes. This enables bold words, colored spans, and mixed-size text within a single text element.
- <tspan font-weight='bold'>Bold word</tspan> inline
- <tspan fill='red'>Red text span</tspan>
- <tspan font-size='24'>Larger text</tspan> mixed inline
Frequently Asked Questions
How do I create multi-line SVG text?
Use multiple <tspan> elements each with dy='1.2em' and x equal to the parent text x position to simulate line breaks in SVG text.
Can tspan be used for subscript and superscript in SVG?
Yes  use <tspan dy='-0.5em' font-size='smaller'> for superscript and <tspan dy='0.5em' font-size='smaller'> for subscript text in SVG.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG