30:[] 2e:{"title":"Saving SVG","cells":[{"id":0,"value":"md`# Saving SVG\n\n

\n\nSay we have a dynamically-generated SVG, like this contour plot. Here’s how might you save it to a file in Observable using DOM.download.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import {chart} from \"@d3/contours\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`You can serialize the SVG element as a string, and then download it as an SVG file.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`Alternatively, you can render the SVG to a canvas to generate a PNG.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"DOM.download(() => rasterize(chart), undefined, \"Save as PNG\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"function rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`To use this in your own notebook, import from this notebook:\n\n\\`\\`\\`js\nimport {rasterize} from \"@mbostock/saving-svg\"\n\\`\\`\\`\n\nHappy downloading!`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}