2b:null 2c:["$","title",null,{"children":"SVG image rasterization | Lionel Radisson | Observable"}] 31:[{"id":"18388ba05510d4a399097a6d7dba832eb67da23c4b57032ca9cf58ab3f3e2fa8c462a4e271980b6f591ee9ab51521d9a7fa806762fb140cc3537ce0decbff7a9","href":"https://static.observableusercontent.com/files/18388ba05510d4a399097a6d7dba832eb67da23c4b57032ca9cf58ab3f3e2fa8c462a4e271980b6f591ee9ab51521d9a7fa806762fb140cc3537ce0decbff7a9","name":"mk135@1.png","type":"image/png","lastModified":1612913808666.332,"size":1749},{"id":"8899f6ffdf44bb7d68e31072abc155f4bedd91849b7118e11ab004aad8c85f0f90a79b48682a65d7cda6e620e12b80d5b598965dfd0d09621db0cb9a9d014396","href":"https://static.observableusercontent.com/files/8899f6ffdf44bb7d68e31072abc155f4bedd91849b7118e11ab004aad8c85f0f90a79b48682a65d7cda6e620e12b80d5b598965dfd0d09621db0cb9a9d014396","name":"svg-image-rasterization.png","type":"image/png","lastModified":1612913594450.027,"size":29507},{"id":"2f44dc3d47756d179b84b9eaa59acf5d8e1656e38aaa589f7efbd8002154284c5e496ecdc7b9e6bca96c2794b8cc048c09a8e0829bcb7a4807956f58c0012e9f","href":"https://static.observableusercontent.com/files/2f44dc3d47756d179b84b9eaa59acf5d8e1656e38aaa589f7efbd8002154284c5e496ecdc7b9e6bca96c2794b8cc048c09a8e0829bcb7a4807956f58c0012e9f","name":"svg2.png","type":"image/png","lastModified":1612992685263.313,"size":3099},{"id":"8a713efef87b6eb30734d594c0e7bdb1ac80f23f18ae9af2369d0ec01995a989d3ba2503b44ba9530277227ff4ee0290a29e01d1cc1b77e880af6361af3afa7f","href":"https://static.observableusercontent.com/files/8a713efef87b6eb30734d594c0e7bdb1ac80f23f18ae9af2369d0ec01995a989d3ba2503b44ba9530277227ff4ee0290a29e01d1cc1b77e880af6361af3afa7f","name":"svg-image-rasterization@1.png","type":"image/png","lastModified":1612993843272.588,"size":60037}] 2f:{"id":"1ed77f938112330a","slug":"svg-image-rasterization","title":"SVG image rasterization","thumbnail":"a436800b75d0879cfa2e3b290603a80d129accbddcd39ba4423483a01eb421be","access_level":"unlisted","create_time":"$D2021-02-09T23:24:53.322Z","update_time":"$D2021-02-10T22:43:25.823Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":"starter_2024"},"version":134,"publish_version":134,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null}],"members":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SVG image rasterization","cells":[{"id":0,"value":"md`# SVG image rasterization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`Issue on https://talk.observablehq.com/t/rasterization-of-images-in-svg-fails/4615`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`___\n### 🔴 CORS Issue`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`SVG code from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"svg1 = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`Using \"Download PNG\" from the cell's menu results in the following PNG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"FileAttachment(\"svg-image-rasterization.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`CORS issues could be resolved using https://next.observablehq.com/@asg017/cors-anywhere-for-observables as pointed out by [Paul Buffa](https://observablehq.com/@pstuffa).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`___\n### ✅ Attached files`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"imageURL = FileAttachment(\"mk135@1.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"svg2 = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`Which results in the following PNG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"FileAttachment(\"svg2.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`___\n### 🔴 In-memory images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof file = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"img = {\n const img = new Image()\n img.src = URL.createObjectURL(file)\n return img\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`Results in a broken image:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"FileAttachment(\"svg-image-rasterization@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"