Codeer SVG-markup als een URL-gecodeerde of base64 data-URI, met kant-en-klare CSS background-image- en <img>-regels. Optioneel minifyen.
— uitvoer verschijnt hier —
— uitvoer verschijnt hier —
— uitvoer verschijnt hier —
Over deze tool
Plak ruwe SVG-markup en krijg een data-URI die je direct in CSS of HTML kunt plakken. Het produceert twee coderingen en alles wordt in je browser gegenereerd, dus er wordt niets geüpload.
De URL-gecodeerde uitvoer wisselt dubbele aanhalingstekens voor enkele, voert encodeURIComponent uit en herstelt vervolgens een paar veilige tekens (spatie, dubbele punt, slash, gelijkteken) om het compact en leesbaar te houden. De base64-uitvoer codeert de SVG in UTF-8 en voert die door btoa, wat data:image/svg+xml;base64,… geeft. Een bytevergelijking toont welke codering kleiner is; voor de meeste iconen wint de URL-gecodeerde vorm.
Schakel minify in om commentaar te verwijderen en de witruimte tussen tags samen te vouwen vóór het coderen. Kopieer de background-image-regel voor CSS of de <img src>-regel voor HTML. Merk op dat aanhalingstekens binnen de SVG worden genormaliseerd naar enkele aanhalingstekens zodat de data-URI veilig in dubbele aanhalingstekens kan worden gezet.
Veelgestelde vragen
URL-gecodeerd of base64 — welke moet ik gebruiken?
URL-gecodeerd is meestal kleiner en blijft leesbaar, wat helpt bij het debuggen. Base64 is ondoorzichtiger maar universeel geaccepteerd; de groottevergelijking vertelt je welke hier kleiner is.
Waarom werden mijn dubbele aanhalingstekens veranderd in enkele?
Attribuutaanhalingstekens worden omgezet naar enkele aanhalingstekens zodat de hele data-URI binnen een url("…") of src="…" met dubbele aanhalingstekens kan zitten zonder escapen. Beide zijn geldig in SVG.
Verandert minify hoe de SVG eruitziet?
Nee. Het verwijdert alleen commentaar en vouwt witruimte tussen en binnen tags samen; de gerenderde vector is identiek, alleen kleiner.
Wordt mijn SVG ergens naartoe geüpload?
Nee. Coderen draait volledig in je browser met encodeURIComponent en btoa; de markup verlaat nooit je apparaat.