Comandi SVG relativi: segui il punto corrente

I comandi assoluti dei tracciati SVG, come M, L e C, usano posizioni nel sistema di coordinate utente corrente. Le forme relative, m, l e c, usano scostamenti dal punto corrente. Per leggere o riscrivere un tracciato, segui quel punto dopo ogni segmento. Cambiare la lettera di un comando senza cambiare i numeri può modificare la forma.

Due regole spiegano gran parte della confusione: la prima coppia di un m iniziale agisce come uno spostamento assoluto, mentre le coppie aggiuntive sono linee relative; inoltre, Z o z chiude un sottotracciato e riporta il punto corrente al suo inizio. Un nuovo spostamento relativo dopo la chiusura usa il punto ripristinato.

Leggi separatamente posizioni e scostamenti

La specifica W3C sui tracciati definisce un tracciato tramite il punto corrente, i sottotracciati e i comandi di disegno. Le coordinate sono unità utente SVG, non necessariamente pixel dello schermo. Un viewBox o una trasformazione può associarle a una diversa posizione visualizzata.

Partendo da (40, 40), questi due comandi descrivono la stessa linea:

L180 40
l140 0

Il primo specifica il punto finale (180, 40). Il secondo aggiunge (140, 0) a (40, 40). Entrambi terminano in (180, 40), che diventa il punto corrente del segmento successivo.

Invece, l180 40 aggiunge (180, 40) e termina in (220, 80). Il comando ha una sintassi valida, ma disegna una linea diversa.

Z maiuscola e minuscola producono lo stesso effetto: non accettano argomenti di coordinate. Il riferimento MDN per d elenca i comandi e i rispettivi parametri.

Confronta due descrizioni della stessa grafica originale

Salva questo SVG completo come absolute.svg e aprilo in un browser. Contiene un distintivo composto verde petrolio con un foro quadrato e una curva cubica corallo separata:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

Per relative.svg, mantieni dimensioni SVG, viewBox e stili, ma sostituisci i due elementi path con questi:

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

Abbiamo renderizzato entrambi i file originali in un browser, accanto a una copia intenzionalmente errata del distintivo assoluto. La copia errata cambia soltanto il primo L180 40 in l180 40; i numeri rimangono invariati.

La nostra pagina ha usato le funzioni SVG native getTotalLength() e getPointAtLength() per confrontare 301 campioni per tracciato, a frazioni corrispondenti della lunghezza totale. Le lunghezze visualizzate erano 657.082 unità utente per ogni distintivo e 189.066 per ogni curva. La differenza massima fra i punti campionati era visualizzata come 0.000000 per entrambe le coppie.

Quella misura conferma queste specifiche stringhe, i cui vertici delle linee e punti cubici coincidono anche secondo i calcoli riportati sotto. Non dimostra che una riscrittura o un convertitore qualsiasi gestisca ogni comando SVG. Il confronto usa sempre la stessa area di visualizzazione senza trasformazioni e le stesse impostazioni di riempimento e tratto.

Segui il primo m e le sue linee implicite

Il nostro distintivo inizia con:

m40 40 140 0 30 40 -30 60 -140 0z

Soltanto la prima coppia esegue uno spostamento. Le coppie rimanenti si comportano come segmenti l relativi impliciti. La definizione di moveto mantiene esplicitamente relative le coppie successive, anche se il m40 40 iniziale viene trattato come inizio assoluto.

Segui una coppia alla volta:

Per confronto, una M maiuscola con più coppie trasformerebbe le coppie successive in segmenti L assoluti impliciti. Non tratterebbe ogni coppia come un altro spostamento e non userebbe gli stessi delta di questo esempio minuscolo.

Un elemento path stabilisce una propria sequenza di tracciato. Non far partire il suo m relativo iniziale dal punto finale di un elemento path precedente e indipendente.

Usa l'inizio del sottotracciato chiuso per lo spostamento successivo

Il foro inizia dopo la prima z:

m40 30 0 40 40 0 0 -40z

In quel momento il punto corrente è (40, 40), quindi il nuovo spostamento relativo aggiunge (40, 30) e inizia il foro in (80, 70). Le sue linee implicite raggiungono poi (80, 110), (120, 110) e (120, 70) prima di chiudersi.

Se usassi per errore come riferimento il punto finale dell'ultima linea del distintivo esterno, (40, 140), collocheresti quello spostamento in (80, 170). La chiusura precedente è ciò che rende errato quel calcolo. La definizione di closepath riporta il punto corrente al punto iniziale del sottotracciato corrente.

Entrambi i sottotracciati appartengono a un unico elemento path. Il suo fill-rule="evenodd" rende il quadrato interno un'apertura in questo esempio di prova. Mantieni stabili la regola di riempimento e le impostazioni di riempimento e tratto quando confronti riscritture delle coordinate, affinché un cambiamento di riempimento non nasconda la geometria che stai verificando.

Misura ogni controllo cubico dallo stesso punto iniziale

La curva separata inizia in (40, 190):

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

Per questo singolo segmento c minuscolo, tutte e tre le coppie sono scostamenti da (40, 190). Il secondo punto di controllo non si misura dal primo, e il punto finale non si misura dal secondo.

Dopo il segmento, aggiorna il punto corrente al suo punto finale (220, 180). Un segmento relativo successivo userebbe questo nuovo inizio. Il tutorial MDN sui tracciati spiega i controlli cubici e le forme assolute e relative; la guida alle giunzioni Bézier tratta separatamente le maniglie tangenti e il comando abbreviato S.

Non estendere la sottrazione delle coordinate a ogni numero di ogni comando. In un arco, raggi, rotazione e flag hanno ruoli diversi; soltanto la coppia del punto finale passa tra posizioni assolute e relative. Consulta la spiegazione dei flag degli archi prima di riscrivere dati A o a. Questo esempio illustra linee, spostamenti, chiusura e un normale segmento cubico, anziché una procedura generale di conversione dei tracciati.

Sposta la grafica senza confondere posizione e sintassi dei tracciati

Per questo distintivo composto interamente relativo, cambiare il m40 40 iniziale in m60 60 sposta i vertici di (20, 20): i delta successivi e lo spostamento relativo del sottotracciato seguono il nuovo inizio. Il tracciato della curva separata rimane invariato. Nei dati misti, anche le posizioni assolute successive rimangono ancorate alle coordinate specificate, quindi modificare il primo spostamento può deformare il tracciato.

Per spostare tutta la grafica a due tracciati come un'unità, mantieni entrambe le stringhe d e inserisci i loro elementi in un gruppo con transform="translate(20 20)". La specifica SVG del sistema di coordinate spiega come le trasformazioni stabiliscano corrispondenze tra coordinate. Una trasformazione di gruppo cambia il posizionamento senza riscrivere i dati originali dei tracciati.

Controlla che l'area di visualizzazione contenga ancora la grafica spostata; traslare un gruppo non ne ingrandisce automaticamente la tela. La guida all'ordine delle trasformazioni SVG tratta il posizionamento quando traslazione e scala vengono combinate.

Ispeziona la geometria sorgente prima di cambiarne la notazione

PerfectVector può aiutarti quando la grafica esiste soltanto come PNG o JPG. Prepara un candidato SVG, poi confronta la sagoma ricostruita, i fori e la forma delle curve con il sorgente prima di modificare i dati dei tracciati. La notazione assoluta o relativa non stabilisce se la geometria ricostruita sia adatta.

Usa direttamente un originale vettoriale disponibile, oppure ridisegna un simbolo semplice quando è più facile controllarlo. Riscrivere i comandi non può recuperare la forma desiderata da informazioni raster mancanti. La panoramica sulla vettorializzazione delle immagini spiega quella fase separata di ricostruzione.

Quando modifichi un SVG utilizzabile, conserva una copia dell'originale, cambia un segmento supportato alla volta e confronta il file reale alla stessa scala. Segui l'inizio del sottotracciato oltre al punto corrente. Mantieni le impostazioni di riempimento e tratto durante il confronto, poi prova il file esportato nell'applicazione ricevente.

FAQ

La prima m minuscola è relativa a un altro tracciato? No. Quando m è il primo comando di un tracciato, la sua prima coppia viene trattata come inizio assoluto. Le coppie aggiuntive sono linee relative implicite, e il punto finale di un altro elemento path non è il suo riferimento iniziale.

Dove si trova il punto corrente dopo Z o z? All'inizio del sottotracciato appena chiuso. Uno spostamento relativo successivo usa quel punto ripristinato, non il punto finale della linea precedente.

Posso convertire un tracciato rendendo minuscoli i comandi? No. I valori di posizione devono essere ricalcolati secondo la semantica di ogni comando. In questo esempio L180 40 diventa l140 0 dal punto corrente (40, 40), mentre l180 40 disegna una linea diversa.

Fonti

1. W3C — Tracciati SVG 2 — Definisce punti correnti, moveto iniziale, linee implicite, chiusura e parametri cubici.
2. MDN — Tutorial sui tracciati — Illustra i comandi assoluti e relativi di linee e curve.
3. MDN — Attributo d — Elenca i ruoli dei parametri dei comandi, compresi archi e closepath.
4. W3C — Sistemi di coordinate SVG 2 — Spiega le corrispondenze tra coordinate utente e il posizionamento della grafica mediante trasformazioni.

Parti da grafica disponibile soltanto come raster? Prepara tracciati SVG con PerfectVector, ispeziona sagoma e aperture ricostruite, poi modifica soltanto i comandi che conosci e verifica l'SVG da consegnare rispetto all'originale.