SVG til CSS Data URI

Indkod SVG til en base64 data URI til direkte brug i CSS / HTML.

Slip et billede eller klik for at uploade

Gratis at prøve.

Træt af ekstra HTTP-forespørgsler for hvert lille ikon, der sænker dit websted? 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 sidehastighed på få sekunder.

Sådan fungerer vores SVG til Data URI-konverter

Processen er utrolig ligetil. 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 koder 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-ejendoms background-image eller et HTML <img>-tags src-attribut. Der er ingen kompleks 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 ideel til små, enkle ikoner og grafik, der bruges gentagne gange på dit websted, såsom logoer, punkttegn eller brugergrænsefladeelementer. Den primære fordel er reduktionen af serverforespørgsler, hvilket kan øge din sideindlæsningshastighed markant, 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, hvilket ophæver ydelsesfordelene. Til mere komplekse vektropgaver kan du udforske vores komplette suite af SVG-vektorer.

Tips til bedste resultater

For at få mest muligt ud af denne teknik skal du altid optimere din SVG, før du konverterer den. En mindre, renere SVG-fil vil resultere i en kortere og mere effektiv data URI. Vi anbefaler stærkt at køre din kode gennem vores SVG-optimeringsværktøj først for at fjerne unødvendige data og minimere størrelsen. Husk også, at når først en SVG 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 linkning til en ekstern .svg-fil stadig den bedre tilgang. 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 giver dig mulighed for at indlejre billedet direkte i HTML eller CSS uden at skulle bruge en separat fil.

Er det bedre at indlejre SVG eller bruge et <img>-tag?

At indlejre en SVG som en data-URI er bedre for små ikoner for at reducere HTTP-anmodninger 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 repræsenterer 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 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 såsom en PNG.

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

Nej, de er ikke iboende 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 et binær-til-tekst kodningsskema, der er egnet til alle data, mens URL-kodning (eller procent-kodning) 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 helt og holdent 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. Indkod SVG til en base64 data URI til direkte brug i 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.