SVG importato alla dimensione sbagliata: diagnosi e rimedi

Quando un SVG viene importato alla dimensione sbagliata, generalmente i tracciati non sono danneggiati. L'app che esporta e quella che importa non concordano su come le unità di coordinate dell'SVG si mappino a pixel, pollici o millimetri. Ecco perché lo stesso file può apparire corretto nel browser, arrivare minuscolo in Figma e avere un'altra scala in CAD o nel software da taglio.

Non ridisegnare né ridimensionare ancora le singole parti. Aggiungi un quadrato di riferimento di dimensioni note, importa tutto il file e misura quel quadrato. Una misurazione ti dice se è cambiata la scala del documento o se la grafica stessa è sbagliata.

Le tre dimensioni dentro un SVG

Un SVG può descrivere tre cose collegate che vengono comunemente chiamate «dimensione». La specifica dei sistemi di coordinate SVG 2 definisce il rapporto tra coordinate utente, viewport e viewBox.

1. La geometria è costituita dalle coordinate dentro tracciati e forme. Un rettangolo potrebbe andare da 0 a 100 nel sistema di coordinate del file.
2. Il viewBox indica quale rettangolo di quel sistema deve essere visibile. viewBox="0 0 100 100" significa che l'area di disegno visibile comprende 100 unità utente in ogni direzione.
3. Il viewport è la dimensione visualizzata o importata. L'elemento radice può dichiarare width="100mm", width="400" oppure nessuna larghezza. L'app ricevente decide poi come trasformare quel valore nelle proprie unità del documento.

Ecco un quadrato completo da 100 unità con una dimensione fisica di output esplicita:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

La geometria misura 100 per 100 unità utente, mentre il viewport previsto misura 25 per 25 mm. Il viewBox mappa uno spazio di coordinate nell'altro. Rimuovi width e height oppure trasformali in numeri senza unità e l'importatore avrà più libertà di scegliere la dimensione visualizzata.

La guida più lunga a modificare un SVG affronta le modifiche sicure al codice. Per questo problema, mantieni intatti i dati dei tracciati mentre ispezioni l'elemento radice <svg>.

Perché si dà la colpa ai DPI

I tracciati SVG non hanno una risoluzione in pixel come PNG o JPG. I DPI entrano in discussione quando il software converte tra pixel CSS e unità fisiche oppure quando un'app grafica associa a quelle unità una propria convenzione di esportazione.

La specifica CSS Values definisce 1in come 96 pixel CSS e 1pt come 1/72 di pollice. Un flusso che tratta erroneamente i pixel CSS come punti produce la nota discrepanza di scala 96 a 72, cioè 1,333. Altri fattori possono comparire quando un importatore ignora width e height fisici, usa soltanto il viewBox o applica la propria impostazione di unità del documento.

Questo rende «cambia i DPI» un consiglio incompleto. Potrebbe non esistere alcun valore DPI raster da cambiare. Prima calcola il fattore di scala:

scale factor = intended size / imported size

Se un quadrato da 100 mm viene importato a 75 mm, il fattore di correzione è 100 / 75 = 1.3333. Scala tutto lo schizzo o documento importato di quel fattore, poi verifica di nuovo il quadrato.

Il quadrato di riferimento distingue due problemi che possono apparire identici alla prima importazione. Se quadrato e grafica differiscono nella stessa proporzione, correggi tutto il documento. Se il quadrato è corretto ma la grafica no, lascia in pace le unità del documento e ispeziona limiti o trasformazioni della grafica.

Esegui la prova del quadrato di riferimento

Usa un quadrato abbastanza grande da misurare comodamente ma abbastanza piccolo da stare accanto alla grafica.

1. Nell'editor sorgente, disegna un quadrato di esattamente 10 mm, 1 pollice o un'altra dimensione nota.
2. Assegnagli un riempimento o tratto distinto e posizionalo fuori dal disegno finito.
3. Esporta grafica e quadrato insieme in un SVG.
4. Importa il file nell'app di destinazione senza trascinare maniglie di ridimensionamento.
5. Misura il quadrato con lo strumento dimensionale dell'app di destinazione.
6. Dividi la dimensione prevista per quella importata.
7. Scala l'intera importazione una volta. Non ridimensionare forme separate.
8. Elimina il quadrato soltanto dopo che la misurazione finale è corretta.

Questa prova intercetta anche una diagnosi falsa. Se il quadrato viene importato correttamente, probabilmente le unità del documento sono corrette. Cerca invece un gruppo trasformato, un tratto la cui larghezza visiva è stata inclusa nei limiti, un oggetto fuori dall'area di disegno oppure un importatore che adatta il contenuto alla pagina. Se un angolo netto con tratto cambia i limiti visibili, segui la diagnosi delle punte nelle giunzioni prima di cambiare la scala fisica del documento.

Per CNC, laser e 3D, usa un quadrato in unità fisiche. Un quadrato in pixel può confermare il ridimensionamento proporzionale, ma non prova i millimetri necessari al flusso di una macchina.

Correggere il file o l'importazione?

Modificare il file è utile quando controlli il master e lo invii ripetutamente allo stesso tipo di flusso. Correggere l'importazione è più sicuro quando un'app CAD o da taglio ha una convenzione di scala nota e l'SVG si comporta già correttamente altrove.

CAD e software da taglio richiedono un controllo aggiuntivo

Un browser deve soltanto disegnare l'immagine. CNC, laser e flussi 3D richiedono un risultato fisico esatto. Dopo aver corretto la scala, controlla separatamente la geometria:

• Conferma che il documento della macchina usi le unità previste.
• Misura un elemento reale, non soltanto il riquadro delimitante complessivo.
• Controlla che i profili chiusi restino chiusi.
• Cerca un rettangolo di sfondo nascosto che abbia ampliato i limiti.
• Conferma l'anteprima di percorso utensile, schizzo o estrusione prima di lavorare il materiale.

La guida da immagine a SVG per CNC affronta pulizia dei tracciati e consegna al CAM. Se il passaggio successivo è l'estrusione, usa il flusso SVG per la stampa 3D dopo aver corretto la scala.

Per Shaper Origin, continua con la lista di controllo delle dimensioni fisiche e dei tipi di taglio. Confermare la scala è un passaggio; i tracciati importati richiedono anche le assegnazioni di taglio previste prima della fresatura.

Dopo aver confermato le dimensioni previste, controllale rispetto a un tappetino da taglio prima della schermata finale di preparazione della macchina.

Per schede illustrate stampate, la guida all'impaginazione delle schede per agende visive controlla ingombro della grafica, dimensioni della pagina PDF e scala di stampa. Un SVG della dimensione corretta può comunque finire su una pagina che la stampante rimpicciolisce.

Dove si inserisce PerfectVector

PerfectVector converte grafica raster in tracciati SVG modificabili. Il flusso SVG e DXF per CNC è utile quando l'unica sorgente è un PNG o JPG e serve geometria vettoriale per CAM. Non conosce la dimensione fisica finale del pezzo, quindi devi comunque impostare e verificare le dimensioni nel software di destinazione.

Questa divisione è importante. La vettorializzazione recupera forme scalabili. Un quadrato di dimensioni note e una misurazione CAM stabiliscono la scala fisica. Considerarli due controlli impedisce che un ricalco pulito diventi un taglio della dimensione sbagliata.

FAQ

Perché il mio SVG viene importato più piccolo rispetto all'esportazione? Le app che esportano e importano possono mappare diversamente unità utente SVG, pixel CSS, punti o unità fisiche. Aggiungi un quadrato noto e confronta dimensioni previste e importate. Se tutto il file è cambiato di un fattore, scala il documento una volta anziché modificare singoli tracciati.

Un SVG ha DPI? La geometria SVG è indipendente dalla risoluzione, quindi non ha una densità fissa di pixel come un raster. Le conversioni simili ai DPI contano quando il software mappa pixel CSS o unità grafiche a pollici o millimetri. La convenzione dell'importatore, non una risoluzione nascosta dell'immagine, è spesso la causa della discrepanza.

Cosa fa viewBox alle dimensioni SVG? Il viewBox definisce il rettangolo di coordinate visibile e permette al renderer di mappare quelle unità utente nel viewport. Non dichiara da solo una dimensione fisica. width e height radice, CSS o applicazione ricevente determinano quanto grande diventa quel viewport.

Perché il mio SVG è corretto nel browser ma sbagliato in Fusion o LightBurn? Un browser può renderizzare l'SVG in un viewport CSS, mentre software CAD e laser devono mapparlo a unità fisiche del documento. Questi importatori possono usare una convenzione diversa o ignorare parte dei metadati dimensionali dell'SVG. Misura un quadrato di riferimento e correggi l'intera importazione con il fattore di scala risultante.

Dovrei convertire l'SVG in DXF per correggerne le dimensioni? Non come primo passo. La conversione del formato può portarsi dietro la stessa ambiguità di scala o introdurne un'altra. Diagnostica prima il fattore con un quadrato. Usa DXF quando il flusso di destinazione lo preferisce, poi verifica di nuovo le dimensioni dopo l'importazione.

Fonti

1. W3C — Sistemi di coordinate SVG 2 — Definisce unità utente, viewport, viewBox e trasformazioni.
2. W3C — CSS Values and Units Level 4 — Definisce le conversioni di riferimento tra pixel CSS, pollici e punti.
3. Autodesk Fusion — Inserire SVG — Documenta controlli di posizionamento e scala SVG negli schizzi Fusion.

Prima di un percorso utensile o taglio, prepara l'SVG o DXF per CNC e ispeziona il risultato. Misura il quadrato di riferimento e un elemento reale e verifica l'anteprima CAM finale prima di rimuovere il quadrato dal file di produzione.