Wrap Text Around SVGs with CSS Shapes
shape-outside makes body text flow along your SVG's curves instead of its rectangular bounding box — real magazine layout on the web.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How shape-outside Works with SVG
A floated SVG normally forces text to wrap around its rectangular box. shape-outside redefines the wrap boundary: pass it the same polygon/path geometry as your graphic (or an image with alpha, using shape-image-source semantics) and paragraphs tuck along the actual visual contour, with shape-margin controlling the gutter.
- shape-outside: polygon() or url() redefines the text boundary
- Alpha-channel images auto-generate wrap contours
- shape-margin sets breathing room along the curve
Practical Workflow
Float the SVG element, then supply a simplified contour — hand-tuned polygon points or the shape from the alpha of a rendered version. Keep contours simple (a dozen points beats a hundred), test at multiple viewport widths, and provide a plain float fallback since content must remain readable if shapes fail.
- Simplified contours wrap better than exact traces
- Test wraps across breakpoints — shapes don't reflow like text
- Layout degrades gracefully to rectangular wrap without support
Frequently Asked Questions
Can shape-outside read the SVG's paths directly?
Not directly — it takes basic shapes, polygons, or an image's alpha channel. Export your SVG as PNG for shape-image use, or approximate the contour with a polygon() matching the artwork.
Does text wrap inside an SVG shape too?
That's shape-inside, which never shipped in browsers. For text inside shapes, use SVG's own <textPath> or manual line-breaking techniques instead.
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