Perché il GARAN-Label è un PNG, non un SVG

Una versione vettoriale del GARAN-Label può sembrare un miglioramento: più leggera in teoria, scalabile all'infinito, "più moderna". In pratica, un'etichetta di garanzia in SVG crea più problemi di quanti ne risolva. Ecco perché generiamo deliberatamente ogni GARAN-Label come PNG.

In breve: un GARAN-Label in SVG è più pesante su disco una volta contato il font richiesto, rompe il proprio codice QR non appena un secondo label appare sulla stessa pagina, e spesso non riesce a visualizzarsi affatto nelle email di conferma d'ordine. Un PNG non ha nessuno di questi problemi.

Problema 1: la dimensione del file si accumula

Un singolo GARAN-Label in SVG pesa circa 300 KB. Per visualizzarsi correttamente, dipende anche dal font Inter, che aggiunge circa altri 350 KB se quel font non è già caricato sulla pagina. Sono circa 650 KB per una singola etichetta di conformità, prima ancora che le foto prodotto, il tema e tutto il resto della pagina inizino a caricarsi.

Su una pagina di listino con decine di articoli, o un negozio che non ha già caricato Inter per il proprio design, questo aggiunge un peso reale al tempo di caricamento della pagina e ai Core Web Vitals, per un piccolo label pensato per essere una nota a piè di pagina, non un titolo.

Problema 2: più label su una pagina rompono il codice QR

Il codice QR del GARAN-Label all'interno dell'SVG è costruito usando riferimenti interni agli elementi (ID). È una pratica normale per la grafica SVG, ma funziona in modo affidabile solo quando l'SVG appare una sola volta per pagina. Non appena un secondo GARAN-Label con lo stesso markup viene incorporato inline sulla stessa pagina, i browser possono risolvere solo il primo elemento con un dato ID, quindi ogni label successivo perde silenziosamente il proprio codice QR (o altre parti referenziate tramite ID).

Non è un caso raro: succede su qualsiasi pagina di categoria, tabella di confronto o vista carrello che mostra più di un prodotto con un GARAN-Label contemporaneamente.

Problema 3: deve funzionare anche nelle email di conferma d'ordine

Il GARAN-Label non deve comparire solo sulla pagina prodotto, ma anche nell'email di conferma d'ordine. È qui che l'SVG incontra il suo limite maggiore:

  • Molti client email non renderizzano affatto l'SVG. Il motore di rendering di Outlook non ha alcun supporto SVG, e Gmail rimuove le immagini SVG per motivi di sicurezza (un SVG può contenere JavaScript incorporato). A seconda del client, il label semplicemente non appare.
  • La stessa collisione di ID del Problema 2 si applica anche all'interno di un'email non appena un ordine contiene più di un prodotto con un label.
  • Allegare un file al suo posto non è una vera soluzione. Piattaforme come Shopify non offrono un modo per generare e allegare un PDF o un file personalizzato per ordine all'email di conferma, quindi non è possibile semplicemente aggirare il problema di visualizzazione con un allegato.

La nostra raccomandazione: PNG

Un GARAN-Label è una piccola etichetta di conformità a dimensione fissa, non un'opera grafica che deve adattarsi a qualsiasi dimensione, quindi il principale argomento a favore dell'SVG (la scalabilità infinita) qui non si applica davvero. Un PNG:

  • non necessita di alcun font web separato, poiché il testo è già renderizzato nell'immagine,
  • non ha ID interni, quindi qualsiasi numero di label su una pagina o in un'email viene visualizzato correttamente e indipendentemente,
  • è supportato in modo identico da tutti i browser, tutti i principali client email e tutti i flussi PDF o di stampa,
  • ed è esportato a una risoluzione che resta nitida sia a schermo che in stampa.

Per questo GARAN-Label.com genera ogni label come PNG per impostazione predefinita.

Genera subito il tuo GARAN-Label →

FAQ

Domande frequenti

Posso avere il mio GARAN-Label come SVG invece che come PNG?

Generiamo ogni GARAN-Label come immagine PNG per scelta progettuale. Nei test, la versione SVG ha causato più problemi di quanti ne risolvesse (dimensione del file, dipendenze da font, codici QR difettosi, compatibilità con le email) senza alcun reale vantaggio per un label mostrato a dimensione fissa.

Un PNG non perde qualità rispetto a un formato vettoriale?

Non in pratica. Un GARAN-Label viene posizionato a una dimensione fissa e piuttosto piccola su una scheda prodotto, un imballaggio o una fattura; non ha mai bisogno di essere ingrandito fino alla dimensione di un poster. I nostri PNG sono esportati a una risoluzione che resta nitida sia a schermo che in stampa.

Perché il codice QR si rompe con più label SVG sulla stessa pagina?

Il markup SVG del codice QR si basa su ID interni degli elementi. È una pratica normale per la grafica SVG, ma funziona in modo affidabile solo quando l'SVG appare una sola volta per pagina. Non appena un secondo GARAN-Label con lo stesso markup viene incorporato inline sulla stessa pagina, i browser risolvono solo il primo elemento con un dato ID, così ogni label successivo perde silenziosamente il proprio codice QR (o altre parti referenziate tramite ID).

Questo influisce anche sulle fatture PDF o sulle email di conferma d'ordine?

Sì, allo stesso modo. Più SVG inline in uno stesso documento condividono le stesse collisioni di ID, e diversi client email non renderizzano affatto le immagini SVG. Un PNG si visualizza in modo identico ovunque: browser, fatture PDF e tutti i principali client email.

Altre domande? Vedi tutte le FAQ →