Het live voorbeeld voegt alleen voor de weergave een xmlns-attribuut toe, dus het toont ook een SVG die er geen heeft. De PNG-export en de gekopieerde Data-URI voegen het niet toe. Houd dat in gedachten als je een SVG-Data-URI voor een stylesheet kopieert of een PNG exporteert: een mooi voorbeeld bewijst niet dat het bestand als afbeelding laadt.
De valkuil van het ontbrekende xmlns
Voor de PNG laadt de browser je code als afbeelding. Zonder xmlns="http://www.w3.org/2000/svg" mislukt dat meestal. Dan start de download niet en verschijnt er een foutmelding. Voeg het attribuut toe en druk opnieuw op de knop.
Kopiëren, omzetten, controleren: de stappen
- Plak SVG-code in het tekstveld. Het begint met een voorbeeld, een blauwe cirkel met een witte ster.
- Bekijk het voorbeeld. Het staat op een donkere geruite achtergrond, zodat lichte vormen zichtbaar blijven.
- Druk op Data-URI kopiëren voor een
data:image/svg+xml,...-string, of op Base64 kopiëren voordata:image/svg+xml;base64,.... Beide knoppen kopiëren de volledige URI met het voorvoegseldata:. - Voer voor een PNG een grootte in pixels in en druk op Downloaden als PNG. De bestandsnaam bevat de grootte, bijvoorbeeld
vector-512x512.png.
SVG-Data-URI of Base64: welke plak je
De eerste knop gebruikt percentcodering en escapet ook enkele en dubbele aanhalingstekens, zodat de string binnen een CSS-url() of een HTML-attribuut past. Voor SVG is deze vorm vaak korter. De tweede knop voegt ongeveer een derde aan de tekstlengte toe, maar bevat alleen veilige tekens en verwerkt niet-ASCII-tekst. De tool minimaliseert je SVG niet. De URI bevat je code zoals ze is, alleen gecodeerd. Een klein icoon, bijvoorbeeld een chevron van 400 bytes voor een eigen selectievak, bespaart zo één verzoek.
Wat de PNG en het voorbeeld met je code doen
De PNG is altijd vierkant. De afbeelding wordt op een canvas van grootte bij grootte getekend in zijn eigen verhoudingen en gecentreerd, dus een brede tekening wordt niet uitgerekt. De lege marge blijft transparant, net als de rest van de achtergrond. Een lege of ongeldige grootte valt terug op 512 en een decimaal getal wordt afgekapt tot een geheel getal. Externe afbeeldingen, lettertypen en stylesheets waar de SVG naar verwijst, worden niet geladen. Heel grote formaten kunnen mislukken, afhankelijk van de canvaslimiet van de browser.
Alles draait op je apparaat. Een druk op een knop verstuurt geen verzoek en de kopieerknoppen schrijven naar je klembord. Het voorbeeld is een afbeeldingselement met een data-URI, dus scripts en gebeurtenis-handlers in de geplakte code worden niet uitgevoerd.