Zo gebruik je het
- Plak de Base64-string of de data:image/svg+xml;base64-URI.
- Controleer het voorbeeld en het herkende formaat en de afmetingen.
- Laat SVG staan bij Downloaden als. Bij SVG-invoer wordt het bestand opgeslagen als SVG-tekst.
- Download het .svg-bestand en open het in een editor als je de opmaakcode wilt lezen of aanpassen.
SVG herkennen in Base64
Anders dan andere afbeeldingsformaten is SVG gewone XML-tekst. Een bestand dat begint met <svg levert Base64 op die begint met PHN2Zy, en een bestand dat begint met een XML-declaratie (<?xml) begint met PD94bWwg. Base64-SVG's kom je vaak tegen in CSS-achtergrondafbeeldingen, pictogrammensets, exports uit ontwerptools en e-mailsjablonen. Het MIME-type is image/svg+xml.
Veel SVG-data-URI's zijn helemaal geen Base64, maar procentgecodeerde tekst, zoals data:image/svg+xml,%3Csvg.... Deze tool verwacht Base64, dus ontleed zulke URI's in plaats daarvan met de Data-URI-generator.
De SVG-code lezen
Het voorbeeld laat zien hoe de afbeelding wordt weergegeven, maar het interessante deel is vaak de opmaakcode: padgegevens, kleuren, een viewBox of ingesloten lettertypen. Download het bestand als Origineel of SVG en open het in een willekeurige teksteditor, of plak dezelfde Base64 in Base64 decoderen om de XML meteen als tekst te zien.
Raster naar SVG is een omhulsel, geen vectorisatie
Zijn de Base64-gegevens een PNG, JPEG of een andere bitmap, dan levert de keuze SVG een SVG-bestand op dat de originele pixels in een <image>-element bevat. Dat is handig als een tool alleen SVG-bestanden accepteert, maar de afbeelding wordt niet in vormen omgezet: hij wordt nog steeds wazig bij vergroten, en het bestand is groter dan de bitmap, omdat de pixels er als Base64 in zijn opgeslagen. Voor echte vectorpaden gebruik je overtreksoftware zoals Potrace of de functie Bitmap overtrekken in Inkscape.
Omgaan met SVG uit onbekende bronnen
SVG kan <script>-elementen, attributen voor event handlers en links naar externe bronnen bevatten. Browsers blokkeren die allemaal wanneer een SVG als afbeelding wordt getoond, via een <img>-tag of een CSS-achtergrond. Scripts kunnen wel draaien en externe bronnen kunnen wel laden als het bestand rechtstreeks in een browsertabblad wordt geopend of als de opmaakcode inline in een pagina wordt geplakt. Controleer SVG uit onbekende bronnen of schoon het op voordat je het op die manier gebruikt.
Veelgestelde vragen
Kan deze tool een PNG omzetten in een echte vector-SVG?
Nee. Een bitmap converteren naar SVG sluit de afbeelding alleen in een SVG-bestand in. Het resultaat schaalt zoals de originele bitmap, niet zoals een vectortekening.
Waarom lukt het niet om mijn SVG-data-URI te decoderen?
;base64, bevat. Zo niet, dan is de SVG procentgecodeerd of gewone tekst en geen Base64. De Data-URI-generator kan hem ontleden.Is het veilig om een SVG uit een onbekende bron te decoderen?
Decoderen en opslaan kan geen kwaad, want het resultaat is gewoon tekst. Scripts in een SVG kunnen alleen draaien als die als document wordt geopend of inline in een webpagina wordt ingevoegd.
Waarom ontbreken lettertypen of gekoppelde afbeeldingen nadat ik een SVG naar PNG heb geconverteerd?
Om een SVG te rasteren laadt de browser hem als afbeelding, en in die modus kan een SVG geen externe bestanden ophalen. Weblettertypen en gekoppelde afbeeldingen worden overgeslagen en in plaats daarvan worden standaardlettertypen gebruikt. Sluit lettertypen en afbeeldingen in de SVG in, zodat hij op zichzelf staat.