Tratto SVG: posiziona i contorni dentro o fuori

Un tratto SVG è centrato sul suo tracciato. Per far stare un contorno di 12 unità interamente dentro una forma chiusa, disegna un tratto di 24 unità e ritaglialo sulla forma. Per mettere la stessa larghezza visibile fuori, disegna il tratto di 24 unità attraverso una maschera che nasconde l'interno della forma. Conserva una copia del tracciato originale: il ritaglio e la maschera cambiano ciò che è visibile, non la geometria sottostante.

La proprietà proposta stroke-alignment appare in una bozza editoriale SVG Strokes, ma quella bozza dice che la definizione del tratto in SVG 2 rimane normativa. Per un file che deve funzionare in browser ed editor diversi, costruisci e prova il risultato visibile anziché affidarti alla proprietà proposta.

Guarda dove si trova il contorno disegnato

Questo distintivo chiuso originale usa un solo tracciato in tutti e tre i pannelli. Il riempimento verde petrolio, il contorno visibile nominale di 12 unità e lo spazio circostante del documento rimangono uguali. La linea tratteggiata corallo è il tracciato centrale. Nel pannello centrale coincide con il bordo esterno della fascia blu; a destra coincide con quello interno.

Il pannello centrale mantiene il limite esterno disegnato del distintivo sul suo tracciato originale. Il pannello esterno espande l'ingombro disegnato di 12 unità attorno al tracciato. Se il distintivo quasi tocca il bordo del viewBox, quel colore aggiunto può essere tagliato. La guida MDN a riempimenti e tratti descrive i normali tratti come centrati sul tracciato; il confronto sopra renderizza le tre costruzioni a una dimensione.

Crea un contorno interno con un ritaglio

Posiziona il tracciato chiuso in <defs>. Riutilizzalo una volta come riempimento e una come ritaglio. Disegna una seconda copia con il doppio della larghezza di tratto desiderata, poi limita quel tratto all'interno del tracciato. Un ritaglio rende invisibile tutto ciò che si trova fuori dalla sua forma; non elimina la metà nascosta del tratto. Consulta il riferimento MDN di clipPath e la nostra guida alle coordinate clipPath se un ritaglio importato si sposta rispetto alla sua grafica.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Qui il tratto di 24 unità raggiunge normalmente 12 unità su ciascun lato del tracciato. Il ritaglio rimuove la metà esterna, lasciando una fascia visibile di 12 unità all'interno. Metti il riempimento sotto il tratto ritagliato, come nell'esempio, se vuoi che l'intera fascia interna rimanga visibile. Per tracciati composti con fori, esamina le regole di riempimento e ritaglio prima di presumere quale lato sia interno.

Crea un contorno esterno con una maschera

Una fascia esterna richiede la regione di visibilità inversa. La maschera qui sotto è bianca sull'area del documento e nera all'interno del distintivo. È applicata soltanto alla copia del tratto, mentre una copia senza maschera fornisce il riempimento. La regione esplicita della maschera lascia spazio al tratto oltre la forma originale.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Anche qui sopravvive soltanto metà del tratto centrato di 24 unità, quindi la fascia esterna visibile è larga 12 unità. Imposta deliberatamente la regione della maschera: MDN documenta come maskUnits, maskContentUnits e le dimensioni della regione influenzano una maschera. Il rettangolo bianco deve coprire tutto il tratto esterno. Una maschera troppo piccola può tagliare proprio il bordo che volevi conservare.

C'è un trucco visivo più breve per un riempimento opaco: disegna un tratto di larghezza doppia, poi disegna il riempimento sopra con paint-order="stroke fill". Questo nasconde la metà interna sotto il riempimento, ma il tratto esiste ancora lì e può riapparire se il riempimento diventa traslucido o viene rimosso. MDN spiega l'ordine di disegno. Usa la maschera esplicita quando la fascia esterna deve rimanere una costruzione visibile distinta. Per un contorno ricavato dall'intera sagoma alfa multicolore, consulta i contorni morfologici SVG; quel filtro cambia l'aspetto conservando i tracciati sorgente.

Controlla l'SVG dopo l'importazione

Ritagli e maschere influenzano il rendering, mentre un'applicazione a valle può richiedere contorni riempiti. Mantieni un originale modificabile e prova una copia di consegna nella destinazione effettiva:

1. Apri l'SVG da solo, poi inseriscilo nell'editor o nell'app di produzione prevista. Confronta i bordi interni ed esterni allo stesso zoom.
2. Controlla il viewBox o la tavola da disegno attorno alla versione esterna. Lascia spazio per la fascia di 12 unità verso l'esterno e per eventuali giunzioni agli angoli acuti.
3. Esamina l'elenco degli oggetti. Gli esempi contengono tracciati riutilizzabili, un ritaglio o una maschera e un tratto modificabile. Non creano un unico contorno pieno.
4. Se il destinatario richiede geometria riempita, converti il tratto selezionato su una copia di consegna ed esamina le forme risultanti. Mantieni la sorgente con tratto modificabile per future modifiche della larghezza.

Se la linea scompare durante l'esportazione, usa la lista di controllo della visibilità dei tratti per distinguere colore mancante, ritaglio e supporto all'importazione. Se un tratto copre inaspettatamente un riempimento, la nostra spiegazione di paint-order in SVG mostra quale livello viene disegnato per ultimo.

Dove si inserisce PerfectVector

Questi passaggi partono da un tracciato SVG modificabile. Se il logo esiste soltanto come PNG o JPG, il flusso di vettorializzazione dei loghi di PerfectVector può creare un candidato SVG prima che tu aggiunga il ritaglio o la maschera. Confrontane sagoma, angoli ed eventuali aperture con l'originale alla dimensione di consegna prevista. La vettorializzazione recupera geometria candidata; non assegna per te l'allineamento interno o esterno del tratto.

Se il tracciato SVG originale è disponibile, modificalo direttamente. Ricalcarne uno screenshot aggiungerebbe un passaggio di ricostruzione inutile e potrebbe cambiare il confine che stai cercando di allineare. La nostra guida alla vettorializzazione dei loghi aiuta a scegliere tra ricalco, ridisegno e conservazione di un originale vettoriale esistente.

FAQ

SVG supporta l'allineamento interno o esterno del tratto? Una bozza editoriale SVG Strokes descrive quei valori, ma afferma che SVG 2 rimane la definizione normativa del tratto. Per una consegna portabile, usa un ritaglio o una maschera verificati anziché dipendere dalla proprietà in bozza.

Perché raddoppio la larghezza del tratto? Un tratto normale si trova per metà su ciascun lato del tracciato. Un ritaglio o una maschera scarta una metà. Un tratto di 24 unità lascia quindi una fascia interna o esterna visibile di 12 unità in questi esempi.

Un ritaglio interno o una maschera esterna crea contorni pronti per il taglio? No. Cambiano l'aspetto renderizzato, mentre il tracciato e il tratto sottostanti rimangono. Se una macchina da taglio o un fornitore richiede contorni riempiti, crea una copia di consegna separata, converti il tratto in tracciati in un editor adatto ed esamina la geometria dopo l'importazione.

Fonti

1. MDN — Riempimenti e tratti — Definisce il rendering del tratto centrato e il comportamento di paint-order discusso qui.
2. W3C SVG Working Group — Bozza editoriale SVG Strokes — Stabilisce i valori di allineamento proposti e lo stato della bozza rispetto a SVG 2.
3. MDN — Elemento clipPath — Definisce come la costruzione interna limita la visibilità.
4. MDN — Elemento mask — Definisce regione della maschera e attributi di coordinate usati per la costruzione esterna.
5. Alex Chan — Disegnare tratti interni/esterni in SVG — Mostra l'approccio di ritaglio e maschera a larghezza doppia usato come punto di partenza per il nostro campione originale del distintivo.

Se il tuo logo è ancora un'immagine raster, crea un candidato SVG con PerfectVector, esamina il confine del tracciato, poi prova la costruzione interna o esterna nell'editor e verifica il file consegnato nella sua destinazione.