color-profile-image-foreign-object.svg

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 480 360">
  <!-- frame the view port -->
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="black"/>
  <!-- draw a group within the view port -->
  <g shape-rendering="geometricPrecision">
    <!-- define a circular clipping path id #circle -->
    <defs>
      <clipPath id="circle" clipPathUnits="userSpaceOnUse">
        <circle cx="240" cy="180" r="160"/>
      </clipPath>
    </defs>
    <!-- sub-group is a <foreignObject> (an <iframe> with a color profiled image) clipped to id #circle -->
    <g clip-path="url(#circle)">
      <foreignObject x="10" y="10" width="450" height="340">
        <body xmlns="http://www.w3.org/1999/xhtml">
          <iframe src="red-at-12-oclock-with-color-profile.png" style="width:400px; height:400px"></iframe>
        </body>
      </foreignObject>
    </g>
  </g>
</svg>

chromium/third_party/blink/web_tests/images/resources/color-profile-image-foreign-object.svg