Behandl op til 200 billeder pr. job — vælg dine indstillinger én gang, kør dem alle.
Træt af ekstra HTTP-forespørgsler for hvert lille ikon, der sænker din hjemmeside? Vores SVG til Data URI-konverter er løsningen. Dette værktøj giver dig mulighed for at indlejre SVG-billeder direkte i din HTML eller CSS, hvilket eliminerer behovet for separate filforespørgsler og hjælper med at fremskynde din sidegengivelse. Ved at konvertere din SVG-kode til en kompakt base64 data URI kan du strømline dine aktiver og forbedre den overordnede sideydelse på få sekunder.
Sådan fungerer vores SVG til Data URI-konverter
Processen er utrolig enkel. Indsæt blot din komplette SVG-kode – startende med <svg> og sluttende med </svg> – i inputfeltet og klik på konverter-knappen. Vores værktøj behandler straks koden i din browser og indkoder den til en base64-streng. Derefter pakkes strengen i det korrekte format til direkte brug, så du får uddrag klar til at kopiere ind i din CSS background-image-egenskab eller et HTML <img>-tags src-attribut. Der er ingen kompliceret opsætning; det er en simpel kopiér-og-indsæt-operation.
Hvornår skal man bruge en SVG Data URI
Indlejring af SVG'er som data URI'er er ideelt til små, enkle ikoner og grafik, der bruges gentagne gange på din side, såsom logoer, punktopstillinger eller brugergrænsefladeelementer. Den primære fordel er reduktionen af serverforespørgsler, hvilket kan øge din sides indlæsningshastighed betydeligt, især på mobile enheder. Denne metode er dog ikke egnet til store eller meget komplekse SVG'er. Fordi base64-kodning øger filstørrelsen med cirka 33 %, kan indlejring af en stor SVG oppuste din CSS- eller HTML-fil og dermed ophæve ydelsesfordelene. Til mere komplekse vektoropgaver kan du udforske vores komplette suite af SVG-vektorværktøjer.
Tips til bedste resultater
For at få mest muligt ud af denne teknik bør du altid optimere din SVG, før du konverterer den. En mindre, renere SVG-fil resulterer i en kortere og mere effektiv data URI. Vi anbefaler kraftigt at køre din kode gennem vores SVG-optimeringsværktøj først for at fjerne unødvendige data og minimere dens størrelse. Husk også, at når en SVG først er indlejret som en data URI, kan du ikke style dens interne dele med ekstern CSS. Den opfører sig meget som en PNG eller JPEG i den henseende. Til grafik, der kræver dynamisk styling, er det stadig bedre at linke til en ekstern .svg-fil. Find inspiration og klar-til-brug grafik i vores SVG-lister.
Ofte stillede spørgsmål
Hvad er en SVG-data-URI?
En SVG-data-URI er en tekststreng, der repræsenterer et SVG-billede, kodet i base64-format. Dette gør det muligt at indlejre billedet direkte i HTML eller CSS uden at have brug for en separat fil.
Er det bedre at indlejre SVG eller bruge et <img>-tag?
At indlejre en SVG som en data-URI er bedre til små ikoner for at reducere HTTP-forespørgsler og forbedre den indledende sideindlæsning. For større, komplekse SVG'er er et standard <img>-tag, der linker til en .svg-fil, bedre til caching.
Hvordan bruger jeg en base64 SVG i CSS?
Du kan bruge en base64-kodet SVG i CSS ved at angive den som værdien af en `background-image`-egenskab. Formatet er `url('data:image/svg+xml;base64,...')`, hvor prikkerne er din kodede streng.
Hvorfor er min SVG-data-URI så lang?
Base64-kodning øger den oprindelige filstørrelse med cirka 33%. For at få en kortere data-URI bør du først minimere din SVG-kode for at fjerne unødvendige tegn og kommentarer.
Kan jeg style en SVG, der er indlejret som en data-URI?
Nej, du kan ikke style de interne stier i en data-URI SVG ved hjælp af ekstern CSS fra din webside. I denne sammenhæng behandler browseren det som et statisk rasterbillede, f.eks. en PNG.
Er SVG-data-URI'er dårlige for SEO?
Nej, de er ikke i sig selv dårlige for SEO. Når de bruges korrekt til små ikoner, kan de forbedre sidehastigheden, hvilket er en positiv rangeringsfaktor. Undgå at bruge dem til store billeder, der kan bremse din HTML/CSS-parsing.
Hvad er forskellen mellem base64 og URL-kodede SVG'er?
Begge er metoder til at indlejre SVG'er. Base64 er en binær-til-tekst-kodningsmetode, der er egnet til alle data, mens URL-kodning (eller procentkodning) sikrer, at SVG'ens XML er sikker at bruge i en URL-streng.
Gemmer dette værktøj mine SVG-data?
Nej, vores værktøj fungerer udelukkende i din browser. Din SVG-kode bliver aldrig uploadet til vores servere, hvilket sikrer, at dine data forbliver private.
Om SVG til CSS Data URI
SVG til CSS Data URI er et gratis online værktøj fra Wallpapers.com, der kører helt i din browser — ingen installation, intet vandmærke, ingen e-mail-tilmelding til første forsøg.
Indkode SVG til en base64 data URI til indlejring i inline CSS / HTML.
Sådan bruger du SVG til CSS Data URI
- Slip dit billede i uploadområdet (enkelt eller batch — skift Bulk øverst).
- Vælg eventuelle indstillinger, værktøjet tilbyder (størrelse, format, kvalitet).
- Klik på Kør. Resultatet downloades automatisk — intet manuelt gemmetrin.
Hvornår skal du bruge det
Almindelige anvendelsestilfælde inkluderer:
forberedelse af billeder til webupload, e-handelslister, sociale medieplatforme med formatbegrænsninger og konvertering af filer fra en enhed eller app til en anden.
Gratis vs Premium
Hver besøgende får en gratis prøvekørsel; loggede ind gratisbrugere får en højere daglig kvote. Abonner på
Premium
for ubegrænsede kørsler, massebehandling af op til 200 billeder pr. opgave, prioritetskø og annoncefri browsing.
Relaterede værktøjer
Leder du efter noget lidt anderledes? Prøv
SVG til PNG Konverter
,
SVG til JPG konverter
eller
SVG til WebP-konverter
— eller gennemse alle
SVG / Vektor værktøjer.
