SVG til CSS data-URI

Kod SVG til en base64 data-URI for innebygging i CSS/HTML.

Slipp et bilde eller klikk for å laste opp

Gratis å prøve.

Lei av ekstra HTTP-forespørsler for hvert lille ikon som bremser nettsiden din? Vår SVG til data-URI-konvertering er løsningen. Dette verktøyet lar deg bygge inn SVG-bilder direkte i HTML eller CSS, og eliminerer behovet for separate filforespørsler, noe som bidrar til raskere sidegjengivelse. Ved å konvertere SVG-koden din til en kompakt base64 data-URI kan du strømlinjeforme ressursene dine og forbedre nettstedets ytelse på sekunder.

Slik fungerer vår SVG til data-URI-konverterer

Prosessen er utrolig enkel. Bare lim inn hele SVG-koden—start med <svg> og slutt med </svg>—i inntastingsboksen og klikk på konverteringsknappen. Verktøyet vårt behandler koden umiddelbart i nettleseren din, og koder den til en base64-streng. Deretter pakker den denne strengen i riktig format for direkte bruk, og gir deg utdrag klare til å kopieres inn i CSS-egenskapen background-image eller en HTML <img>-tags src-attributt. Det er ingen komplisert oppsett; det er en enkel kopier-og-lim-operasjon.

Når bør du bruke en SVG data-URI

Å bygge inn SVG-er som data-URIer er ideelt for små, enkle ikoner og grafikk som brukes gjentatte ganger på nettstedet ditt, som logoer, punktlister eller brukergrensesnittelementer. Den primære fordelen er reduksjonen av serverforespørsler, noe som kan øke nettstedets lastetid betraktelig, spesielt på mobile enheter. Imidlertid er denne metoden ikke egnet for store eller svært komplekse SVG-er. Fordi base64-koding øker filstørrelsen med omtrent 33 %, kan innbygging av en stor SVG blåse opp CSS- eller HTML-filen din, og oppheve ytelsesfordelene. For mer komplekse vektoroppgaver, utforsk vår komplette suite med SVG-vektorverktøy.

Tips for beste resultater

For å få mest mulig ut av denne teknikken, bør du alltid optimalisere SVG-en før du konverterer den. En mindre, renere SVG-fil vil resultere i en kortere og mer effektiv data-URI. Vi anbefaler på det sterkeste å kjøre koden gjennom vårt SVG Optimizer-verktøy først for å fjerne unødvendige data og minimere størrelsen. Husk også at når en SVG er innebygd som en data-URI, kan du ikke style de interne delene med ekstern CSS. Den oppfører seg omtrent som en PNG eller JPEG i så måte. For grafikk som krever dynamisk styling, er det fortsatt bedre å lenke til en ekstern .svg-fil. Finn inspirasjon og ferdig grafikk i våre SVG-oppføringer.

Ofte stilte spørsmål

Hva er en SVG data URI?

En SVG data URI er en tekststreng som representerer et SVG-bilde, kodet i base64-format. Dette lar deg bygge inn bildet direkte i HTML eller CSS uten å trenge en egen fil.

Er det bedre å bygge inn SVG eller bruke en <img>-tagg?

Å bygge inn en SVG som en data-URI er bedre for små ikoner for å redusere HTTP-forespørsler og forbedre innledende sideinnlasting. For større, komplekse SVG-er, er en standard <img>-tagg som lenker til en .svg-fil bedre for caching.

Hvordan bruker jeg en base64 SVG i CSS?

Du kan bruke en base64-kodet SVG i CSS ved å sette den som verdien til en `background-image`-egenskap. Formatet er `url('data:image/svg+xml;base64,...')`, der prikkene representerer den kodede strengen.

Hvorfor er SVG-data-URI-en min så lang?

Base64-koding øker den opprinnelige filstørrelsen med omtrent 33%. For å få en kortere data-URI, bør du først minifisere SVG-koden din for å fjerne unødvendige tegn og kommentarer.

Kan jeg style en SVG som er innebygd som en data-URI?

Nei, du kan ikke style de interne banene til en data-URI SVG ved hjelp av ekstern CSS fra nettsiden din. I denne sammenhengen behandler nettleseren den som et statisk rasterbilde, som en PNG.

Er SVG-data-URI-er dårlige for SEO?

Nei, de er ikke iboende dårlige for SEO. Når de brukes riktig for små ikoner, kan de forbedre sidehastigheten, som er en positiv rangeringfaktor. Unngå å bruke dem for store bilder som kan bremse HTML/CSS-tolkningen.

Hva er forskjellen mellom base64 og URL-kodede SVG-er?

Begge er metoder for å legge inn SVG-er. Base64 er et binær-til-tekst-kodingsskjema som passer for alle data, mens URL-koding (eller prosentkoding) sikrer at SVGens XML er trygg å bruke i en URL-streng.

Lagrer dette verktøyet SVG-dataene mine?

Nei, verktøyet vårt opererer helt innenfor nettleseren din. SVG-koden din blir aldri lastet opp til tjenerne våre, noe som sikrer at dataene dine forblir private.

Om SVG til CSS data-URI

SVG til CSS data-URI er et gratis nettbasert verktøy fra Wallpapers.com som kjører helt i nettleseren din — ingen installasjon, ingen vannmerke, ingen e-postpåmelding for første forsøk. Kod SVG til en base64 data-URI for innebygging i CSS/HTML.

Slik bruker du SVG til CSS data-URI

Slipp bildet ditt i opplastingsområdet (enkelt eller batch — slå på Bulk øverst).
Velg innstillingene verktøyet tilbyr (størrelse, format, kvalitet).
Klikk Kjør. Resultatet lastes ned automatisk — ingen manuell lagring.

Når du bør bruke det

Vanlige bruksområder inkluderer: forberede bilder for nettopplasting, e-handelsoppføringer, sosiale medier med formatbegrensninger, og konvertere filer fra en enhet eller app til en annen.

Gratis vs Premium

Alle besøkende får en gratis prøvekjøring; innloggede gratisbrukere får en høyere daglig kvote. Abonner på Premium for ubegrenset kjøring, bulkbehandling av opptil 200 bilder per jobb, prioritert kø, og annonsefri surfing.