<figure>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
		<defs>
			<clipPath id="user-space" clipPathUnits="userSpaceOnUse">
				<circle cx="50" cy="50" r="50"/>
			</clipPath>
		</defs>

		<image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="https://images.unsplash.com/photo-1508186736123-44a5fcb36f9f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7ff4199971d35554c59bbf8e0b229534" clip-path="url(#user-space)"/>
	</svg>
	<figcaption>userSpaceOnUse</figcaption>
</figure>		

<figure>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
		<defs>
			<clipPath id="object-bounding" clipPathUnits="objectBoundingBox">
				<circle cx="50" cy="50" r="50"/>
			</clipPath>
		</defs>

		<image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="https://images.unsplash.com/photo-1508186736123-44a5fcb36f9f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7ff4199971d35554c59bbf8e0b229534" clip-path="url(#object-bounding)"/>
	</svg>
	<figcaption>objectBoundingBox</figcaption>
</figure>
html {
  background: #1F2933;
  color: white;
}

html,
body {
  height: 100%;
  padding: 0;
}

body {
  display: grid;
  grid: auto/repeat(2, 1fr);
  grid-gap: 10px;
  padding: 1rem;
}

figure {
  margin: 0;
}

figcaption {
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.