Pretvarač SVG u CSS pozadinu – CSS data URI kôd
Zalijepite ili ispustite SVG kako biste izradili gotovu CSS background-image deklaraciju s data URI-jem. URL kodiranje je preporučena opcija za minimalan i čitljiv rezultat, a dostupan je i Base64. Odaberite stil navodnika, primijenite laganu minifikaciju SVG-a, postavite background-size, background-repeat i background-position, a zatim provjerite pregled uživo.
Pretvarač SVG u CSS pozadinu pretvara SVG označavanje u gotovu CSS background-image deklaraciju koja sadrži data URI. Zalijepite ili ispustite SVG za izradu rezultata, a zatim ga pregledajte uz pomoć pregleda uživo. To je korisno kada želite koristiti SVG kao CSS pozadinu, a ne ga referencirati kao zasebnu datoteku slike.
Pretvarač za data URI nudi URL kodiranje i Base64. URL kodiranje je preporučeno za minimalan i čitljiv rezultat, dok je Base64 dostupan kao alternativa. Također možete odabrati stil navodnika, primijeniti laganu minifikaciju SVG-a te postaviti background-size, background-repeat i background-position. Ove opcije pomažu oblikovati generirani CSS i pregled bez promjene osnovne svrhe konverzije.
SVG je vektorski format slike temeljen na označavanju, dok se CSS koristi za opisivanje pravila prikaza web-stranica. Data URI predstavlja sadržaj unutar URI-ja, omogućujući da se SVG sadržaj pojavi u CSS background-image vrijednosti. Pretvaranje između ovih prikaza može biti korisno kada želite SVG smjestiti u stilsku datoteku kao pozadinu i konfigurirati njegov prikaz CSS background svojstvima.
Pretvarač radi u cijelosti u vašem pregledniku: vaš unos obrađuje se na vašem uređaju i ne šalje se na poslužitelj. Također radi izvan mreže nakon što se stranica učita, pa SVG-ove možete pretvarati bez aktivne veze. Programeri i DevOps inženjeri mogu ga koristiti za brze konverzije za svojim stolom ili na drugom računalu, bez ikakve lokalne instalacije.
Korak 1: Zalijepite ili ispustite svoj SVG u područje za unos. Pretvarač koristi taj sadržaj za izradu CSS background-image data URI-ja.
Korak 2: Za data URI odaberite URL kodiranje ili Base64. URL kodiranje je preporučeno za minimalan i čitljiv rezultat.
Korak 3: Prilagodite dostupne opcije, uključujući stil navodnika i laganu minifikaciju SVG-a. Po potrebi postavite background-size, background-repeat i background-position.
Korak 4: Pregledajte pregled uživo kako biste provjerili rezultat, a zatim kopirajte generirani CSS za upotrebu u svom projektu.
Primjer upotrebe: Pretvorite SVG u CSS background-image za stilsku datoteku bez instalacije lokalnog alata.
Primjer upotrebe: Pripremite pozadinsku grafiku dok radite na računalu na kojem nemate uobičajeno razvojno okruženje.
Primjer upotrebe: Pretvorite interni SVG bez lijepljenja njegovog sadržaja u uslugu treće strane.
Primjer upotrebe: Usporedite URL-kodirane i Base64 data URI-jeve pri odabiru načina prikaza SVG-a u CSS-u.
Primjer upotrebe: Prilagodite background-size, background-repeat i background-position, a zatim pregledom uživo provjerite rezultat.
Primjer upotrebe: Primijenite laganu minifikaciju SVG-a pri pripremi SVG pozadine za CSS pravilo.