SVG Text Wrapping with shape-inside
Wrapping text within a custom shape boundary lets paragraph text flow around a circle, polygon, or irregular silhouette.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Current Browser Support Considerations
The CSS Shapes specification originally proposed shape-inside for wrapping block text within an arbitrary shape's interior, but browser support for that specific property has been limited historically, meaning most current implementations rely on alternative techniques like manually breaking text into multiple positioned tspan lines that approximate the desired shape's contour.
- shape-inside as originally specified has had limited historical browser support
- Most current implementations rely on manually positioned tspan line breaks
- Approximates the desired shape's contour rather than true dynamic reflow
Practical Alternatives for Shape-Constrained Text
For SVG specifically, combining a <clipPath> to visually constrain text to a shape's boundary, along with manually calculated line lengths and positions for each row of text, achieves a similar visual effect to true shape-inside wrapping without depending on the less consistently supported CSS Shapes property.
- clipPath combined with manually positioned text lines is a reliable alternative
- Achieves a similar visual result without depending on limited-support CSS features
- Requires manually calculating line lengths and positions for each text row
Frequently Asked Questions
Is there a JavaScript library that automates text-in-shape wrapping for SVG?
Yes, several JavaScript libraries exist specifically to calculate and generate the tspan positioning needed to approximate text flowing within a custom shape, automating what would otherwise be tedious manual calculation.
Should I rely on native shape-inside support for a production project today?
Given its inconsistent historical browser support, it's safer to build on manually calculated positioning or a dedicated library rather than depending on native shape-inside support alone for production use.
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