Zo gebruik je het
- Sleep een .svg-bestand naar het sleepvak, klik om er een te kiezen of plak een afbeelding.
- Kies Origineel behouden om de SVG-markup zelf te coderen, of kies bij Converteren naar PNG, JPEG of WebP om er pixels van te maken.
- Als je rastert, stel dan een Max. breedte in om de grootte in pixels te bepalen.
- Kopieer de uitvoer voor CSS background-image voor een stylesheet, of de data-URI, kale Base64, img-tag of Markdown-versie.
SVG als data-URI
SVG (Scalable Vector Graphics, MIME-type image/svg+xml) beschrijft vormen als XML-tekst en blijft daardoor op elk formaat scherp. De Base64 begint meestal met PHN2Zy (de gecodeerde <svg) of met PD94bWw als het bestand begint met een XML-declaratie.
Wanneer een SVG als afbeelding wordt gebruikt, moet het root-element xmlns="http://www.w3.org/2000/svg" bevatten. Veel inline fragmenten die uit HTML zijn gekopieerd, laten dat weg, en de data-URI toont dan niets. In afbeeldingsmodus worden externe bronnen bovendien geblokkeerd, dus weblettertypen en gekoppelde afbeeldingen in de SVG worden niet geladen; zet tekst eerst om in paden of sluit die bronnen eerst in.
Base64 of URL-codering?
Omdat SVG al tekst is, kan een data-URI de markup rechtstreeks bevatten, waarbij maar een paar tekens procentgecodeerd worden (<, >, #, % en aanhalingstekens). Voor een typisch pictogram in CSS is dat korter dan Base64 en comprimeert het beter met gzip. Base64 is de veiligere keuze als de string door systemen gaat die aanhalingstekens of speciale tekens verminken, of als een API Base64 verwacht.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Procentgecodeerd */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Wil je de procentgecodeerde vorm maken, gebruik dan de Data-URI-generator en kies Procentcodering.
Niet-vertrouwde SVG opschonen
SVG kan <script>-elementen bevatten, attributen voor event handlers zoals onload, en links naar andere documenten. Browsers voeren geen scripts uit in een SVG die via <img> of een CSS-achtergrond wordt getoond, maar hetzelfde bestand kan ze wel uitvoeren als het inline in HTML staat of los wordt geopend. Kunnen gebruikers SVG-bestanden naar je applicatie uploaden, schoon ze dan op, bijvoorbeeld met DOMPurify, voordat je ze opslaat of insluit. Base64 verbergt de markup alleen voor een vluchtige blik; het maakt hem niet veilig.
Veelgestelde vragen
Is Base64 of URL-codering beter voor SVG?
Voor SVG in CSS is URL-codering meestal kleiner en blijft het resultaat leesbaar. Base64 is robuuster als de string door andere systemen gaat of als een API Base64 vereist.
Waarom wordt mijn SVG-data-URI niet weergegeven?
xmlns-attribuut op het root-element, een niet-geëscapete # in een procentgecodeerde URI, en lettertypen of afbeeldingen die de SVG uit andere bestanden laadt.Kan ik een SVG omzetten naar een PNG-Base64-string?
Ja. Kies PNG bij Converteren naar. De browser zet de SVG om in pixels, en met de optie Max. breedte kun je het resultaat kleiner maken.