Imposta dimensioni, colori e testo, quindi copia il codice SVG o scarica il file pronto. Ideale per design system e prototipi responsive.
Features
- Dimensioni libere: Imposta larghezza e altezza da 50 a 2000 px mantenendo l'aspect ratio desiderato
- Palette personalizzata: Scegli colori di sfondo e testo con picker HEX per rispettare il brand
- Testo dinamico: Mostra dimensioni, messaggi o etichette per distinguere i placeholder
- Output vettoriale pulito: SVG minimale, ottimizzato e pronto per essere stilizzato via CSS
Usage Guide
- Configura dimensioni: Inserisci la larghezza e l'altezza del segnaposto in pixel
- Scegli i colori: Definisci sfondo e testo per differenziare aree o componenti
- Personalizza il messaggio: Aggiungi testo informativo (es. tipo di contenuto, ratio) e dimensione del font
- Esporta: Copia il codice oppure scarica l'SVG e includilo nel layout
Technical Details
SVG inline
Markup XML con `viewBox`, `<rect>` e `<text>` che garantiscono scalabilità e stile personalizzabile
Performance
Zero richieste extra se inserito inline, peso medio inferiore a 1 KB e rendering immediato
Design system ready
Il codice generato può essere ripetuto via variabili CSS o componenti React/Vue
Frequently Asked Questions
- Cos è un placeholder SVG e perché dovrei usarlo?
- I placeholder SVG sono grafici vettoriali leggeri utilizzati come contenitori temporanei di contenuto nel web design. A differenza delle immagini raster (PNG, JPG), i placeholder SVG sono basati su XML, si scalano infinitamente senza perdita di qualità, hanno dimensioni di file minime (spesso < 1KB), e possono essere personalizzati con CSS. Sono perfetti per wireframe, prototipi, stati di caricamento e test di design responsive.
- Quali dimensioni posso impostare?
- Puoi impostare qualsiasi dimensione da 50px a 2000px per larghezza e altezza. Lo strumento fornisce controllo preciso dei pixel per il web design responsive e le bozze. I placeholder SVG si scalano perfettamente a qualsiasi dimensione mantenendo le proporzioni e la qualità.
- Come uso l SVG generato nel mio progetto?
- Puoi: copiare il codice SVG e incollarlo direttamente in HTML, scaricare come file .svg e referenziarlo con <img src="placeholder.svg">, usarlo inline in CSS come immagine di sfondo, o incorporarlo in componenti React/Vue. L SVG generato è codice puro e standard compatibile con tutti i browser moderni.
- Posso personalizzare colori e testo?
- Sì, puoi personalizzare: colore di sfondo (usando selettore di colore, codici hex o valori RGB), colore del testo, dimensione del carattere (intervallo 8-100px), e testo di visualizzazione (etichette personalizzate per identificare lo scopo del placeholder). Tutte le opzioni di personalizzazione sono disponibili nell interfaccia dello strumento.
- Quali sono i vantaggi rispetto ai placeholder di immagine?
- I placeholder SVG offrono: scalabilità infinita senza perdita di qualità, dimensioni di file estremamente piccole (tipicamente < 500 byte), zero richieste HTTP quando inline, personalizzabili con CSS per temi dinamici, accessibili con etichette ARIA appropriate, friendly per i motori di ricerca, e perfetti per applicazioni web moderne responsive e progressive. Si caricano istantaneamente e funzionano offline.
Related Documentation
- Specifiche SVG - Standard W3C per grafiche scalabili
- Tutorial SVG (MDN) - Guida pratica alla creazione e manipolazione di SVG
- Ottimizzazione SVG - Come ridurre ulteriormente il peso dei file con SVGO