<!DOCTYPE html>
<html>
<head>
<style>
    #content {
        font-size: 30px;
        color: green;
    }

    #image-shape {
        float: left;
        -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'><rect width='100' height='40'/><rect y='90' width='100' height='40'/></svg>");
    }
</style>
</head>
<body>
  <p>The lines of text below should appear to the right of the blue rectangles.</p>
  <div id="content">
      <IMG id="image-shape" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' fill='blue'><rect width='100' height='40'/><rect y='60' width='100' height='40'/></svg>">
      One<br>Two<br>Free<br>Four
  </div>
</body>
</html>