Convertire SVG in WebP

La qualità predefinita qui è 92, nettamente più dei 75–82 che useresti per una foto, ed è voluto.

Ogni compressione con perdita è tarata su variazioni di colore graduali. Gli SVG producono l’opposto: grandi aree perfettamente uniformi che si incontrano su bordi netti. A qualità media questo si traduce in leggere macchie nelle forme piene e in un alone morbido lungo i confini, molto più visibili su un logo pulito di quanto lo sarebbe la stessa impostazione su una foto.

• 95–100: praticamente indistinguibile da un rendering senza perdita. Per loghi, icone e tutto ciò che contiene testo.
• 88–94: la fascia predefinita. Pulita sulla maggior parte delle opere.
• 75–87: gli artefatti diventano visibili attorno ai bordi e nei colori piatti.
• Sotto 75: nettamente degradato sulle grafiche.

Rendi più grande prima di alzare la qualità. Gli artefatti crescono con la dimensione dei pixel: un rendering a 2048 px a qualità 90 batte di solito uno a 512 px a qualità 100, e resta nitido se l’immagine verrà mai mostrata più grande.

Come per ogni rasterizzazione di SVG, controlla i caratteri. Se il file nomina un carattere invece di convertire il testo in tracciati, il motore di rendering lo sostituisce con ciò che ha. Converti il testo in tracciati nel tuo programma se le scritte contano.

Scegliere tra le tre destinazioni raster

• WebP: il migliore per un sito che gestisci. Trasparenza, bordi puliti, file più leggero.
• PNG: il migliore quando non sai cosa lo aprirà. Trasparenza, bordi puliti, supportato ovunque, file più pesante.
• JPG: solo quando qualcosa lo richiede espressamente. Niente trasparenza, e una compressione poco adatta ai colori piatti.

Servire sia un vettore sia un raster

Se vuoi la nitidezza dell’SVG dove è supportato e un raster di riserva altrove, l’elemento <picture> se ne occupa:

<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.webp" alt="…">
</picture>

In pratica tutti i browser attuali prendono l’SVG: questo protegge soprattutto da client insoliti.

Come gestiamo l’SVG in sicurezza

L’SVG è un documento strutturato più che un blocco di pixel, e un file scritto con cattive intenzioni può tentare cose di cui una foto è incapace: leggere file dal server, fare richieste di rete in uscita o trasportare script. È proprio per questo che tante piattaforme rifiutano i caricamenti di SVG e mandano le persone qui.

Due cose lo rendono sicuro qui. Ricevi un WebP, mai l’SVG: nulla di ciò che il file contiene può essere eseguito nel tuo browser. E ogni caricamento viene controllato prima che qualsiasi cosa lo analizzi: dichiarazioni di tipo di documento, definizioni di entità, script, gestori di eventi e riferimenti a risorse esterne comportano il rifiuto del file invece della sua riparazione. Le immagini incorporate come data URI e i riferimenti interni come i gradienti non vengono toccati: le normali esportazioni dei programmi di grafica si convertono senza problemi.

Convertire un set di icone

Aggiungi quanti file vuoi; ognuno viene reso alla larghezza scelta, con il proprio download. Se ti serve la stessa icona in più dimensioni, esegui il batch una volta per dimensione: ogni passaggio parte dal vettore invece di ridimensionare un risultato precedente, quindi ogni dimensione è altrettanto nitida.