2b:null 2c:["$","title",null,{"children":"Saving SVG | José M. Zavala González | Observable"}] 31:T447,async function rasterize_canvg(svg) { let resolve, reject; const promise = new Promise((y, n) => (resolve = y, reject = n)); const serialized_svg = serialize(svg); const serialized_text = await serialized_svg.text(); // console.log('serialized_text', serialized_text) const image = new Image; image.onerror = reject; image.onload = async () => { var canvas = document.createElement("canvas"); canvas.width = svg.width.baseVal.value; canvas.height = svg.height.baseVal.value; const ctx = canvas.getContext('2d'); const rect = svg.getBoundingClientRect(); const context = DOM.context2d(rect.width, rect.height); const v = canvg.Canvg.fromString(ctx, serialized_text); await v.start() // console.log('ready?', v.isReady()) // console.log('image', image); // context.drawImage(image, 0, 0, rect.width, rect.height); context.canvas.toBlob((res) => {console.log('res', res); resolve(res)}); }; image.src = URL.createObjectURL(serialize(svg)); // console.log('hello???') // console.log('promise?', promise) return promise; }32:[] 2f:{"id":"2b25c345b34aef04","slug":null,"title":"Saving SVG","thumbnail":"794d2f524f7000c6c0d2fddfe304b2f21056884eb7d6166bebe9c70203e16ee4","access_level":"public","create_time":"$D2023-11-30T20:17:25.630Z","update_time":"$D2023-11-30T20:42:00.540Z","view_time":null,"first_public_time":"$D2023-11-30T20:17:25.630Z","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":"247b19faa48b7d89","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":"starter_2024"},"version":180,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c62f0243f8f45b0","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":null}],"members":[{"type":"individual","id":"2c62f0243f8f45b0","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","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);\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":115,"value":"serialize(chart).text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"canvg = import(\"https://cdn.skypack.dev/canvg@^4.0.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// canvg.Canvg\n\n// const canvas = document.querySelector('canvas');\n// const ctx = canvas.getContext('2d');\n// const v = Canvg.fromString(ctx, '');\n\n// // Start SVG rendering with animations and mouse handling.\n// v.start();","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 console.log('image', image);\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":134,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"rasterize_canvg(chart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"DOM.download(() => rasterize_canvg(chart), undefined, \"Save as PNG\")","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":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"