Introduzione
SVG non serve soltanto per disegnare icone, grafici o forme geometriche. Un impiego molto pratico consiste nel creare ritagli e maschere per immagini, mantenendo il risultato nitido e adattabile a qualsiasi dimensione dello schermo. Questa tecnica è utile per realizzare avatar circolari, immagini con angoli personalizzati, copertine sagomate e intestazioni visive più originali.
In questo tutorial costruiremo una scheda profilo con una fotografia ritagliata all’interno di una forma esagonale. L’immagine resterà responsive perché il disegno SVG utilizzerà un viewBox invece di dimensioni rigide. Useremo l’elemento <clipPath>, che definisce l’area visibile dell’immagine senza modificarne il file originale.
La differenza principale tra un ritaglio SVG e un semplice border-radius CSS è la libertà geometrica. Con SVG possiamo definire poligoni, stelle, percorsi complessi o forme personalizzate. Inoltre, il contenuto visuale può essere integrato direttamente nel markup HTML, senza richieste HTTP aggiuntive.
Codice completo
<article
aria-labelledby="profilo-titolo"
style="max-width: 420px; margin: 2rem auto; font-family: sans-serif;"
>
<svg
viewBox="0 0 400 260"
width="100%"
role="img"
aria-labelledby="profilo-titolo profilo-descrizione"
style="display: block; height: auto;"
>
<title id="profilo-titolo">Profilo di Giulia Rossi</title>
<desc id="profilo-descrizione">
Fotografia di Giulia Rossi ritagliata a forma di esagono.
</desc>
<defs>
<clipPath id="ritaglio-esagono" clipPathUnits="userSpaceOnUse">
<polygon points="200,18 350,105 350,255 200,342 50,255 50,105" />
</clipPath>
<linearGradient id="sfondo-scheda" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#12355b" />
<stop offset="100%" stop-color="#1d8a99" />
</linearGradient>
</defs>
<rect
x="0"
y="0"
width="400"
height="260"
rx="24"
fill="url(#sfondo-scheda)"
/>
<image
href="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=700&q=80"
x="50"
y="18"
width="300"
height="324"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#ritaglio-esagono)"
role="presentation"
/>
<polygon
points="200,18 350,105 350,255 200,342 50,255 50,105"
fill="none"
stroke="#ffffff"
stroke-width="6"
vector-effect="non-scaling-stroke"
aria-hidden="true"
/>
</svg>
<div
style="padding: 1rem 1.25rem; background: #f3f7fa; border-radius: 0 0 24px 24px;"
>
<h2 style="margin: 0 0 .4rem;">Giulia Rossi</h2>
<p style="margin: 0;">Frontend developer e appassionata di accessibilità web.</p>
</div>
</article>Spiegazione
Il sistema di coordinate
L’attributo viewBox="0 0 400 260" definisce un’area di lavoro interna larga 400 unità e alta 260. Il valore width="100%" permette invece all’SVG di occupare tutta la larghezza disponibile. In questo modo il browser ridimensiona il disegno conservando le proporzioni.
Il valore di viewBox è indipendente dai pixel reali dello schermo. La stessa grafica può quindi apparire su uno smartphone, su un tablet o su un monitor ad alta risoluzione senza perdere nitidezza.
Definire il ritaglio
L’elemento <clipPath> contiene un poligono esagonale. Il poligono è costruito con sei coppie di coordinate, indicate dall’attributo points. Tutto ciò che si trova fuori da questa forma viene reso invisibile.
Il ritaglio viene applicato all’immagine con:
clip-path="url(#ritaglio-esagono)"Il riferimento punta all’identificatore assegnato al percorso di ritaglio. È buona pratica usare ID descrittivi e univoci, soprattutto quando nella stessa pagina sono presenti più SVG.
Adattare l’immagine alla forma
L’attributo preserveAspectRatio="xMidYMid slice" fa sì che l’immagine riempia completamente l’area assegnata, anche se una parte dei bordi viene tagliata. Il soggetto resta centrato sia orizzontalmente sia verticalmente.
Se invece si desidera mostrare l’intera fotografia, si può usare meet al posto di slice. In quel caso potrebbero comparire spazi vuoti all’interno della forma.
Accessibilità
L’SVG è marcato con role="img" e utilizza <title> e <desc> per fornire un’alternativa testuale. Il bordo decorativo ha aria-hidden="true", perché non aggiunge informazioni utili a chi utilizza uno screen reader.
La fotografia, invece, è presentata come parte dell’immagine SVG complessiva. Se la foto avesse un significato indipendente, sarebbe opportuno descriverla più precisamente oppure utilizzare un attributo aria-label adatto al contesto.
Best practice
- Usa sempre un viewBox per rendere l’SVG facilmente ridimensionabile.
- Preferisci ID descrittivi per
clipPath, gradienti e altri elementi definiti in<defs>. - Utilizza
preserveAspectRatioper controllare il comportamento delle immagini con proporzioni diverse. - Se il contenuto è informativo, aggiungi
<title>e<desc>. Per gli elementi puramente decorativi usaaria-hidden="true". - Ricorda che un’immagine caricata tramite
hrefdeve essere disponibile anche quando la pagina viene pubblicata online. - Per fotografie importanti, prevedi un’alternativa HTML o un testo equivalente nel contenuto della pagina.
- Usa
vector-effect="non-scaling-stroke"quando il bordo deve conservare uno spessore visivo costante durante il ridimensionamento. - Verifica il risultato con zoom elevato, schermi piccoli e strumenti di accessibilità.
Riepilogo
Con <clipPath> puoi ritagliare immagini dentro forme SVG personalizzate senza modificare i file originali. La combinazione di viewBox, preserveAspectRatio e dimensioni fluide consente di ottenere composizioni responsive e nitide.
La tecnica è particolarmente utile per profili utente, card promozionali, copertine e componenti visivi riutilizzabili. Un markup ben strutturato, accompagnato da titoli accessibili e descrizioni appropriate, permette di mantenere il risultato comprensibile anche per chi non può vedere la grafica.