33:T71d,normalize = svg => { const node = svg.cloneNode(); // shallow, just to get top-level attributes for (const polyline of svg.querySelectorAll("polyline")) { // really similar; just put an M in front of the points node.appendChild(htl.svg``); } for (const polygon of svg.querySelectorAll("polygon")) { // just put an M before and a Z after! node.appendChild(htl.svg``); } for (const line of svg.querySelectorAll("line")) { // just bundle up x1,y1 and x2,y2 into an array! the d attribute doesn’t really care about comma between coordinates const points = ["x1", "y1", "x2", "y2"].map(attr => line.getAttribute(attr)); node.appendChild(htl.svg``); } for (const rect of svg.querySelectorAll("rect")) { // over, down, across, down, back across, up const [x, y, width, height] = ["x", "y", "width", "height"].map(attr => rect.getAttribute(attr)); node.appendChild(htl.svg``); } for (const circle of svg.querySelectorAll("circle")) { // tricky because drawing an arc from a point to itself collapses to nothing; we draw half a circle across and half a circle back const [cx, cy, r] = ["cx", "cy", "r"].map(attr => circle.getAttribute(attr)); const x1 = cx - r, y1 = cy; node.appendChild(htl.svg``); } for (const path of svg.querySelectorAll("path")) { // almost forgot to pass these through too. note im stripping out all other attributes and styles bc that's my use case rn node.appendChild(htl.svg``) } return node; }34:[] 31:{"title":"Normalize SVG elements to paths","cells":[{"id":0,"value":"# Normalize SVG elements to paths\nSVG has all sorts of elements but sometimes I want them all to be paths, so I can use all my favorite [pathstuff](https://observablehq.com/@tophtucker/pathstuff)! For example, this SVG has a polyline, a polygon, a line, a rect, and a circle:","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"svg = htl.svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"Let’s make them all paths!","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"normalized = normalize(svg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"Look, now they’re all paths:","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"normalized.outerHTML.replaceAll(\"\", \"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"You can import this helper function:","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"Merry Christmas!","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}