Ga naar inhoud
TextArray
100% lokaal

SVG-URL-encoder

Converteer SVG-opmaak naar een CSS-ready gegevens-URI en decodeer gegevens-URI's terug naar SVG.

Invoer
Uitvoer

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.

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.

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.

FAQ

Waarom URL-codering gebruiken in plaats van base64 voor SVG?
URL-gecodeerde SVG is meestal kleiner dan base64 en blijft leesbaar, dus uw CSS is lichter en u kunt de opmaak nog steeds zien. Base64 wordt ook aangeboden voor tools die dit nodig hebben.
Wat zijn de drie uitvoerformaten?
Een volledige CSS-regel met achtergrondafbeelding: url(...), een kale gegevens-URI-waarde en een UTF-8-veilige base64-gegevens-URI. Kies wat uw stylesheet of component nodig heeft.
Kan ik een gegevens-URI weer omzetten in SVG?
Ja. Stel de richting in voor het decoderen en plakken van een CSS-regel, een kale gegevens-URI of een base64-URI; de tool extraheert de originele SVG-opmaak en retourneert deze.
Waarom moet mijn invoer beginnen met <svg?
Codering controleert of de invoer op SVG lijkt, zodat een verdwaalde pasta geen kapotte gegevens-URI wordt. Opmaak die begint met <svg of <?xml wordt geaccepteerd.
Wordt mijn SVG ergens geüpload?
Nee. De conversie wordt volledig in uw browser uitgevoerd en uw markeringen verlaten uw apparaat nooit.