Punte miter SVG: correggere gli angoli senza tagli

Una punta simile a un ago su un contorno SVG deriva di solito da una giunzione miter in un angolo acuto. Se non vuoi la punta, abbassa stroke-miterlimit o scegli una giunzione smussata o tonda. Se la punta fa parte del disegno ma la sua estremità scompare, dai al contorno disegnato più spazio nel viewBox. Sono correzioni diverse: una cambia la forma dell'angolo; l'altra cambia ciò che il file può visualizzare.

Conserva una copia dell'SVG originale durante i test. Un logo con una punta acuta voluta può richiedere di conservarne la giunzione miter, mentre una punta indesiderata su un contorno importato può richiedere una giunzione più piatta. Decidi prima quale angolo deve essere conservato.

Perché un angolo stretto sviluppa una punta

Un tracciato con contorno ha larghezza su entrambi i lati della propria linea centrale. Con stroke-linejoin="miter", i bordi esterni del contorno proseguono fino a incontrarsi. Più acuta è la svolta, più lontano può trovarsi quel punto di incontro. SVG usa miter come stile iniziale di giunzione e il valore iniziale di stroke-miterlimit è 4, secondo la definizione di disegno SVG 2.

Il limite è un rapporto, non una distanza in pixel o unità SVG. Se la lunghezza della giunzione miter divisa per stroke-width supera il limite, una normale giunzione miter diventa uno smusso. Un limite più alto consente una punta più lunga; uno più basso rende piatti più angoli acuti. La documentazione MDN del limite miter mostra la relazione con l'angolo e osserva che una proprietà CSS può sovrascrivere l'attributo di presentazione SVG.

Un tracciato, quattro risultati visibili

Per questo test abbiamo disegnato un segmento di emblema aperto e angolare con d="M130 520 L180 200 L230 520" e un contorno di 26 unità. I primi due pannelli usano un limite miter di 10. Il secondo applica un limite visibile stretto a y=170, che taglia l'estremità. Il terzo usa un limite di 4, quindi questo angolo diventa uno smusso. Il quarto usa round. È un'illustrazione controllata di quel tracciato e renderer, non la promessa che ogni SVG importato abbia la stessa forma dell'angolo.

Il tracciato centrale rosso tratteggiato resta invariato in tutti e quattro i pannelli. Questo conta: cambiare la giunzione del contorno può correggere un profilo disegnato senza ricostruire il tracciato vettoriale sottostante.

È una punta, uno smusso o una punta tagliata?

A prima vista una punta tagliata può somigliare a uno smusso voluto. Ingrandisci e controlla se la sua estremità si allinea con il limite del file. La diagnosi dei contorni SVG che scompaiono descrive altre cause relative a disegno e ritaglio; questo test isola l'angolo miter.

Correggi l'angolo senza cambiare l'aspetto sbagliato

1. Trova il tracciato e la sua giunzione effettiva

Seleziona l'angolo in un editor vettoriale oppure cerca nel testo SVG stroke, stroke-width, stroke-linejoin e stroke-miterlimit. Controlla gruppi genitori e regole CSS oltre agli attributi del tracciato. Una proprietà stroke-miterlimit inline o nel foglio di stile può avere precedenza sullo stesso attributo di presentazione dell'elemento, come documenta MDN.

Se l'oggetto selezionato è un profilo riempito anziché un contorno attivo, smetti di regolare le impostazioni miter. Devi cambiare il tracciato di quel riempimento o tornare all'originale con il contorno non espanso. Se l'intera importazione ha dimensioni sbagliate, esegui il test di importazione SVG con dimensioni note prima di compensare cambiando la larghezza del contorno.

2. Cambia una sola impostazione di giunzione su un duplicato

Prova prima uno smusso quando un angolo piatto e netto è accettabile. Prova round quando il disegno consente un bordo ammorbidito. Mantieni miter quando la punta precisa fa parte del marchio e scegli un limite che conservi soltanto le punte volute. La documentazione SVG di stroke-linejoin definisce come differiscono le forme comuni delle giunzioni.

Ecco una piccola copia di test del tracciato usato sopra:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Cambia stroke-miterlimit in 4 per vedere il ripiego smussato su questo specifico angolo. Poi ripristina 10 e cambia stroke-linejoin in round o bevel. Il valore di stroke-miterlimit è irrilevante per questi ultimi due stili di giunzione. Non abbassarlo in tutto un logo soltanto perché un angolo si comporta male; altre punte possono essere volute.

3. Dai a una punta voluta abbastanza tela

Se la giunzione miter è corretta ma scompare al bordo, ingrandisci o riposiziona il viewBox intorno al risultato disegnato, non soltanto alle coordinate del tracciato. La definizione dei sistemi di coordinate SVG 2 spiega il rettangolo visibile; il contorno può estendersi oltre le coordinate del suo tracciato centrale. Controlla anche viewport SVG annidati e tracciati di ritaglio. Un ritaglio genitore può continuare a tagliare la punta anche dopo l'espansione del viewBox radice.

Non considerare una tela più grande la cura per un ago accidentale. Rivela soltanto una parte maggiore di quell'ago. Viceversa, cambiare la giunzione in bevel soltanto per adattarla a una tavola stretta può cancellare un angolo progettato. Confronta il file consegnato con il simbolo originale alle dimensioni effettive di visualizzazione o stampa. Se un fornitore misura dimensioni fisiche SVG, conserva larghezza e altezza previste cambiando consapevolmente la mappatura del viewBox.

4. Riapri il file consegnato

Esamina il risultato in un browser e nell'editor o applicazione di produzione di destinazione. Controlla la punta al 100% e alle dimensioni finali previste. Se la consegna richiede contorni riempiti anziché contorni attivi modificabili, conserva l'originale, converti il contorno di una copia di consegna in tracciato in un editor ed esamina il nuovo limite riempito. La conversione cambia la geometria; non è un'impostazione miter reversibile. Per un controllo più ampio di riempimenti e contorni, consulta la guida a paint-order SVG.

Quando un logo raster richiede prima un nuovo tracciato

I controlli miter funzionano soltanto su un contorno vettoriale attivo. Se l'unico logo rimasto è un PNG o JPG, il procedimento di vettorializzazione dei loghi di PerfectVector può creare un candidato SVG prima di modificarne gli angoli. Confronta sagoma recuperata, piccoli spazi e struttura dei tracciati con la sorgente. Un ricalco può rappresentare una linea raster spessa come un profilo riempito, non la linea centrale modificabile originale, quindi non aspettarti che stroke-miterlimit corregga automaticamente quel risultato. Ridisegna un punto geometrico essenziale quando deve corrispondere esattamente all'originale del marchio.

Se esiste l'SVG originale, correggi quel file anziché vettorializzare una schermata. La guida alla vettorializzazione dei loghi aiuta quando devi davvero ricostruire grafica dai pixel; questo articolo inizia dopo che esiste già un contorno attivo adatto.

Controllo finale degli angoli

1. Salva l'originale vettoriale intatto.
2. Conferma se l'angolo è un contorno attivo o un profilo riempito.
3. Confronta miter, bevel e round sul singolo tracciato interessato.
4. Se conservi una giunzione miter, testa il suo limite e lascia spazio visibile sufficiente per l'intera punta disegnata.
5. Riapri l'SVG nella destinazione effettiva e controllalo alle dimensioni finali.

FAQ

Perché il mio SVG ha punte negli angoli acuti? Una giunzione miter estende i bordi esterni del contorno fino a incontrarsi. Su un angolo acuto quel punto di incontro può essere lontano dal tracciato centrale. Abbassa il limite miter o usa bevel o round quando la punta è indesiderata.

Perché abbassare stroke-miterlimit rende piatto un angolo? Quando il rapporto tra lunghezza miter e larghezza del contorno supera il limite, una normale giunzione miter passa a bevel. Valori più bassi attivano quel ripiego su più angoli. Mantieni un limite più alto se la punta acuta è voluta, poi controllane i limiti.

Perché la punta SVG è ancora tagliata dopo aver aumentato il limite miter? Il limite più alto può allungare la punta mentre il viewBox o un ritaglio continua a tagliarla. Espandi la regione visibile intorno al contorno disegnato o riposiziona il simbolo, poi riapri l'SVG consegnato nella destinazione.

Fonti

1. W3C — Disegno SVG 2 — Definisce giunzioni dei contorni, valori iniziali e comportamento di ripiego miter.
2. MDN — stroke-miterlimit — Spiega il rapporto del limite e la sua relazione con gli angoli acuti.
3. MDN — stroke-linejoin — Definisce le forme comuni degli angoli per tracciati con contorno.
4. MDN — CSS stroke-miterlimit — Documenta la precedenza della proprietà CSS sull'attributo di presentazione SVG.
5. W3C — Sistemi di coordinate SVG 2 — Definisce la relazione tra viewBox e viewport usata per il controllo dei limiti.

Se un simbolo soltanto raster richiede tracciati utilizzabili prima di questa correzione, crea un candidato SVG dal logo, esamina la geometria e poi regola o ridisegna gli angoli che contano.