Converting inline svg xml to png
Posted by jpluimers on 2022/07/19
A while ago, I had a web page showing the logo as inline svg xml code.
Edit 20231209: [Wayback/Archive] Render SVG to PNG: Edit fiddle – JSFiddle – Code Playground (explained in [Wayback/Archive] html – Convert embedded SVG to PNG in-place – Stack Overflow by [Wayback/Archive] User anatoly techtonik – Stack Overflow) works way better than the InfoHeap link:
- Replace the
svgelement in it (but keep theid="inputSvg"attribute!), - Run the fiddle,
- Save the rendered PNG file by right-clicking the “PNG (Save link as..)” link then saving the file.
Original content
It took a while to find a place to convert that on-line: [Wayback/Archive.is] inline svg xml to png – online html sandbox – InfoHeap (via [Wayback/Archive.is] Convert svg xml text to png image using canvas – InfoHeap):
The solution is a bit of JavaScript (quoted below) that you can run-online: modify the svg bit in it, then run it, scroll down in the result and verify if the canvas fits (when not: adapt the canvas side, then re-run).
The svg xml code needs to be all on one line, so remove any line breaks in it before running.
I have tested it in Chrome, but it should work in non-Chromium browsers like Firefox as well.
The inner workings of the JavaScript conversion code is explained in [Wayback/Archive.is] html – Convert embedded SVG to PNG in-place – Stack Overflow with more demo code at [Archive.is] Rasterizing In-Document SVG (thanks [Wayback] Phrogz!).
Related: [Archive.is] Jeroen Wiert Pluimers on Twitter: “Nieuwe logo, oude logo. Vrijwel alle werknemers werden een halve dag naar huis gestuurd om ruimte te maken voor de genodigden voor de zodat die de introductie van naam en logo konden bijwonen. Heel goed om verbinding te verliezen met je echte doelgroep. … “
--jeroen
https://gist.github.com/jpluimers/d2ad8a572bd9468c5f322e5dfc092f6c
Leave a Comment