<!DOCTYPE html>
<html>
<head>
<style>
/*
The shape-outside image's width is smaller than the float's width (120 < 150) to make it
clear that the shape-outside defines the starting location for the text, not the float.
*/
#standard {
shape-outside: image-set(
url(
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120px' height='50px'><rect x='0' y='0' width='120' height='50' fill='blue'/></svg>"
) 1x);
}
#prefixed {
shape-outside: -webkit-image-set(
url(
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120px' height='50px'><rect x='0' y='0' width='120' height='50' fill='blue'/></svg>"
) 1x);
}
.image-shape-outside {
float: left;
width: 150px;
height: 50px;
background-repeat: no-repeat;
background-image: url(
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120px' height='50px'><rect x='0' y='0' width='120' height='50' fill='blue'/></svg>"
);
}
</style>
</head>
<body>
<p>The green "Hello World" should appear to the right of the blue rectangle.</p>
<div style="color: green; font-size: 32px;">
<div>
<div id="standard" class="image-shape-outside"></div>
Hello World
</div>
<br>
<div>
<div id="prefixed" class="image-shape-outside"></div>
Hello World
</div>
</div>
</body>
</html>