Convertitore SVG in CSS
Converte il codice SVG in CSS background-image data URI. Supporta formati URL codificato e Base64.
Informazioni sullo strumento
SVG to CSS Converter trasforma il codice SVG in formato di dati URI per l'uso nelle proprietà CSS background-image, eliminando la necessità di file di immagine separati o richieste HTTP. Incorporando i dati SVG direttamente nei tuoi fogli di stile, riduci le dipendenze esterne, migliori le prestazioni di caricamento della pagina e semplifichi la gestione delle risorse. Lo strumento supporta sia formati di codifica URL che Base64, ciascuno con vantaggi distinti a seconda delle tue priorità di prestazioni e preferenze di leggibilità.
Per convertire SVG in CSS, incolla il tuo codice SVG nell'area di input, seleziona il tuo metodo di codifica preferito e fai clic su Converti. Il formato codificato URL produce un output più breve che è più facile da leggere e eseguire il debug, mentre Base64 crea una rappresentazione più compatta che si comprime meglio in gzip. Lo strumento mostra istantaneamente l'output CSS e un'anteprima in tempo reale dell'SVG renderizzato, aiutandoti a verificare la conversione prima di copiarla nei tuoi fogli di stile.
Questo approccio è particolarmente utile per piccole icone, loghi e grafiche semplici incorporate nelle applicazioni web. Mantenendo i dati SVG all'interno dei CSS, eviti problemi di invalidazione della cache, riduci il numero totale di richieste di rete e puoi persino manipolare le proprietà SVG attraverso pseudo-classi CSS come :hover e :active. Considera l'archiviazione di SVG complessi come file separati per una migliore manutenibilità, ma i dati URI inline funzionano bene per i componenti che raramente cambiano.
Domande Frequenti
Implementazione del Codice
import base64
from urllib.parse import quote
def svg_to_css_url_encoded(svg: str) -> str:
encoded = quote(svg, safe="")
return f'background-image: url("data:image/svg+xml,{encoded}");'
def svg_to_css_base64(svg: str) -> str:
b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
return f'background-image: url("data:image/svg+xml;base64,{b64}");'
svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'
print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.