Paint order SVG: contorni spessi dietro le lettere

Imposta paint-order="stroke fill" su un elemento SVG di testo o forma per disegnarne il contorno prima del riempimento. Con un riempimento opaco, questo copre la porzione interna del tratto, impedendo a un contorno spesso di invadere la superficie colorata delle lettere. Puoi anche scrivere paint-order: stroke fill; in CSS.

Il tracciato, la dimensione del carattere e lo spessore del tratto restano uguali. È un'impostazione dell'aspetto, utile quando un logo testuale con contorno diventa pesante o poco leggibile dopo aver aumentato lo spessore del tratto. Non crea un tratto allineato all'esterno né un nuovo contorno di taglio.

Perché il contorno predefinito invade le lettere

SVG normalmente disegna il riempimento di un elemento, poi il tratto e infine i marcatori. Un tratto centrato si estende sui due lati del bordo della forma riempita. Disegnarlo per ultimo copre parte del riempimento. Su aste strette delle lettere, un tratto largo può nascondere quasi tutto il colore della superficie.

Invertire le prime due operazioni permette al riempimento di coprire questa sovrapposizione. La specifica SVG sulla colorazione definisce l'ordine e il riferimento MDN all'attributo SVG documenta sia l'attributo sia l'equivalente CSS. Il valore abbreviato stroke ha lo stesso ordine di stroke fill markers: le operazioni omesse seguono poi nel loro normale ordine relativo.

L'effetto richiede un riempimento visibile. Un tracciato con fill="none" non ha nulla da disegnare sopra il tratto interno. Un riempimento parzialmente trasparente può lasciar trasparire quel tratto, quindi usa un riempimento opaco per ottenere il risultato mostrato qui.

Confronta la stessa grafica a due dimensioni

Abbiamo creato un breve logo testuale BOLD con testo modificabile e un piccolo emblema triangolare composto da un tracciato. Il confronto nel browser qui sotto cambia soltanto l'ordine di disegno dentro ogni coppia. Usa spessori del tratto di 4 e 8 unità utente SVG, poi visualizza lo stesso viewBox 400 × 110 a larghezze di 400 e 200 pixel CSS.

Con l'impostazione a 8 unità, il logo testuale con ordine normale perde gran parte della superficie gialla. Disegnare il riempimento per ultimo mantiene visibili le aste gialle. L'effetto resta evidente nella versione da 200 pixel, ma le piccole aperture rimangono strette. Anche la minuscola apertura interna dell'emblema diventa difficile da distinguere con il tratto più pesante.

Questo dettaglio conta: l'ordine di disegno può preservare la superficie di una lettera senza rendere leggibile ogni foro o spazio. I tratti continuano a estendersi negli spazi non riempiti. Se un'apertura si chiude alla dimensione prevista, riduci il tratto o semplifica la grafica. Ingrandire l'anteprima del browser non sostituisce il controllo alla dimensione che il lettore vedrà effettivamente.

Sono esempi di disegni originali, non risultati di conversione di PerfectVector. Il logo testuale usa il carattere Arial installato con un'alternativa sans-serif; un altro carattere cambia forme e spaziatura delle lettere.

Prova un SVG completo

Salva questo esempio come wordmark.svg e aprilo direttamente in un browser. L'esempio lascia spazio sufficiente attorno alle forme per il tratto visibile. Cambia paint-order in normal per il confronto, poi prova stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Il gruppo passa le proprietà di colorazione al tracciato e al testo. Ogni figlio usa l'ordine richiesto per il proprio rendering. fill-rule="evenodd" crea l'apertura interna dell'emblema; è indipendente dall'ordine di disegno.

Per riprodurre gli esempi piccoli, cambia width e height in 200 e 55, lasciando invariato il viewBox. Poiché questo file non ha un tratto non scalabile, grafica e tratto si ridimensionano insieme. Un tratto da 8 unità diventa largo 4 pixel CSS in questa mappatura a metà dimensione, prima di considerare la porzione nascosta dal riempimento.

Per una versione basata su un foglio di stile, assegna una classe all'elemento interessato e imposta:

.outlined-wordmark {
  paint-order: stroke fill;
}

Quando sia un attributo di presentazione sia una dichiarazione CSS specificano la proprietà, il CSS ha la precedenza. Se modificare l'attributo sembra non avere effetto, controlla le regole applicate. Il riferimento MDN per CSS spiega anche l'ereditarietà e le combinazioni di parole chiave consentite.

Cosa non cambia questa impostazione

Allineamento del tratto. Il tratto continua a seguire lo stesso tracciato centrale. Disegnare il riempimento sopra una sua parte crea un bordo dall'aspetto esterno attorno alle regioni riempite, ma non sposta la geometria del tratto verso l'esterno. Sul bordo di un foro, il tratto che resta visibile può invadere il foro.

Sovrapposizione di oggetti separati. Impostare l'ordine di disegno su un elemento non lo manda dietro una forma vicina. Un oggetto successivo che si sovrappone può ancora coprirlo. Riordina gli oggetti se è questo il problema. Per un esempio, vedi perché z-index SVG non riordina i tracciati dei loghi.

Tracciati di taglio o offset. Un plotter da taglio o uno strumento di geometria ha bisogno dei contorni appropriati. Non si può presumere che interpreti un bel contorno nel browser come un unico bordo unito. Crea e controlla separatamente la geometria richiesta se il lavoro da consegnare lo richiede.

Portabilità dei caratteri. L'esempio contiene testo modificabile. Cambiare il suo ordine di disegno non include il carattere nel file né fissa le forme dei glifi. Usa i controlli sui cambi di carattere SVG se un logo testuale cambia quando viene riaperto altrove.

Tieni distinte queste differenze durante la modifica. Un cambio di paint-order è facile da annullare; espandere i tratti o convertire il testo in tracciati cambia la struttura modificabile del documento.

Controlla la copia da consegnare nella destinazione

Parti dal risultato nel browser, poi apri il file salvato nell'applicazione o nel renderer che lo userà. Un'anteprima nel browser da sola non dimostra che un editor, un convertitore PDF o una pipeline di produzione conservi l'aspetto.

1. Confronta il colore della superficie e il bordo esterno alla dimensione finale. Guarda dentro B, O e tutte le aperture strette dell'emblema.
2. Verifica che sia stato caricato il carattere previsto. Controlla la spaziatura oltre alla forma delle lettere.
3. Controlla i bordi della pagina. Un tratto più largo può richiedere più spazio nel viewport o nell'area di ritaglio.
4. Riapri il file esportato da consegnare. L'esportazione può cambiare stili o costruzione degli oggetti anche quando il documento di lavoro appariva corretto.

Se la destinazione cambia il contorno, riduci il file a una sola forma con riempimento e tratto e confrontala con il browser. Segui la diagnosi dei tratti SVG che scompaiono quando il problema riguarda ritaglio, ridimensionamento o colorazione mancante. Per un conflitto fra regole di colore, la guida alla ricolorazione SVG spiega dove possono essere definiti riempimenti e tratti.

Se l'aspetto modificabile non sopravvive al passaggio, conserva l'originale modificabile e prepara una copia separata da consegnare con l'aspetto necessario rappresentato da forme. Verifica quella copia sia visivamente sia geometricamente; espandere semplicemente un tratto centrato non riproduce da solo ogni sovrapposizione desiderata e non crea un unico contorno esterno.

Quando la sorgente è un logo raster

Usa l'emblema vettoriale originale e il testo modificabile quando li hai. Non c'è vantaggio nel catturare una schermata di testo funzionante e ricalcarla solo per aggiungere un contorno.

Se un PNG o JPG è l'unica versione rimasta dell'emblema, il flusso di vettorializzazione dei loghi di PerfectVector può aiutarti a preparare prima un candidato SVG. Controlla la sagoma convertita e le piccole aperture prima di applicare questo stile. La conversione non imposta l'ordine di disegno, non identifica il carattere originale e non decide quali forme debbano condividere un contorno.

Quando puoi ricreare le lettere con il carattere corretto, mantienile come oggetto di testo separato durante la progettazione. La guida alla vettorializzazione dei loghi spiega come scegliere fra ricostruire grafica raster e usare un originale vettoriale esistente.

FAQ

Qual è l'ordine di disegno SVG predefinito? L'ordine predefinito è riempimento, poi tratto e infine marcatori. Il valore normal richiede quell'ordine.

paint-order="stroke" è diverso da "stroke fill"? Qui producono lo stesso ordine: tratto, riempimento e infine marcatori. Le operazioni non elencate seguono quelle elencate nel loro normale ordine relativo.

paint-order crea un tratto esterno? Non sposta il tratto né gli applica un offset. Un riempimento opaco nasconde la porzione interna di un tratto centrato. Il tratto rimasto può ancora restringere fori e spazi.

Perché il contorno del mio SVG appare ancora troppo pesante? Il tratto può essere troppo largo per la dimensione di visualizzazione, il riempimento può essere trasparente oppure un'altra regola CSS può prevalere sull'ordine di disegno. Controlla queste condizioni e verifica le piccole aperture alla dimensione finale.

Fonti

1. W3C — Colorazione SVG 2 — Definisce l'ordine di disegno e la relazione fra riempimenti e tratti.
2. MDN — Attributo SVG paint-order — Documenta l'ordine delle parole chiave, i tipi di elementi supportati e la precedenza CSS sull'attributo di presentazione.
3. MDN — Proprietà CSS paint-order — Spiega l'ereditarietà e le sequenze abbreviate di parole chiave.

Hai soltanto un emblema raster? Prepara un SVG del logo modificabile, controlla le aperture e verifica il contorno alla dimensione prevista prima di creare la copia da consegnare.