2d:null 2e:["$","title",null,{"children":"Saving SVG | Leap Gest | Observable"}] 33:[] 31:{"id":"79acbe682da5e1e4","slug":"saving-svg","title":"Saving SVG","thumbnail":"c48f06e742f73fe69f7cc695c448353fdeaad89b12eafcb907b49e23217bf9b0","access_level":"public","create_time":"$D2020-12-05T09:55:40.173Z","update_time":"$D2020-12-05T09:55:40.173Z","view_time":null,"first_public_time":"$D2020-12-05T09:56:03.800Z","has_unpublished_edits":null,"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":"69b9a6f6c1302f28","login":"leapgest","name":"Leap Gest","avatar_url":"https://avatars-next.observableusercontent.com/f0a541a5c3dcc1721e969a182b8121ea3d8d91a7d443faaf44eff7b81d02a8a6","tier":"starter_2024"},"version":109,"publish_version":109,"role":null,"authored":false,"authors":[{"type":"individual","id":"a174fe22a67b90aa","login":"leapgest","name":"Leap Gest","avatar_url":"https://avatars-next.observableusercontent.com/f0a541a5c3dcc1721e969a182b8121ea3d8d91a7d443faaf44eff7b81d02a8a6","tier":null}],"members":[{"type":"individual","id":"a174fe22a67b90aa","login":"leapgest","name":"Leap Gest","avatar_url":"https://avatars-next.observableusercontent.com/f0a541a5c3dcc1721e969a182b8121ea3d8d91a7d443faaf44eff7b81d02a8a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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","output":"$undefined","database":"$undefined"},{"id":3,"value":"import {chart} from \"@d3/contours\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":12,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":50,"value":"DOM.download(() => rasterize(chart), undefined, \"Save as PNG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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 promise;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"