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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="diagram_image"> | |
| <svg id="inputSvg" xmlns="http://www.w3.org/2000/svg" xmlns:inkspace="http://www.inkscape.org/namespaces/inkscape" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 120"> | |
| <defs id="defs_block"> | |
| <filter height="1.504" id="filter_blur" inkspace:collect="always" width="1.1575" x="-0.07875" y="-0.252"> | |
| <feGaussianBlur id="feGaussianBlur3780" inkspace:collect="always" stdDeviation="4.2" /> | |
| </filter> | |
| </defs> | |
| <title>blockdiag</title> | |
| <desc/> | |
| <rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="67" y="46" /> | |
| <rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="259" y="46" /> | |
| <rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="451" y="46" /> | |
| <rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="64" y="40" /> | |
| <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="128" y="66">discovery</text> | |
| <rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="256" y="40" /> | |
| <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="320" y="66">execution</text> | |
| <rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="448" y="40" /> | |
| <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="512" y="66">reporting</text> | |
| <path d="M 192 60 L 248 60" fill="none" stroke="rgb(0,0,0)" /> | |
| <polygon fill="rgb(0,0,0)" points="255,60 248,56 248,64 255,60" stroke="rgb(0,0,0)" /> | |
| <path d="M 384 60 L 440 60" fill="none" stroke="rgb(0,0,0)" /> | |
| <polygon fill="rgb(0,0,0)" points="447,60 440,56 440,64 447,60" stroke="rgb(0,0,0)" /> | |
| </svg> | |
| </div> | |
| <img id="outputPngImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 | |
| //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/> | |
| <span id="outputPngLinkSpan"> | |
| <a href="">PNG (Save link as..)</a> | |
| </span> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class SVGtoPNGDataURL { | |
| constructor() { | |
| this.canvas = document.createElement('canvas'); // Not shown on page | |
| this.canvas2DContext = this.canvas.getContext('2d'); | |
| this.loaderImage = new Image; // Not shown on page | |
| } | |
| // Generate PNG data URL from SVG and send it to callback function when ready | |
| go(svgElement, dataUrlCallback) { | |
| var svgAsXML = (new XMLSerializer).serializeToString( svgElement ); | |
| this.loaderImage.width = this.canvas.width = svgElement.clientWidth; | |
| this.loaderImage.height = this.canvas.height = svgElement.clientHeight; | |
| var self = this; | |
| this.loaderImage.onload = function() { | |
| self.canvas2DContext.drawImage( self.loaderImage, 0, 0, self.loaderImage.width, self.loaderImage.height ); | |
| dataUrlCallback(self.canvas.toDataURL()); | |
| }; | |
| this.loaderImage.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML ); | |
| } | |
| }; | |
| var converter = new SVGtoPNGDataURL(); | |
| var inputSvgElement = document.querySelector('#inputSvg'), // Inline SVG element | |
| outputPngImage = document.querySelector('#outputPngImage'), // Where to draw the result | |
| outputPngLink = document.querySelector('#outputPngLinkSpan a'); | |
| converter.go(inputSvgElement, dataUrlCallback=function(dataURL) { | |
| outputPngImage.src = dataURL; | |
| outputPngLink.href = dataURL; | |
| }); |
The Wiert Corner - irregular stream of stuff 
Leave a comment