Recorte - Clipping

Se crea una máscara de recorte con cualquier forma declarada dentro del elemento <clipPath>. Esto suele hacerse en <defs>, estableciendo un id para la máscara de recorte que se puede referenciar en el objeto que se va a recortar, usando url (#id) dentro de un atributo clip-path, como se muestra a continuación:

<style>
    svg {
        border: solid 1px lightgray;
    }
</style>
<body>
<h2>SVG clipping</h2>
<svg width="425" height="425"
    <!-- Original image (not clipped) -->
    <image x="25" y="25"
           height="350" width="350"
           xlink:href="../Data/Images/pluto.jpg"/>

</svg>
<svg width="425" height="425">
    <defs>
        <clipPath id="poly">
            <circle r="139" cx="200" cy="199"/>
        </clipPath>
    </defs>

    <!-- Clipped image -->
    <image x="25" y="25"
           height="350" width="350"
           xlink:href="../Data/Images/pluto.jpg"
           clip-path="url(#poly)"/>
</svg>
</body>

Las siguientes capturas de pantalla SVG muestran la máscara de recorte circular aplicada a una imagen. El SVG de la izquierda muestra la imagen original y la imagen recortada, a la derecha.