31:Ta74,function downloadImage() { // Retrieve svg node const svgNode = foreignObjectSVG; // Get image quality index (basically, index you can zoom in) const quality = 2 // Create image const image = new Image(); image.onload = () => { // Create image canvas const canvas = document.createElement('canvas'); // Set width and height based on SVG node const rect = svgNode.getBoundingClientRect(); canvas.width = rect.width * quality; canvas.height = rect.height * quality; // Draw background const context = canvas.getContext('2d'); context.fillStyle = '#FAFAFA'; context.fillRect(0, 0, rect.width * quality, rect.height * quality); context.drawImage(image, 0, 0, rect.width * quality, rect.height * quality); // Set some image metadata let dt = canvas.toDataURL('image/png'); // Invoke saving function saveAs(dt, 'graph.png'); }; var url = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(serializeString(svgNode)); image.src = url// URL.createObjectURL(blob); // This function invokes save window function saveAs(uri, filename) { // create link var link = document.createElement('a'); if (typeof link.download === 'string') { document.body.appendChild(link); // Firefox requires the link to be in the body link.download = filename; link.href = uri; link.click(); document.body.removeChild(link); // remove the link when done } else { location.replace(uri); } } // This function serializes SVG and sets all necessary attributes function serializeString(svg) { const xmlns = 'http://www.w3.org/2000/xmlns/'; const xlinkns = 'http://www.w3.org/1999/xlink'; const svgns = 'http://www.w3.org/2000/svg'; svg = svg.cloneNode(true); const fragment = window.location.href + '#'; const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false); while (walker.nextNode()) { for (const attr of walker.currentNode.attributes) { if (attr.value.includes(fragment)) { attr.value = attr.value.replace(fragment, '#'); } } } svg.setAttributeNS(xmlns, 'xmlns', svgns); svg.setAttributeNS(xmlns, 'xmlns:xlink', xlinkns); const serializer = new XMLSerializer(); const string = serializer.serializeToString(svg); return string; } }32:[{"id":"78c41055c91d317fbd94bf3e30a8cee5168b4b9422aebe3da514cd695a7b434f117e2a47a5f526abf45f81e59e841b76823c2d126fdc1e8d615836682fcb0df8","href":"https://static.observableusercontent.com/files/78c41055c91d317fbd94bf3e30a8cee5168b4b9422aebe3da514cd695a7b434f117e2a47a5f526abf45f81e59e841b76823c2d126fdc1e8d615836682fcb0df8","name":"svg-download-error.gif","type":"image/gif","lastModified":1574706031537.423,"size":795638},{"id":"a60f0b7503c3a62e3c6db97cd5ed4aeeb7ca38aabcc6ecd5a600013975627c12d1b0f760dbf033c55af9d7dfe0e453413c012202f73441fbb743448c8506c8b2","href":"https://static.observableusercontent.com/files/a60f0b7503c3a62e3c6db97cd5ed4aeeb7ca38aabcc6ecd5a600013975627c12d1b0f760dbf033c55af9d7dfe0e453413c012202f73441fbb743448c8506c8b2","name":"svg-download.gif","type":"image/gif","lastModified":1574705727969.677,"size":840966}] 2f:{"title":"ForeignObject exporting issue","cells":[{"id":52,"value":"md`# ForeignObject exporting issue`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`We can easily download bottom Simple SVG as PNG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`See gif bellow - \n![](${await FileAttachment(\"svg-download.gif\").url()})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`Simple SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`But we can't download SVG, which contains foreignObject`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`Gif`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`![](${await FileAttachment(\"svg-download-error.gif\").url()})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`SVG which contains foreignObject`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"foreignObjectSVG = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`But actually, there is a way to work around this problem - see this Stackoverflow question and answer\n\nhttps://stackoverflow.com/questions/40897039/problems-with-getting-canvas-datauri-from-svg-with-foreignobject\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`To see it in action, just uncomment and run bottom cell`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"// downloadImage()","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}