29:null 2a:["$","title",null,{"children":"SVG viewport, viewBox, and preserveAspectRatio | Martien van Steenbergen | Observable"}] 2f:T45a,function highlight(p, c) { p.append("rect") .attr("fill", c) .attr("opacity", 0.2) .attr("width", "100%") .attr("height", "100%") .attr("stroke", "black"); if (true) { corner(p, "0", "0", "red"); corner(p, "100%", "0", "green"); corner(p, "0", "100%", "blue"); corner(p, "100%", "100%", "purple"); } p.append("line") .attr("x1", "50%") .attr("y1", 0) .attr("x2", "50%") .attr("y2", "100%") .attr("stroke", "black") .attr("stroke-dasharray", 5, 5); p.append("line") .attr("x1", 0) .attr("y1", "50%") .attr("x2", "100%") .attr("y2", "50%") .attr("stroke", "black") .attr("stroke-dasharray", 5, 5); // p.append("path") // .attr("d", `M${w / 2} 0V${h}`) // .attr("stroke", "black") // .attr("stroke-dasharray", 5, 5); // p.append("path") // .attr("d", `M0 ${h / 2}H${w}`) // .attr("stroke", "black") // .attr("stroke-dasharray", 5, 5); return p; function corner(g, x, y, c) { g.append("circle") .attr("r", 10) .attr("fill", c) .attr("cx", x) .attr("cy", y); } }30:T1159,parrot = ` `31:[] 2d:{"id":"4adadd5bd78e463b","slug":"svg-viewport-viewbox-and-preserveaspectratio","title":"SVG viewport, viewBox, and preserveAspectRatio","thumbnail":"fcc98f8f9373cea5faa79849d54d78770a24ae2afd834c7c21846c351c98af2a","access_level":"public","create_time":"$D2018-09-21T11:18:24.621Z","update_time":"$D2024-03-11T13:34:43.232Z","view_time":null,"first_public_time":"$D2018-09-21T18:07:04.392Z","has_unpublished_edits":null,"fork":false,"stars":21,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":548,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"d594647d8d94d1ff","slug":"svg","title":"SVG","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"SVG viewport, viewBox, and preserveAspectRatio","cells":[{"id":0,"value":"md`# SVG viewport, viewBox, and preserveAspectRatio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"{\n const canvas = d3\n .select(DOM.svg(width, height))\n .attr(\"overflow\", overflow)\n ;\n highlight(canvas, \"blue\");\n const paper = canvas\n .append(\"svg\")\n .attr(\"overflow\", overflow)\n .attr(\"viewBox\", `${minX} ${minY} ${w} ${h}`)\n .attr(\n \"preserveAspectRatio\",\n `${preserveAspectRatio ? `${xAlign}${yAlign}` : \"none\"} ${({\"Full/Meet\": \"meet\", \"Fill/Slice\": \"slice\"})[reference]}`\n );\n highlight(paper, \"green\");\n paper.append(\"g\")\n .attr(\"id\", \"parrot\")\n .html(parrot);\n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"~~~js\npreserveAspectRatio = ${preserveAspectRatio ? xAlign + yAlign : \"none\"} ${({\"Full/Meet\": \"meet\", \"Fill/Slice\": \"slice\"})[reference]}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":488,"value":"viewBox = [minX, minY, w, h]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"aspectRatiosRatio = +(width / height / (w / h)).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof w = Inputs.range([0, 2 * width], {step: 10, value: 800, label: \"ViewBox Width\"})\n// \"Stretch or shrink the width of the viewBox—causes the image to extend beyond the viewBox’s edges when smaller than the image’s width.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"viewof h = Inputs.range([10, 2 * height], {label: \"ViewBox Height\", step: 10, value: 600})\n// \"Stretch or shrink the height of the viewBox—causes the image to extend beyond the viewBox’s edges when smaller than the image’s height.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof minX = Inputs.range([-2 * width, 2 * width], {label: \"Min X\", step: 1, value: 0})\n// \"Slide the viewBox left or right.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof minY = Inputs.range([-2 * height, 2 * height], {label: \"Min Y\", step: 1, value: 0})\n// \"Slide the viewBox up or down.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof preserveAspectRatio = Inputs.toggle({label: \"Preserve Aspect Ratio\", value: \"preserve\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof reference = Inputs.radio([\"Full/Meet\", \"Fill/Slice\"], {label: \"Reference\", value: \"Full/Meet\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof xAlign = Inputs.radio([\"xMin\", \"xMid\", \"xMax\"], {label: \"X Alignment\", value: \"xMid\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof yAlign = Inputs.radio([\"YMin\", \"YMid\", \"YMax\"], {label: \"Y Alignment\", value: \"YMid\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"viewof overflow = Inputs.radio([\"visible\", \"hidden\"], {label: \"Overflow\", value: \"visible\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`### Preserve Aspect Ratio\nWhen the aspect ratio does **not** need to be preserved:\n* the \\`viewBox\\` can be scaled non-uniformly to meet all edges of the \\`viewport\\`, filling it entirely;\n* \\`fill\\` or \\`full\\` and alignment are meaningless and ineffective, since the \\`viewport\\` is always fully filled.\n\nWhen preserving the aspect ratio, the graphic content is uniformly scaled if necessary, such that the element's bounding box exactly matches the viewport rectangle.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`### Meet or Slice\n\\`meet\\` or \\`slice\\` (\\`full\\` or \\`fill\\`) control how the \\`viewBox\\` gets scaled within the \\`viewport\\` and only make sense when the aspect ratio needs to be preserved.\n\n\\`meet\\` (*default*): the \\`viewBox\\` is scaled uniformly to be fully visible in the \\`viewport\\`, meeting its opposing edges, leaving an empty area if the respective aspect ratios differ.\n\n\\`slice\\`: the \\`viewBox\\` is scaled to fill the entire \\`viewport\\`, slicing off or clipping part of the \\`viewBox\\` that extends beyond the viewport if the respective aspect ratios differ.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`### Aligment within the viewport\nControl the alignment of the \\`viewBox\\` within the \\`viewport\\`. Only meaningful and effective when the aspect ratio needs to be preserved.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"{\n const viewportAspectRatio = width / height;\n const viewBoxAspectRatio = w / h;\n const widerOrTaller = viewportAspectRatio / viewBoxAspectRatio;\n return md`\n| Area | Aspect ratio |\n| - | - |\n| \\`viewport\\` | ${viewportAspectRatio.toFixed(\n 2\n )} | \n| \\`viewBox\\` |${viewBoxAspectRatio.toFixed(2)}|\n| meaningful alignment | ${\n widerOrTaller == 1\n ? \"none\"\n : widerOrTaller > 1\n ? \"**X** only\"\n : \"**Y** only\"\n } |\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md`---\n## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"height = Math.ceil(((width / 16) * 9) / 10) * 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`The SVG parrot illustration used is a freebie from [Freepik](http://freepik.com).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"