SVG URL-kodare
Konvertera SVG-markering till en CSS-färdig data-URI och avkoda data-URI tillbaka till SVG.
SVG URL-kodare
Klistra in en SVG och få en data-URI som du kan släppa direkt till CSS, redo för bakgrundsbild eller en mask. Istället för base64 använder kodaren den kompakta URL-kodningsmetoden: den byter ut dubbla citattecken mot enkla citattecken, kollapsar blanksteg och procentkodar endast de tecken som faktiskt behöver det, så att resultatet förblir kort och läsbart för människor. Det håller din stilmall mindre än en base64-klump och låter dig fortfarande känna igen formerna inuti URI:n.
Tre utdataformat täcker de vanliga fallen. CSS-regeln lindar data-URI i bakgrundsbild: url("..."); så att du kan klistra in en hel deklaration. Den blotta data-URI ger dig bara värdet för en anpassad egenskap, en <img> src eller en SVG-mask. Base64-formuläret producerar en UTF-8-säker data:image/svg+xml;base64 URI för verktyg eller byggsteg som förväntar sig den kodningen, inklusive SVG:er med emoji eller textnoder med accent. Alternativet MIME-typ öppnar samma kodare för vilket innehåll som helst: välj text/plain, text/html, text/css, application/json eller en annan typ, så blir det du klistrar in en data-URI av den typen. Bara image/svg+xml pressar ihop blanksteg och byter dubbla citattecken mot enkla, eftersom de två knepen kortar markup men förstör ren text och JSON. Typer som inte är bilder hoppar dessutom över background-image och ger ett naket url("…").
Växla riktningen till avkodning och verktyget vänder någon av de tre formerna tillbaka till rå SVG-uppmärkning. Klistra in en CSS-regel, en blottad data-URI eller en base64, och den extraherar SVG så att du kan redigera en ikon som bara finns i en stilmall. Sammanställningen visar inmatningsstorleken, utdatastorleken och procentuell förändring, så att du med ett ögonkast kan se om kodningen krympte eller ökade ikonen. URI:n kan också komma inlindad i en HTML-<img>- eller <link>-tagg, med explicit teckenuppsättning i huvudet.
Allt körs i din webbläsare. Din SVG-märkning laddas aldrig upp, så du kan koda privata ikoner, logotyper och interna tillgångar utan att de lämnar din enhet.