Behandle opptil 200 bilder per jobb — velg innstillingene én gang, kjør dem alle.
Lei av at ekstra HTTP-forespørsler for hvert lille ikon bremser nettstedet ditt? Vår SVG til Data URI-konverterer er løsningen. Dette verktøyet lar deg bygge inn SVG-bilder direkte i HTML eller CSS, slik at du slipper separate filforespørsler og bidrar til raskere sidegjengivelse. Ved å konvertere SVG-koden din til en kompakt base64 data URI kan du strømlinjeforme ressursene dine og forbedre den totale ytelsen på nettstedet på få sekunder.
Slik fungerer vår SVG til Data URI-konverterer
Prosessen er utrolig enkel. Bare lim inn hele SVG-koden din – fra <svg> til </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 det inn strengen i riktig format for direkte bruk, og gir deg utdrag som er klare til å kopieres inn i CSS-egenskapen background-image eller src-attributtet til et HTML-<img>-element. Det er ingen komplisert oppsett – bare en enkel kopier-og-lim-operasjon.
Når bør du bruke en SVG Data URI
Å bygge inn SVG-er som data URI-er er ideelt for små, enkle ikoner og grafikk som brukes gjentatte ganger på nettstedet ditt, for eksempel logoer, punktmerker eller grensesnittelementer. Den største fordelen er reduksjonen av serverforespørsler, noe som kan øke sidelastingshastigheten betydelig, spesielt på mobile enheter. Denne metoden er imidlertid ikke egnet for store eller svært komplekse SVG-er. Fordi base64-koding øker filstørrelsen med omtrent 33 %, kan det å bygge inn en stor SVG blåse opp CSS- eller HTML-filen din, og dermed oppheve ytelsesfordelene. For mer komplekse vektoroppgaver, utforsk vår komplette pakke med SVG-vektorverktøy.
Tips for best resultat
For å få mest mulig ut av denne teknikken bør du alltid optimalisere SVG-en din før du konverterer den. En mindre og renere SVG-fil gir en kortere og mer effektiv data URI. Vi anbefaler på det sterkeste å kjøre koden din gjennom vårt SVG-optimeringsverktøy først for å fjerne unødvendige data og minimere størrelsen. Husk også at når en SVG er bygget inn som en data URI, kan du ikke style dens interne deler 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 ferdiglaget grafikk i våre SVG-lister.
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 et <img>-tag?
Å 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>-tag 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 er den kodede strengen din.
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 minimere 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, for eksempel en PNG.
Er SVG-data-URIer 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, noe som er en positiv rangeringsfaktor. Unngå å bruke dem for store bilder som kan bremse ned tolkingen av HTML/CSS.
Hva er forskjellen mellom base64 og URL-kodede SVG-er?
Begge er metoder for å bygge inn SVG-er. Base64 er en binær-til-tekst-kodingsmetode som passer for alle typer data, mens URL-koding (eller prosentkoding) sørger for at SVG-ens XML er trygg å bruke i en URL-streng.
Lagrer dette verktøyet SVG-dataene mine?
Nei, verktøyet vårt kjører helt i nettleseren din. SVG-koden din blir aldri lastet opp til våre servere, noe som sikrer at dataene dine forblir trygge.
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 inn i 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.
Relaterte verktøy
Ser du etter noe litt annerledes? Prøv
SVG til PNG-konverterer
,
SVG til JPG-konverterer
eller
SVG til WebP-konverterer
— eller bla gjennom alle
SVG / vektor verktøy.
