| <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> |
