SVG till Data URI

SVG till Data URI konverterar SVG-markup till en optimerad data URI-sträng som kan bäddas in direkt i HTML img src-attribut, CSS background-image-egenskaper, eller JavaScript-variabler utan att kräva en separat HTTP-förfrågan för SVG-filen. En data URI kodar resursen inline i dokumentet med antingen URL-kodning eller Base64, vilket eliminerar en nätverksrunda och förenklar distributionen av SVG-ikoner, logotyper och dekorativa grafik i webbapplikationer. URL-kodade data-URI:er föredras generellt framför Base64 för SVG:er eftersom de är mer kompakta och förblir delvis mänskligt läsbara i webbläsarens utvecklarverktyg. Verktyget minifierar valfritt SVG-markup före kodning för att minska den slutliga data URI-storleken.

Bläddra bland alla Konverterare-verktyg

Hur Man Använder

Klistra in din SVG-kod i inmatningsområdet och data URI:n genereras omedelbart i utmatningspanelen. Välj mellan URL-kodning och Base64-kodning med hjälp av formatväxlingen: URL-kodning ger mindre utdata för de flesta SVG:er, medan Base64 är säkrare för SVG-innehåll som innehåller ovanliga tecken som kan bryta HTML-attributparsning. Kopiera hela data URI-strängen och klistra in den i ett CSS background-image url()-värde, ett HTML img src-attribut, eller en JavaScript-konstant. En live-förhandsgranskning av den renderade SVG:n visas så att du kan verifiera visuell korrekthet innan du kopierar utdata.

Vanliga Användningsområden

• •Bädda in SVG-ikoner som CSS background-image data URI:er i komponent-stylesheets för att eliminera extra HTTP-förfrågningar för små vektorresurser
• •Inline-infoga företagslogotyper och marknadsföringsinformation som data URI:er i HTML-e-postmallar där extern bildladdning blockeras av e-postklienter
• •Konvertera SVG-favicons, app-ikoner och markörer till data URI:er för inline-inbäddning i HTML-dokument med en fil och webbläsartillägg
• •Inline-infoga kritisk SVG-innehåll ovanför vecket som data URI:er för att eliminera render-blockerande nätverksförfrågningar för initial sidladdning
• •Tilldela SVG-maskbilder, mönster och filter som data URI:er i CSS för fristående, portabla komponent-stylesheets

Ta en paus och spela gratis webbläsarspel