Wrapping Text Inside an SVG Shape
SVG text doesn't wrap automatically, requiring either foreignObject with HTML or manually positioned tspan elements.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why SVG Text Doesn't Wrap by Default
Unlike an HTML paragraph, SVG's native text element has no automatic word-wrapping behavior — text simply continues on a single line regardless of how much horizontal space is available, which surprises developers expecting CSS-like text flow inside a defined shape or container.
- SVG text has no automatic word-wrapping behavior built into the specification
- Text continues on a single line regardless of available horizontal space
- This differs from HTML's automatic paragraph wrapping behavior
Two Approaches to Achieving Wrapped Text
The foreignObject element embeds actual HTML content, including a div with CSS text wrapping, directly inside the SVG, giving full native word-wrap support, while an alternative approach manually calculates line breaks and positions each line as a separate tspan element with explicit x and y coordinates.
- foreignObject embeds real HTML content with full native word-wrap support
- A manual tspan approach calculates line breaks and positions each line explicitly
- foreignObject is simpler but has some cross-renderer support caveats
Frequently Asked Questions
What's the simplest way to get wrapping text inside an SVG?
Using foreignObject to embed an HTML div with normal CSS text wrapping is the simplest approach, though it has some rendering caveats outside standard browser contexts.
Can I wrap SVG text without using foreignObject at all?
Yes, by manually calculating line breaks and placing each line as a separate tspan element with its own y position, though this requires more manual layout work.
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