SVG shape-rendering crispEdges: quando è utile?
Scopri quando crispEdges aiuta le forme sulla griglia di pixel, quando rende ruvide le curve e perché testarlo nel browser a due dimensioni è meglio che trattarlo come una correzione.
In questa pagina
Usa shape-rendering="crispEdges" quando un SVG ha bordi volutamente netti, perlopiù dritti, e un test alle dimensioni finali di visualizzazione appare migliore con questa impostazione. Lascia il valore predefinito auto quando la differenza è trascurabile. Sulla grafica curva, l'indicazione può rendere un bordo più ruvido. Cambia il modo in cui un renderer disegna le forme esistenti, non le forme stesse. La specifica SVG 2 la definisce un'indicazione e consente al renderer di ridurre l'antialiasing o allineare alcuni bordi ai pixel del dispositivo.
Questa distinzione conta se una piccola icona appare sfocata o un logo sembra seghettato dopo l'esportazione. crispEdges non può trasformare un PNG incorporato in tracciati, riparare un contorno interrotto o promettere gli stessi pixel in ogni browser. Prima di cambiare globalmente il file, confronta una forma rappresentativa con auto, crispEdges e geometricPrecision alle dimensioni che le persone vedranno realmente.
Scegli in base al bordo che ti serve
- Grafica rettangolare su griglia di pixel: testa
crispEdgessulle forme interessate, poi controlla sia dimensioni di uscita piccole sia più grandi. - Curve o scritte arrotondate: parti da
auto; provageometricPrecisionse il renderer produce una differenza visibile. - Uno spazio tra forme adiacenti: esamina prima la geometria. Un'indicazione di rendering non può chiudere un vero foro.
- Un PNG ridimensionato dentro un SVG: usa i controlli di ridimensionamento raster o ricostruisci la grafica come tracciati se l'obiettivo è la modificabilità.
Cosa chiede crispEdges al renderer
SVG ha quattro valori di shape-rendering. Sono priorità, non quattro formati di esportazione. Il valore predefinito auto lascia al renderer il bilanciamento tra velocità, contrasto dei bordi e precisione geometrica. crispEdges privilegia un forte contrasto dei bordi e può sopprimere l'antialiasing; geometricPrecision privilegia la fedeltà della geometria. La documentazione MDN dell'attributo SVG spiega che un renderer potrebbe trattare diversamente tutti i bordi, oppure soltanto quelli quasi orizzontali e quasi verticali. Non esiste un filtro di nitidezza obbligatorio.
| Valore | Cosa richiede | Primo test utile |
|---|---|---|
auto | Il renderer sceglie il compromesso | Riferimento di base per ogni SVG |
crispEdges | Maggiore contrasto sui bordi delle forme | Simboli quadrati o dettagli a griglia |
geometricPrecision | Posizionamento geometrico più fedele | Curve, diagonali e contorni sottili |
optimizeSpeed | Priorità alla velocità di rendering | Contesti specifici; non presumere un miglioramento visivo |
Un attributo sullo SVG padre può essere ereditato dalle forme figlie, quindi applicarlo alla radice può influire su un cerchio che dovrebbe mantenere bordi regolari. Puoi invece intervenire su un singolo rettangolo o tracciato. Se si applicano sia l'attributo di presentazione SVG sia una dichiarazione CSS shape-rendering, la proprietà CSS ha la precedenza.
Abbiamo confrontato le stesse forme a due dimensioni
Abbiamo creato un simbolo rettangolare a griglia e un contorno curvo come forme SVG originali. Markup, riempimenti e viewBox erano identici nelle tre colonne; cambiava soltanto il valore shape-rendering. Ogni forma è stata renderizzata a 63 e 111 pixel CSS in Chromium con zoom del browser al 100%. La figura è una cattura dal browser di quel test locale, non un'illustrazione di un risultato immaginato.
Nessuna delle modalità cambia i tracciati. In questa cattura le differenze sono troppo piccole per dichiarare un'impostazione vincente in generale. Il nome sembra quello di uno strumento di riparazione, ma l'effetto può essere lieve per una specifica forma, dimensione e renderer. Esamina la destinazione effettiva prima di mantenere l'attributo aggiuntivo.
Questo era un singolo rendering Chromium, non uno studio sulla compatibilità dei browser. Un visualizzatore PDF, un editor grafico o un browser con un'altra scala del dispositivo può rasterizzare diversamente gli stessi tracciati. La definizione SVG 2 lascia volutamente aperte le scelte di implementazione.
Provalo su una forma prima di applicarlo ovunque
Salva una copia dell'SVG, poi applica l'indicazione a una forma rappresentativa. Per esempio, applicala alla parte rettangolare di un'icona lasciando il dettaglio curvo su auto:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect x="4" y="4" width="16" height="8" fill="#154b67"
shape-rendering="crispEdges" />
<path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
stroke-width="2" shape-rendering="auto" />
</svg>Apri il file nel visualizzatore previsto a una piccola dimensione da icona e a una dimensione più grande. Confrontalo con l'originale salvato, incluse diagonali e curve. Se applichi stili all'SVG inline con CSS, controlla se una regola sovrascrive l'attributo. Rimuovi l'indicazione quando non produce un miglioramento significativo; una proprietà superflua rende più difficile diagnosticare successive differenze di visualizzazione.
Abbina la correzione al sintomo reale
| Sintomo | Primo controllo | Passaggio successivo migliore |
|---|---|---|
| Un simbolo quadrato appare poco nitido a una dimensione | Confronta auto e crispEdges a quella dimensione | Mantieni l'indicazione soltanto se migliora l'uscita prevista |
| Un cerchio o una diagonale appare seghettato | Controlla se crispEdges è ereditato o esportato su quella forma | Rimuovilo o confronta auto con geometricPrecision |
| Appare una linea sottile tra riempimenti che si toccano | Confronta zoom, sfondo e limiti dei tracciati | Usa la diagnosi delle fessure SVG; ripara la geometria soltanto se lo spazio è reale |
| Il file mostra ancora pixel quadrati quando viene ingrandito | Cerca un'immagine raster incorporata | Usa la lista di controlli per SVG pixelati anziché cambiare shape-rendering |
Per uno sprite PNG la cui griglia esatta di pixel è il disegno, mantenere il raster può essere la scelta più pulita. CSS image-rendering: pixelated controlla il campionamento di un'immagine ridimensionata; è una proprietà diversa da shape-rendering SVG. La guida alla conversione della pixel art spiega quando conservare la griglia, costruire tasselli vettoriali o smussare volutamente il contorno.
Quando è utile PerfectVector
Se l'unica sorgente è un piccolo PNG appiattito e ti servono tracciati modificabili, un'indicazione di rendering non può fornirli. PerfectVector è utile in quel passaggio precedente: converti il PNG in un candidato SVG, poi esamina le forme alle dimensioni necessarie. Controlla profilo, fori interni e piccoli dettagli prima di provare un'indicazione di visualizzazione sui tracciati selezionati. Un ricalco può reinterpretare i pixel come geometria; non può decidere se un gradino di pixel art debba diventare una curva regolare.
Conserva il PNG quando la griglia originale è la grafica finale. Se hai già un SVG pulito e soltanto la visualizzazione nel browser appare strana, correggi direttamente visualizzazione o geometria. Quando un PNG appiattito richiede davvero contorni modificabili, crea un candidato SVG con PerfectVector, esamina i tracciati e confronta il rendering nel browser alle dimensioni finali prima di aggiungere crispEdges.
FAQ
crispEdges elimina l'antialiasing da ogni forma SVG?
No. Chiede al renderer di privilegiare il contrasto dei bordi. La specifica consente implementazioni diverse, incluse quelle che cambiano soltanto alcuni bordi quasi verticali o quasi orizzontali. Testa l'uscita nel visualizzatore che userai.
Dovrei mettere shape-rendering="crispEdges" sull'intero SVG?
Soltanto se ogni forma figlia ne trae vantaggio. Un'indicazione alla radice può influire anche sui figli curvi. Applicare l'attributo a una sola forma rettangolare è più facile da valutare e rischia meno di rendere ruvida una curva.
crispEdges corregge fessure bianche o un PNG sfocato dentro un SVG?
Non può chiudere uno spazio reale o sostituire pixel raster con tracciati vettoriali. Diagnostica prima la geometria della fessura. Per un PNG ridimensionato, usa un metodo di ridimensionamento raster appropriato oppure crea tracciati vettoriali modificabili se è questa l'esigenza reale.
Fonti
- W3C — Proprietà shape-rendering SVG 2 — Definisce i quattro valori come indicazioni al renderer e spiega i compromessi consentiti.
- MDN — Attributo shape-rendering SVG — Documenta forme SVG interessate, ereditarietà e priorità del CSS.
- MDN — Proprietà CSS shape-rendering — Descrive il comportamento della proprietà e perché il rendering delle curve può variare.
- MDN — Proprietà CSS image-rendering — Distingue il ridimensionamento dei pixel raster dal rendering dei bordi di forme vettoriali.
Altro dal blog
Convert to Vector in Scratch: perché resta pixelato
Convert to Vector di Scratch cambia modalità senza ricalcare la bitmap. Controlla i punti del costume, scegli una correzione ed esamina l'SVG importato prima di usarlo.
z-index SVG non funziona? Ordina i tracciati
Se z-index non porta avanti un tracciato SVG, controlla l'ordine degli elementi. Confronta lo stesso emblema prima e dopo, poi verifica gruppi e file esportati.