Curve Bézier SVG: correggere pieghe senza nuovi nodi

Per eliminare una piega indesiderata dove si incontrano due normali segmenti Bézier cubici, mantieni fermo il punto di ancoraggio condiviso e allinea le maniglie adiacenti su una retta, ai lati opposti di quell'ancora. Le loro lunghezze possono differire mentre le curve condividono una direzione tangente. Maniglie riflesse uguali impongono una condizione aggiuntiva; non sono necessarie per ogni giunzione visivamente regolare.

Esamina la forma sorgente prima di fare questo cambiamento. Una punta di foglia, una tacca o un angolo di una lettera possono essere voluti. La correzione qui sotto riguarda un cambiamento di direzione indesiderato, mantenendo fissi inizio, giunzione, fine e numero di segmenti.

Trova le due maniglie che controllano la giunzione

Un comando SVG cubico ha due punti di controllo e un punto finale:

C firstControlX firstControlY secondControlX secondControlY endX endY

Il segmento parte dal punto corrente. Il suo primo punto di controllo guida la direzione in uscita da quell'inizio; il secondo guida l'avvicinamento al punto finale. Il tutorial MDN sui tracciati illustra quei punti di controllo e la sintassi cubica. Per le coppie di coordinate dei comandi minuscoli, segui la guida ai comandi relativi dei tracciati SVG per seguire il riferimento prima di cambiare le maniglie.

Su un'ancora condivisa, esamina l'ultimo punto di controllo del segmento precedente e il primo del segmento successivo. Se quelle maniglie puntano lungo rette diverse, la giunzione cambia direzione. Aggiungere un altro nodo nelle vicinanze non risolve da solo quella relazione.

Correggi l'esempio originale con due segmenti

Salva questo SVG completo come join-example.svg e aprilo in un browser. È un simbolo curvo originale con una piega voluta a (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Il punto di controllo in ingresso è (100, 100), direttamente a sinistra della giunzione. Quello in uscita è (170, 50), sopra e alla sua destra. La curva arriva orizzontalmente e riparte in una direzione diversa.

Cambia soltanto il primo punto di controllo del secondo segmento in (175, 100):

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Ora entrambe le maniglie adiacenti giacciono sulla retta orizzontale che attraversa la giunzione. La maniglia in ingresso è lunga 50 unità e quella in uscita 25. La direzione tangente coincide anche se le lunghezze differiscono.

Per una coppia riflessa, cambia invece quel punto di controllo in (200, 100). Entrambe le maniglie si estendono allora di 50 unità dall'ancora condivisa. Questo cambia la forma del secondo segmento più della modifica con maniglie disuguali, quindi confronta entrambe con il contorno che intendi conservare.

Ogni versione ha due segmenti cubici e tre ancore sulla curva: inizio, giunzione e fine. I punti di controllo sono coordinate separate. Il confronto è un rendering originale nel browser, non un risultato ricalcato da PerfectVector o una schermata dello strumento nodi di un editor.

Controlla la direzione separatamente dalla lunghezza delle maniglie

Per una cubica che termina alla giunzione J con ultimo punto di controllo A, la derivata all'estremo è 3 × (J − A). La cubica successiva, che parte da J con primo punto di controllo B, ha derivata iniziale 3 × (B − J).

Nel nostro esempio la derivata in ingresso è (150, 0) in ogni pannello:

La coincidenza delle direzioni tangenti si chiama continuità G1. La coincidenza delle derivate prime è continuità C1, usando il consueto intervallo di parametro da zero a uno per ciascuna di queste due cubiche. Le note sulle derivate Bézier di Michigan Tech ricavano queste condizioni agli estremi.

Il test della direzione presuppone derivate agli estremi non nulle. Una maniglia collassata sulla propria ancora richiede un controllo separato, perché la sua derivata prima è zero. Inoltre, la sola collinearità non basta se entrambe le maniglie si trovano dallo stesso lato della giunzione: la direzione di percorrenza può invertirsi.

Nessuno degli esempi allineati garantisce una curvatura coincidente attraverso la giunzione. Una curva può non avere una discontinuità nella direzione tangente e richiedere comunque una rimodellazione per corrispondere alla sagoma prevista del logo. Esamina l'intera curva, non soltanto il nodo selezionato.

Usa S soltanto quando la riflessione è la forma desiderata

La versione riflessa può essere scritta più brevemente:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Qui S deduce il primo punto di controllo riflettendo l'ultimo punto di controllo della cubica precedente intorno al punto corrente:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Le coppie rimanenti in S240 50 270 50 specificano il secondo punto di controllo e il punto finale. Questa è la versione con maniglie riflesse 50/50. Non può sostituire la versione 50/25 senza cambiare la curva.

La specifica dei comandi cubici SVG limita quella regola di riflessione a un comando precedente C, c, S o s. Se il comando precedente è una linea o una curva quadratica, il primo punto di controllo implicito è invece il punto corrente.

Per esempio:

M30 150 L150 100 S240 50 270 50

Dopo la linea, l'ultimo segmento si comporta come C150 100 240 50 270 50. La sua prima maniglia è collassata sull'inizio. Può comunque curvarsi perché la geometria di controllo restante non è collineare; S dopo una linea non impone un segmento dritto.

Il nostro controllo nel browser ha confrontato il tracciato S riflesso con il suo equivalente C esplicito, poi ha verificato questo esempio di linea seguita da S rispetto alla propria espansione esplicita. Entrambi i confronti coincidevano nelle posizioni campionate. Questo conferma questi esempi, mentre la specifica definisce la regola generale.

Esegui la stessa correzione in un editor di nodi

Lavora su una copia, seleziona il tracciato e mostra le maniglie intorno alla giunzione sospetta. Conferma che ci sia una sola ancora condivisa. Due punti finali separati che si sovrappongono soltanto possono richiedere una correzione della topologia prima di cambiare le direzioni delle maniglie.

In Inkscape, la guida ai tipi di nodo distingue nodi smooth, le cui maniglie condividono una retta, da nodi simmetrici, le cui maniglie restano anche uguali in lunghezza. Usa il tipo di nodo adatto al contorno anziché imporre la simmetria a ogni giunzione.

Mantieni ferma l'ancora mentre regoli la direzione delle maniglie. Poi accorciale o allungale per recuperare la forma prevista intorno alla giunzione. Confronta il risultato sia a forte zoom sia alle dimensioni normali di visualizzazione e riapri l'SVG salvato per esaminare il tracciato esportato.

Se il tracciato contiene ancore affollate su tutta la curva, una modifica locale delle maniglie può non bastare. La guida al numero di nodi SVG descrive la semplificazione, mentre il procedimento di modifica SVG descrive cambiamenti più ampi. Conserva gli angoli voluti durante entrambe le operazioni.

Confronta la forma corretta con la sorgente

Una giunzione regolare è un controllo di qualità. Non dimostra che un logo ricalcato corrisponda all'originale. Confronta sagoma, aperture e angoli voluti usando la lista di controlli della qualità di ricalco vettoriale.

Se è disponibile soltanto un PNG o JPG del simbolo, il vettorializzatore di loghi di PerfectVector può preparare un candidato SVG modificabile. Esamina i contorni, poi usa una correzione locale delle maniglie dove resta una piega indesiderata. Tieni il riferimento raster accanto al tracciato modificato così la regolarizzazione della curva non cancella una caratteristica da conservare.

Usa un originale vettoriale esistente quando disponibile. La geometria esatta di un marchio o una sorgente molto danneggiata possono richiedere ricostruzione manuale; la guida alla vettorializzazione dei loghi spiega quella scelta. Ritoccare una giunzione è utile quando il resto del contorno è già adatto.

FAQ

Le due maniglie Bézier devono avere la stessa lunghezza per una giunzione regolare? No. Maniglie non nulle possono avere lunghezze diverse condividendo la stessa direzione tangente. All'ancora condivisa devono giacere su una retta, ai lati opposti. Maniglie riflesse uguali aggiungono derivate prime coincidenti per i due segmenti cubici usati qui.

Perché il comando SVG S cambia la mia curva? S deduce il proprio primo punto di controllo. Dopo C o S riflette l'ultimo punto di controllo della cubica precedente; dopo altri tipi di comando usa il punto corrente. Quel punto dedotto può differire dal punto di controllo esplicito che intendevi usare.

Dovrei rendere regolare ogni nodo di un logo ricalcato? No. Conserva angoli, punte e tacche voluti. Correggi localmente una piega indesiderata, poi confronta l'intera sagoma con la sorgente. Una giunzione con continuità tangente da sola non dimostra una ricostruzione accurata.

Fonti

1. MDN — Tracciati SVG — Spiega punti di controllo cubici e sintassi dei comandi dei tracciati.
2. Michigan Tech — Derivate Bézier — Ricava tangenti agli estremi e condizioni per unire curve.
3. W3C — Comandi Bézier cubici SVG — Definisce la regola di riflessione e il punto di controllo di ripiego per S.
4. Inkscape — Tipi di nodo — Distingue il comportamento di nodi angolari, smooth, simmetrici e automatici.

Se il tuo logo parte da un'immagine raster, prepara un candidato SVG con PerfectVector, esamina giunzioni e sagoma, poi correggi soltanto le curve che ne hanno bisogno conservando gli angoli voluti.