How to Use CSS shape-outside with SVG url()

The CSS shape-outside property defines a non-rectangular area around which adjacent inline content flows when an element is floated. When paired with an SVG file using the url() functional notation, shape-outside uses the transparency and vector contours of the referenced SVG image to dictate how text wraps around the element, breaking away from standard rectangular bounding boxes.

Core Function

By default, floating an element wraps surrounding text around its rectangular box model. When you assign an SVG via shape-outside: url('image.svg'), the browser analyzes the graphic’s alpha channel (transparency). Text then contours dynamically around the opaque or semi-opaque pixels of the SVG shape, creating magazine-style editorial layouts on the web.

Key Requirements

For shape-outside with an SVG url() to render correctly, specific conditions must be met:

1. Floating: The element must be floated using float: left or float: right.
2. Explicit Dimensions: The element must have defined width and height properties matching the layout requirements.
3. CORS Policies: If the SVG is hosted on an external domain, proper Cross-Origin Resource Sharing (CORS) headers must be set; otherwise, the browser falls back to a standard rectangular wrap.
4. Alpha Transparency: The SVG should contain transparent areas so the browser can calculate the boundary between the graphic and empty space.

Supporting Properties

To fine-tune the wrap boundary generated by the SVG, developers use two primary companion properties:

• shape-image-threshold: Defines the minimum opacity level required for a pixel to be treated as part of the shape. Values range from 0.0 (fully transparent) to 1.0 (fully opaque). The default is 0.0, meaning any non-transparent pixel will repel text.
• shape-margin: Adds an offset or buffer zone around the generated SVG path, preventing wrapped text from pressing directly against the edge of the vector design.

Example Implementation

.curved-graphic {
  float: left;
  width: 300px;
  height: 300px;
  shape-outside: url('curve.svg');
  shape-image-threshold: 0.5;
  shape-margin: 15px;
}

In this implementation, inline text wraps directly along the contour of curve.svg, maintaining a 15-pixel gap and treating any area with at least 50% opacity as a solid boundary.