2c:null 2d:["$","title",null,{"children":"SVG preserveAspectRatio Attribute | Jules Blom | Observable"}] 32:Ta9d,alignmentOptions = [ { value: "none", description: "Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. Note that if is \`none\`, then the optional value is ignored." }, { value: "xMinYMin", description: "Force uniform scaling. Align the of the element's viewBox with the smallest X value of the viewport. Align the of the element's viewBox with the smallest Y value of the viewport." }, { value: "xMidYMin", description: "Force uniform scaling. Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport. Align the of the element's viewBox with the smallest Y value of the viewport." }, { value: "xMaxYMin", description: "Force uniform scaling. Align the + of the element's viewBox with the maximum X value of the viewport. Align the of the element's viewBox with the smallest Y value of the viewport." }, { value: "xMinYMid", description: "Force uniform scaling. Align the of the element's viewBox with the smallest X value of the viewport. Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport." }, { value: "xMidYMid", description: "(the default) Force uniform scaling. Align the midpoint X value of the element's viewBox with th midpoint X value of thviewport. Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport." }, { value: "xMaxYMid", description: "Force uniform scaling. Align the + of the element's viewBox with the maximum X value of the viewport. Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport." }, { value: "xMinYMax", description: "Force uniform scaling. Align the of the element's viewBox with the smallest X value of the viewport. Align the + of the element's viewBox with the maximum Y value of the viewport." }, { value: "xMidYMax", description: "Force uniform scaling. Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport. Align the + of the element's viewBox with the maximum Y value of the viewport." }, { value: "xMaxYMax", description: "Force uniform scaling. Align the + of the element's viewBox with the maximum X value of the viewport. Align the + of the element's viewBox with the maximum Y value of the viewport." } ]33:[] 30:{"id":"29cc64262e22f616","slug":"svg-preserveaspectratio-attribute","title":"SVG preserveAspectRatio Attribute","thumbnail":"123886b08a206d2fad44fd36bd10fd986239bbde613f6722d2e6952ad6c13e4a","access_level":"public","create_time":"$D2021-05-27T13:14:25.868Z","update_time":"$D2021-05-28T00:23:03.092Z","view_time":null,"first_public_time":"$D2021-05-27T17:36:50.878Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":238,"publish_version":238,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null}],"members":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"e5d94b30651c2ec4","slug":"svg","title":"SVG Explainables","owner":{"id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom"}},"type":"notebook","body":{"titling":"auto","title":"SVG preserveAspectRatio Attribute","cells":[{"id":0,"value":"md`# SVG \\`preserveAspectRatio\\` Attribute`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md` Just a quick notebook I made to play around and get a sense of how the \\`preserveAspectRatio\\` SVG attribute works. Based on the MDN docs for the [\\`preserveAspectRatio\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) SVG attribute `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"svg`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof alignment = Inputs.select(alignmentOptions, {\n label: \"Alignment\",\n format: x => x.value\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`#### Alignment: \\`${alignment.value}\\`\n\n${alignment.description}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"viewof aspect = Inputs.select(aspects, {\n label: \"Aspect\",\n format: x => x.label\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`width = ${dimensions[0]}px and height = ${dimensions[1]}px`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof meetOrSlice = Inputs.select(meetOrSliceOptions, {\n label: \"Meet or Slice\",\n format: x => x.label\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`#### \\`${meetOrSlice.label}\\` \n\n${meetOrSlice.description}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"dimensions = aspect.value ? [svgWidth, svgHeight] : [svgHeight, svgWidth]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"svgHeight = svgWidth / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"svgWidth = width / 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"preserveAspectRatio = `${alignment.value} ${meetOrSlice.label}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"meetOrSliceOptions = [\n {\n label: 'meet',\n description:\n \"The default. Scale the graphic such that: \\n * aspect ratio is preserved\\n * the entire viewBox is visible within the viewport\\n * the viewBox is scaled up as much as possible, while still meeting the other criteria \\n \\n In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the viewBox (i.e., the area into which the viewBox will draw will be smaller than the viewport).\"\n },\n {\n label: 'slice',\n description:\n \"Scale the graphic such that:\\n * aspect ratio is preserved\\n * The entire viewport is covered by the viewBox\\n * The viewBox is scaled down as much as possible, while still meeting the other criteria \\n \\n In this case, if the aspect ratio of the viewBox does not match the viewport, some of the viewBox will extend beyond the bounds of the viewport (i.e., the area into which the viewBox will draw is larger than the viewport).\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"aspects = [{ value: true, label:\"Width greater than height\"}, {value: false, label:\"Height greater than width\"}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`## Credits\n\n* [MDN: preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)\n* [MDN: viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"