SVG-URL-encoder
Converteer SVG-opmaak naar een CSS-ready gegevens-URI en decodeer gegevens-URI's terug naar SVG.
SVG-URL-encoder
Plak een SVG en verkrijg een gegevens-URI die u rechtstreeks in CSS kunt plaatsen, klaar voor een achtergrondafbeelding of een masker. In plaats van base64 gebruikt de encoder de compacte URL-coderingsaanpak: hij vervangt dubbele aanhalingstekens door enkele aanhalingstekens, vouwt witruimte samen en codeert alleen de tekens die deze daadwerkelijk nodig hebben, zodat het resultaat kort en voor mensen leesbaar blijft. Hierdoor blijft uw stylesheet kleiner dan een base64-blob en kunt u nog steeds de vormen binnen de URI herkennen.
Drie uitvoerformaten dekken de veel voorkomende gevallen. De CSS-regel verpakt de gegevens-URI in de achtergrondafbeelding: url("..."); zodat u een hele aangifte kunt plakken. De kale gegevens-URI geeft u precies de waarde voor een aangepaste eigenschap, een <img> src of een SVG-masker. Het base64-formulier produceert een UTF-8-veilige data:image/svg+xml;base64-URI voor tools of buildstappen die deze codering verwachten, inclusief SVG's met emoji of geaccentueerde tekstknooppunten. De optie MIME-type opent dezelfde encoder voor elke inhoud: kies text/plain, text/html, text/css, application/json of een ander type en wat je plakt wordt een data-URI van dat type. Alleen image/svg+xml comprimeert witruimte en vervangt dubbele aanhalingstekens door enkele, want die twee trucs korten markup in maar verpesten platte tekst en JSON. Niet-afbeeldingstypen laten ook de background-image-omhulling weg en geven een kale url("…").
Verander de richting naar decodering en de tool keert elk van de drie vormen terug naar onbewerkte SVG-markeringen. Plak een CSS-regel, een kale gegevens-URI of een base64-URI, en deze extraheert de SVG, zodat u een pictogram kunt bewerken dat alleen in een stylesheet bestaat. De telling toont de invoergrootte, de uitvoergrootte en de procentuele verandering, zodat u in één oogopslag kunt zien of de codering het pictogram heeft verkleind of groter gemaakt. De URI kan ook verpakt in een HTML-<img>- of <link>-tag komen, met een expliciete tekenset in de kop.
Alles draait in uw browser. Uw SVG-opmaak wordt nooit geüpload, zodat u privépictogrammen, logo's en interne middelen kunt coderen zonder dat deze uw apparaat verlaten.