Convertor SVG în fundal CSS pentru cod data URI
Lipește sau trage un SVG pentru a crea o imagine background-image CSS gata de folosit cu un data URI. Codificarea URL este opțiunea preferată pentru un rezultat minimal, lizibil, iar Base64 este disponibil și el. Alege un stil de ghilimele, aplică minificare ușoară a SVG-ului, setează background-size, background-repeat și background-position, apoi verifică previzualizarea live.
Convertorul SVG în fundal CSS transformă markup-ul SVG într-o declarație CSS background-image gata de folosit, care conține un data URI. Lipește sau trage un SVG pentru a crea rezultatul, apoi folosește previzualizarea live pentru a-l revizui. Acest lucru este util când vrei să folosești un SVG ca fundal CSS în loc să-l referențiezi ca fișier de imagine separat.
Convertorul oferă codificare URL și Base64 pentru data URI. Codificarea URL este preferată pentru un rezultat minimal, lizibil, în timp ce Base64 este disponibil ca alternativă. Poți alege și un stil de ghilimele, poți aplica o minificare ușoară a SVG-ului și poți seta background-size, background-repeat și background-position. Aceste opțiuni ajută la modelarea CSS-ului generat și a previzualizării fără a schimba scopul de bază al conversiei.
SVG este un format de imagine vectorial bazat pe markup, în timp ce CSS este folosit pentru a descrie regulile de prezentare pentru pagini web. Un data URI reprezintă conținut într-un URI, permițând conținutului SVG să apară în valoarea background-image CSS. Conversia între aceste reprezentări poate fi de ajutor când vrei să plasezi un SVG într-o foaie de stil ca fundal și să-i configurezi afișarea cu proprietăți de fundal CSS.
Convertorul rulează complet în browserul tău: intrarea ta este procesată pe dispozitivul tău și nu este trimisă către un server. Funcționează și offline după ce pagina s-a încărcat, așa că poți converti SVG-uri fără o conexiune activă. Dezvoltatorii și inginerii DevOps îl pot folosi pentru conversii rapide la birou sau când lucrează pe altă mașină, fără a instala nimic local.
Pasul 1: Lipește sau trage SVG-ul tău în zona de intrare. Convertorul folosește acel conținut pentru a crea un data URI CSS background-image.
Pasul 2: Alege codificarea URL sau Base64 pentru data URI. Codificarea URL este preferată pentru un rezultat minimal, lizibil.
Pasul 3: Ajustează opțiunile disponibile, inclusiv stilul de ghilimele și minificarea ușoară a SVG-ului. Setează background-size, background-repeat și background-position după nevoie.
Pasul 4: Revizuiește previzualizarea live pentru a verifica rezultatul, apoi copiază CSS-ul generat pentru a-l folosi în proiectul tău.
Caz de utilizare: Convertește un SVG într-o imagine background-image CSS pentru o foaie de stil fără a instala o unealtă locală.
Caz de utilizare: Pregătește un grafic de fundal în timp ce lucrezi pe o mașină unde nu ai configurația ta obișnuită de dezvoltare.
Caz de utilizare: Convertește un SVG intern fără a-i lipi conținutul într-un serviciu terț.
Caz de utilizare: Compară data URI-uri codificate URL și Base64 când alegi cum să reprezinți un SVG în CSS.
Caz de utilizare: Ajustează background-size, background-repeat și background-position, apoi folosește previzualizarea live pentru a verifica rezultatul.
Caz de utilizare: Aplică minificare ușoară a SVG-ului în timp ce pregătești un fundal SVG pentru o regulă CSS.