SVG till CSS Data URI

Koda SVG till en base64-data-URI för inbäddning i inline CSS/HTML.

Släpp en bild eller klicka för att ladda upp

Gratis att prova.

Trött på extra HTTP-förfrågningar för varje liten ikon som saktar ner din webbplats? Vår SVG till Data URI-omvandlare är lösningen. Detta verktyg låter dig bädda in SVG-bilder direkt i din HTML eller CSS, vilket eliminerar behovet av separata filförfrågningar och hjälper till att påskynda sidrenderingen. Genom att konvertera din SVG-kod till en kompakt base64-data-URI kan du effektivisera dina tillgångar och förbättra webbplatsens prestanda på några sekunder.

Så fungerar vår SVG till Data URI-omvandlare

Processen är otroligt enkel. Klistra bara in din fullständiga SVG-kod – från <svg> till </svg> – i inmatningsrutan och klicka på konverteringsknappen. Vårt verktyg bearbetar koden omedelbart i din webbläsare och kodar den till en base64-sträng. Det omsluter sedan strängen i rätt format för direkt användning, och ger dig kodsnuttar redo att kopieras in i din CSS background-image-egenskap eller ett HTML <img>-tags src-attribut. Det finns ingen komplicerad inställning; det är en enkel kopiera-och-klistra-operation.

När du ska använda en SVG-data-URI

Att bädda in SVG som data-URI är idealiskt för små, enkla ikoner och grafik som används upprepade gånger på din webbplats, såsom logotyper, punkter eller gränssnittselement. Den främsta fördelen är minskningen av serverförfrågningar, vilket kan öka din webbplats laddningshastighet avsevärt, särskilt på mobila enheter. Denna metod är dock inte lämplig för stora eller mycket komplexa SVG:er. Eftersom base64-kodning ökar filstorleken med cirka 33 % kan inbäddning av en stor SVG svälla din CSS eller HTML-fil och därmed motverka prestandafördelarna. För mer komplexa vektoruppgifter, utforska vår kompletta uppsättning SVG-vektorverktyg.

Tips för bästa resultat

För att få ut det mesta av denna teknik bör du alltid optimera din SVG innan du konverterar den. En mindre, renare SVG-fil resulterar i en kortare, mer effektiv data-URI. Vi rekommenderar starkt att du först kör din kod genom vårt SVG Optimizer-verktyg för att ta bort onödig data och minimera dess storlek. Kom också ihåg att när en SVG väl är inbäddad som en data-URI kan du inte styla dess interna delar med extern CSS. Den beter sig i det avseendet mycket som en PNG eller JPEG. För grafik som kräver dynamisk styling är det fortfarande bättre att länka till en extern .svg-fil. Hitta inspiration och färdig grafik i våra SVG-listor.

Vanliga frågor

Vad är en SVG data URI?

En SVG data URI är en textsträng som representerar en SVG-bild, kodad i base64-format. Detta gör att du kan bädda in bilden direkt i HTML eller CSS utan att behöva en separat fil.

Är det bättre att bädda in SVG eller använda en <img> tagg?

Att bädda in en SVG som en data-URI är bättre för små ikoner för att minska HTTP-förfrågningar och förbättra den första sidans laddning. För större, komplexa SVG:er är en standard <img> tagg som länkar till en .svg-fil bättre för cachning.

Hur använder jag en base64-kodad SVG i CSS?

Du kan använda en base64-kodad SVG i CSS genom att ange den som värde för egenskapen `background-image`. Formatet är `url('data:image/svg+xml;base64,...')`, där punkterna representerar din kodade sträng.

Varför är min SVG-data-URI så lång?

Base64-kodning ökar den ursprungliga filstorleken med ungefär 33 %. För att få en kortare data-URI bör du först minifiera din SVG-kod för att ta bort onödiga tecken och kommentarer.

Kan jag styla en SVG som är inbäddad som en data URI?

Nej, du kan inte styla de interna banorna i en data URI SVG med extern CSS från din webbsida. I detta sammanhang behandlar webbläsaren den som en statisk rasterbild, som en PNG.

Är SVG data URIs dåliga för SEO?

Nej, de är inte i sig dåliga för SEO. När de används korrekt för små ikoner kan de förbättra sidhastigheten, vilket är en positiv rankingfaktor. Undvik att använda dem för stora bilder som kan sänka din HTML/CSS-tolkning.

Vad är skillnaden mellan base64 och URL-kodade SVG-filer?

Båda är metoder för att bädda in SVG-filer. Base64 är ett binär-till-text-kodningsschema som passar för alla typer av data, medan URL-kodning (eller procentkodning) säkerställer att SVG-filens XML är säker att använda i en URL-sträng.

Lagrar detta verktyg min SVG-data?

Nej, vårt verktyg fungerar helt i din webbläsare. Din SVG-kod laddas aldrig upp till våra servrar, vilket säkerställer att din data förblir privat.

Om SVG till CSS Data URI

SVG till CSS Data URI är ett gratis online-verktyg från Wallpapers.com som körs helt i din webbläsare — ingen installation, ingen vattenstämpel, ingen e-postregistrering för första försöket. Koda SVG till en base64-data-URI för inbäddning i inline CSS/HTML.

Så här använder du SVG till CSS Data URI

Släpp din bild i uppladdningsområdet (enkel eller batch — växla Batch högst upp).
Välj inställningar som verktyget visar (storlek, format, kvalitet).
Klicka på Kör. Resultatet laddas ner automatiskt — inget manuellt sparningssteg.

När du ska använda det

Vanliga användningsområden inkluderar: förbereda bilder för webbuppladdning, e-handelslistningar, sociala medieplattformar med formatbegränsningar och konvertera filer från en enhet eller app till en annan.

Gratis vs Premium

Varje besökare får en gratis provkörning; inloggade gratisanvändare får en högre daglig kvot. Prenumerera på Premium för obegränsade körningar, batchbehandling av upp till 200 bilder per jobb, prioritetskö och reklamfri surfning.