Prevodník SVG na CSS pozadie – CSS data URI kód
Prilepte alebo presuňte SVG a vytvorte pripravené CSS background-image s data URI. URL kódovanie je uprednostňovaná možnosť pre minimálny, čitateľný výsledok, k dispozícii je aj Base64. Vyberte štýl úvodzoviek, použite ľahkú minifikáciu SVG, nastavte background-size, background-repeat a background-position a potom skontrolujte živý náhľad.
Prevodník SVG na CSS pozadie premení SVG značky na pripravenú deklaráciu CSS background-image obsahujúcu data URI. Prilepte alebo presuňte SVG na vytvorenie výstupu a potom použite živý náhľad na jeho kontrolu. Je to užitočné, keď chcete použiť SVG ako CSS pozadie namiesto odkazu naň ako na samostatný obrázkový súbor.
Prevodník ponúka pre data URI URL kódovanie a Base64. URL kódovanie je uprednostňované pre minimálny, čitateľný výsledok, zatiaľ čo Base64 je k dispozícii ako alternatíva. Môžete tiež vybrať štýl úvodzoviek, použiť ľahkú minifikáciu SVG a nastaviť background-size, background-repeat a background-position. Tieto možnosti pomáhajú formovať vygenerované CSS a náhľad bez zmeny základného účelu konverzie.
SVG je vektorový obrazový formát založený na značkách, zatiaľ čo CSS sa používa na opis pravidiel prezentácie webových stránok. Data URI reprezentuje obsah v rámci URI, čo umožňuje, aby sa obsah SVG objavil v hodnote CSS background-image. Konverzia medzi týmito reprezentáciami môže pomôcť, keď chcete umiestniť SVG do šablóny so štýlmi ako pozadie a nakonfigurovať jeho zobrazenie pomocou vlastností CSS pozadia.
Prevodník funguje úplne vo vašom prehliadači: váš vstup sa spracováva na vašom zariadení a neposiela sa na server. Funguje tiež offline po načítaní stránky, takže môžete prevádzať SVG bez aktívneho pripojenia. Vývojári a DevOps inžinieri ho môžu použiť na rýchle konverzie pri stole alebo pri práci na inom počítači, bez inštalácie čohokoľvek lokálne.
Krok 1: Prilepte alebo presuňte svoje SVG do vstupného poľa. Prevodník použije tento obsah na vytvorenie data URI pre CSS background-image.
Krok 2: Vyberte URL kódovanie alebo Base64 pre data URI. URL kódovanie je uprednostňované pre minimálny, čitateľný výsledok.
Krok 3: Upravte dostupné možnosti vrátane štýlu úvodzoviek a ľahkej minifikácie SVG. Podľa potreby nastavte background-size, background-repeat a background-position.
Krok 4: Skontrolujte živý náhľad na kontrolu výsledku a potom skopírujte vygenerované CSS na použitie vo svojom projekte.
Prípad použitia: Preveďte SVG na CSS background-image pre šablónu so štýlmi bez inštalácie lokálneho nástroja.
Prípad použitia: Pripravte grafiku pozadia pri práci na počítači, kde nemáte svoje obvyklé vývojové prostredie.
Prípad použitia: Preveďte interné SVG bez vkladania jeho obsahu do služby tretej strany.
Prípad použitia: Porovnajte data URI kódované URL a Base64 pri rozhodovaní, ako reprezentovať SVG v CSS.
Prípad použitia: Upravte background-size, background-repeat a background-position a potom použite živý náhľad na kontrolu výsledku.
Prípad použitia: Použite ľahkú minifikáciu SVG pri príprave SVG pozadia pre pravidlo CSS.