Ritaglia SVG

Ritagliare un SVG

Un SVG non è un'immagine con un bordo. È un disegno più una viewBox: quattro numeri che dicono quale parte dello spazio delle coordinate il file sta mostrando.

Il margine nasce da quei quattro numeri. Un'icona esportata a 512 × 512 con la forma al centro ha spazio vuoto su ogni lato, e nessun ridimensionamento lo toglie: rimpicciolisci il file e rimpicciolisci il margine insieme al disegno. Il logo continua a galleggiare in mezzo alla sua scatola e continua a non allinearsi con il testo che gli sta accanto.

Questo strumento cambia la viewBox e nient'altro. Capisce dove il disegno comincia e finisce davvero, stringe la scatola perché gli stia addosso e ti restituisce un SVG: gli stessi tracciati, le stesse sfumature, gli stessi gruppi, in una scatola della loro misura.

Guarda l'immagine, non il codice

Il modo ovvio per trovare i bordi di un SVG è chiedere al browser il rettangolo che racchiude tutte le forme. Quel modo sbaglia in due casi del tutto ordinari, ed è proprio per quei due che la gente va a cercare uno strumento così:

• Un rettangolo bianco di fondo. È una forma, quindi conta, quindi il rettangolo che racchiude tutto è l'intera tela e non viene ritagliato niente.
• Sfocature e ombre esterne. Un filtro dipinge ben oltre la forma che lo ha generato, quindi un rettangolo geometrico taglia via il bordo morbido.

Perciò questo strumento prima disegna l'SVG e poi guarda il risultato, come fa il tuo occhio. Un rettangolo bianco si legge come vuoto. Un'ombra si legge come contenuto e resta. Quel che vedi è quel che viene misurato.

Trasparente o bianco

• Trasparente o bianco *(la scelta abituale)*: se ne va tutto ciò che chiameresti «vuoto», i pixel completamente trasparenti come quelli bianchi. È quello che serve per un'icona esportata su una tavola da disegno bianca, o per un logo con una piastra bianca dietro.
• Solo trasparente: il bianco viene trattato come parte del disegno. Da usare quando il bianco è davvero il progetto: un marchio scritto in bianco, un fondo bianco che deve restare, o un'immagine pensata per una pagina scura.

La tolleranza decide quanto vicino al vuoto conta ancora come vuoto. I file esportati sono raramente puri: un fondo può essere #fefefe, un bordo può essere appena trasparente. Alza la tolleranza se non è stato tolto niente; abbassala se è stata tagliata una parte chiara del disegno.

Il margine

Margine da lasciare rimette una quantità scelta di spazio su tutti e quattro i lati, misurata nelle unità dell'SVG stesso: gli stessi numeri che usa la viewBox.

Zero dà la scatola più stretta possibile, ed è ciò che vuoi per un'icona dentro un pulsante o un logo in una griglia, dove a decidere le spaziature deve essere l'impaginazione. Vale la pena aggiungere un piccolo margine quando il disegno ha un contorno che un ritaglio serrato taglierebbe, o quando il file va da qualche parte dove verrà ritagliato di nuovo.

Larghezza e altezza vengono dietro

Se l'SVG aveva gli attributi width e height, vengono scalati dello stesso fattore della scatola, nell'unità in cui erano scritti. Un disegno largo 40 mm dentro una tela da 100 mm esce largo 40 mm.

È importante: il disegno non cambia dimensione quando lo ritagli. Sparisce solo lo spazio vuoto che lo circonda. Un SVG senza width né height resta senza, quindi continua ad adattarsi a qualunque cosa lo contenga.

Non viene caricato nulla

Il file viene letto, disegnato e riscritto dentro il tuo browser. Non raggiunge mai un server, che è il punto quando il file è un logo non ancora uscito, il marchio di un cliente o un lavoro sotto riservatezza.

Significa anche nessuna attesa di caricamento, nessun limite di dimensione, e lo strumento funziona offline una volta caricata la pagina.

A cosa serve

• Un'icona esportata con una tavola da disegno fissa che non si allinea dentro un pulsante
• Un logo con una piastra bianca dietro che deve stare su un'intestazione colorata
• Materiale da Figma, Illustrator o Inkscape uscito con tutta la tela intorno
• Un SVG destinato a uno sprite sheet o a un font di icone, dove ogni segno ha bisogno di una scatola stretta
• Un disegno per una macchina da taglio o un laser, dove la scatola del file è il materiale
• Far tornare un set di icone, ritagliando ciascuna sul proprio contenuto

Buono a sapersi

• Il ritaglio è misurato su una resa, quindi la sua precisione è di circa un pixel reso — la scatola viene allargata di un soffio per essere certi di non rasare niente
• Ciò che era disegnato fuori dalla viewBox originale era già invisibile, e resta fuori
• Il testo vivo è misurato con i caratteri che ha il tuo browser; convertilo prima in tracciati se l'incastro deve essere esatto
• Un <image> o un riferimento che punta a un altro file non può essere disegnato qui, quindi non viene contato
• Commenti, <defs>, metadati e id sopravvivono tutti: questo è un ri-ritaglio, non una ripulita
• Per ritagliare un bitmap, usa Ritaglia immagine, che toglie anche i margini da sola
• Per trasformare poi il risultato in un PNG, usa Da SVG a PNG

Come si usa

• Clicca su Clicca per caricare, oppure trascina il tuo SVG sul riquadro
• Il ritaglio viene calcolato subito: il contorno tratteggiato a sinistra mostra che cosa resta
• Lascia Trasparente o bianco, a meno che il bianco faccia parte del progetto
• Alza la tolleranza se non è stato tolto niente, abbassala se è stato tagliato qualcosa di chiaro
• Imposta un margine se vuoi lasciare spazio su tutti e quattro i lati
• Premi Scarica l'SVG, oppure Copia il codice SVG per incollarlo direttamente in una pagina

Strumenti collegati

• Ritaglia immagine — lo stesso lavoro per PNG e JPG
• Da SVG a PNG — trasformare l'SVG ritagliato in un bitmap
• Da SVG a JPG — un SVG come immagine piatta
• Immagine in SVG — vettorializzare un logo o un'icona
• Generatore di favicon — trasformare il risultato nell'icona di un sito
• Ridimensiona immagine — ridimensionare un bitmap invece