2b:null 2c:["$","title",null,{"children":"Saving SVG | GnimOay | Observable"}] 31:[] 2f:{"id":"de0001af745648d2","slug":"saving-svg","title":"Saving SVG","thumbnail":"4b8f4050c59fa660d00aac67d03b8d4cdeea9897cbdb179f2dc5d9e05ed35196","access_level":"public","create_time":"$D2020-02-20T23:41:48.509Z","update_time":"$D2020-02-20T23:49:46.367Z","view_time":null,"first_public_time":"$D2020-02-20T23:45:45.233Z","fork":{"id":"576f8943dbfbd395","slug":"saving-svg","title":"Saving SVG","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":128,"publish_version":128,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":3,"value":"import {chart} from \"@d3/contours\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":12,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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, null, false);\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","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`Alternatively, you can render the SVG to a canvas to generate a PNG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"DOM.download(() => rasterize(chart), undefined, \"Save as PNG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"rasterize(chart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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 image;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":" a=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","author":"$undefined","summary":"$undefined"},{"id":112,"value":"a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"