2b:null 2c:["$","title",null,{"children":"Saving SVG | Ammø | Observable"}] 31:[] 2f:{"id":"9751a63dfacf837f","slug":"saving-svg","title":"Saving SVG","thumbnail":"755fbd1e6ee961b6c0ccb3388b8045fe731f6176121f88ed101adb957f8b99f7","access_level":"public","create_time":"$D2022-11-25T16:22:05.251Z","update_time":"$D2022-11-25T17:10:46.789Z","view_time":null,"first_public_time":"$D2022-11-25T16:22:05.251Z","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":"46ff62597172a6f5","login":"a2m0","name":"Ammø","avatar_url":"https://avatars-next.observableusercontent.com/801308717e022f39d6a78bd80cfec7302e0665d1daae92a3138770843dd73213","tier":"starter_2024"},"version":152,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"590e135bc61781ed","login":"a2m0","name":"Ammø","avatar_url":"https://avatars-next.observableusercontent.com/801308717e022f39d6a78bd80cfec7302e0665d1daae92a3138770843dd73213","tier":null}],"members":[{"type":"individual","id":"590e135bc61781ed","login":"a2m0","name":"Ammø","avatar_url":"https://avatars-next.observableusercontent.com/801308717e022f39d6a78bd80cfec7302e0665d1daae92a3138770843dd73213","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"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"},{"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);\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":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"},{"id":71,"value":"md`To use this in your own notebook, import from this notebook:\n\n\\`\\`\\`js\nimport {rasterize, downloadSvgImage, rangePngPixels, serialize} from \"@a2m0/saving-svg\"\n\\`\\`\\`\n\nHappy downloading!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"_p.s._ added some extra helper functions #SkyFi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":120,"value":"function downloadSvgImage(svg) {\n return DOM.download(() => rasterize(svg), \"svg-as-png\", \"Generate Logo as PNG\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"function rangePngPixels(size=300) {\n return Inputs.range([32,4096], {label: \"Size (in px)\", step: 2, value: size})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"