Generatore di segnaposto SVG

Come funziona il generatore di segnaposto SVG

Cosa fa lo strumento

Il generatore di segnaposto SVG crea immagini segnaposto vettoriali leggere con dimensioni personalizzate, colori di sfondo, sovrapposizioni di testo e impostazioni del font. Produce direttamente il markup SVG e una data URI Base64 pronta da incorporare in HTML o CSS. Poiché l’SVG è indipendente dalla risoluzione e in genere sotto 1KB, questi segnaposto si caricano istantaneamente senza richieste di rete.

Casi d’uso comuni per sviluppatori

Gli sviluppatori frontend usano segnaposto SVG durante la prototipazione per riservare spazio nel layout prima che le immagini reali siano disponibili, evitando il cumulative layout shift (CLS). Sono utili nei design system per fallback degli avatar, skeleton delle miniature e contenitori di immagini responsive. Gli sviluppatori email incorporano segnaposto data URI nei template HTML dove il caricamento di immagini esterne può essere bloccato dai client di posta.

Formati, tipi o varianti dei dati

L’output è un documento standard SVG 1.1 contenente un rettangolo riempito e un elemento di testo centrato. La variante data URI codifica questo SVG come stringa Base64 prefissata con 'data:image/svg+xml;base64,' per l’uso diretto negli attributi src di img, nelle proprietà CSS background-image o in HTML inline. Le dimensioni sono specificate in pixel, ma l’SVG si scala a qualsiasi dimensione del contenitore senza pixelatura poiché è un formato vettoriale.

Errori comuni e casi limite

Le Data URI non vengono memorizzate nella cache dai browser in modo indipendente dal documento in cui sono incorporate, quindi usare lo stesso segnaposto su molte pagine aumenta la dimensione totale del trasferimento rispetto a un singolo file esterno memorizzato nella cache. Etichette di testo molto lunghe possono fuoriuscire dal viewBox dell’SVG se le dimensioni sono ridotte. Alcuni client email più datati non supportano le Data URI SVG, ripiegando su un’icona di immagine non funzionante. Le intestazioni Content Security Policy (CSP) possono bloccare le Data URI inline se 'data:' non è incluso in img-src.

Quando usare questo strumento rispetto al codice

Usa questo strumento del browser per generare rapidamente immagini segnaposto una tantum durante la fase di wireframing o prototipazione senza aggiungere dipendenze di build. Per la generazione dinamica di segnaposto in produzione (ad es. fallback per immagini caricate dagli utenti), usa templating SVG lato server o servizi dedicati come plaiceholder che si integrano con la tua pipeline di ottimizzazione delle immagini e possono generare segnaposto di immagini sfocate a bassa qualità (LQIP) a partire da immagini reali.