Racchiudi il tuo HTML e il CSS inline in un SVG scalabile usando foreignObject. Guarda l'anteprima live e scarica un file .svg pronto all'uso. Tutto avviene nel tuo browser.
L'elemento foreignObject di SVG permette di incorporare HTML e CSS reali dentro un'immagine vettoriale. Il risultato si ridimensiona senza perdere qualità e può essere usato ovunque sia accettato un SVG — ottimo per badge, schede ed etichette elaborate.
Un SVG creato con foreignObject non è uno screenshot: il tuo markup resta vivo dentro il file. Il testo rimane testo vero, il CSS inline continua a dargli stile e nulla viene rasterizzato, quindi la grafica resta perfettamente nitida a qualsiasi livello di zoom, mentre il file pesa di solito solo pochi kilobyte. Per questo l'approccio è ideale per i badge dei README, le schede profilo, i widget delle dashboard e ogni altro contesto in cui vuoi che un frammento di HTML si comporti come un unico file immagine da ospitare, incorporare o gestire con il controllo di versione.
Usa questo strumento quando il risultato verrà mostrato in un browser web, perché i browser renderizzano foreignObject in modo nativo e lo mantengono nitido. Se ti serve un'immagine raster utilizzabile ovunque - nelle app di messaggistica, nei documenti o nei software di grafica - renderizza lo stesso markup con il nostro convertitore da HTML a immagine, che produce PNG, JPG o PDF. I due strumenti sono complementari: uno mantiene l'HTML come vettore scalabile, l'altro lo congela in una bitmap.
Tutto quello che c'è da sapere sulla conversione da HTML a SVG.
Il tuo HTML viene inserito dentro un elemento SVG <foreignObject>, che i browser renderizzano come parte del vettore. Il tutto si ridimensiona senza sgranarsi.
Il CSS inline e le immagini in data-URI danno i risultati migliori. Le risorse esterne potrebbero non caricarsi quando l'SVG viene aperto fuori dal tuo sito, quindi conviene inserire inline tutto il possibile.
No. L'SVG viene generato interamente nel tuo browser.
Sì. Inserisci larghezza e altezza in pixel prima di generarlo. Definiscono l'area di disegno dell'SVG e il suo viewBox e, trattandosi di un file vettoriale, potrai ridimensionarlo in seguito senza perdere nitidezza.
foreignObject viene renderizzato dai browser web, ma molti editor grafici come Inkscape o Illustrator non lo supportano completamente. Per risultati ottimali usa l'SVG nelle pagine web o in strumenti basati su browser.
Questo strumento mantiene il tuo markup come vettore e non lo rasterizza mai. Se ti serve un'immagine raster, renderizza lo stesso HTML con il nostro strumento da HTML a immagine, che produce PNG, JPG o PDF.