2d:null 2e:["$","title",null,{"children":"SVG: What is the SVG viewBox about? | Daynex | Observable"}] 33:[] 31:{"id":"ccc14c0ebb5d1a4f","slug":"svg-what-is-the-viewbox","title":"SVG: What is the SVG viewBox about?","thumbnail":"bb719be8900110aefd324ddfc8f8afa8ba13bec1f8565ea4f6aee580fa9691bf","access_level":"public","create_time":"$D2021-03-25T20:21:05.904Z","update_time":"$D2021-09-27T09:03:24.282Z","view_time":null,"first_public_time":"$D2021-04-14T09:56:37.900Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"2b2a8f4da11f74ac","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":"starter_2024","bio":"Analysing Stuff"},"version":1185,"publish_version":1185,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null,"bio":"Analysing Stuff"}],"members":[{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null,"role":"editor"}],"comments":[{"id":"efd4ad0c2fe1c8af","reply_to_id":null,"content":"'thnatureis' = 'nature'?\n\n'blow' = 'below'","create_time":"$D2021-09-27T01:37:29.346Z","update_time":"$D2021-09-27T01:38:31.703Z","resolved":true,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}},{"id":"13fa16bef8ca7fa9","reply_to_id":null,"content":"'understant' = 'understand'","create_time":"$D2021-09-27T01:40:29.600Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}},{"id":"7c1177deab10ad2d","reply_to_id":null,"content":"'kepp' = 'keep'","create_time":"$D2021-09-27T01:47:18.864Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}},{"id":"9a43fb0001b5cd2e","reply_to_id":null,"content":"'I used to or that' = 'I used to that'","create_time":"$D2021-09-27T01:51:02.730Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}},{"id":"cfdf5980e7d1a3d1","reply_to_id":"efd4ad0c2fe1c8af","content":"Thank you!","create_time":"$D2021-09-27T09:01:13.981Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null}},{"id":"4b8d7c17b64f2423","reply_to_id":"13fa16bef8ca7fa9","content":"Thank you!","create_time":"$D2021-09-27T09:01:26.310Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null}},{"id":"3b986ed8f9d13b0d","reply_to_id":"7c1177deab10ad2d","content":"Thank you for the feedback!","create_time":"$D2021-09-27T09:02:16.134Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null}},{"id":"6ce2db3e7af7bc93","reply_to_id":"9a43fb0001b5cd2e","content":"Thanks!","create_time":"$D2021-09-27T09:03:29.670Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"54a65dd7fa90a95a","login":"daynex","name":"Daynex","avatar_url":"https://avatars-next.observableusercontent.com/7d317fd1ff29fdf7da0ddc6cc72c266c42fea9f700ec359b385b1ce4f243acbd","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"43cf7ea77546babd","slug":"svg-tutorial","title":"Learn SVG","owner":{"id":"2b2a8f4da11f74ac","login":"daynex","name":"Daynex"}},"type":"notebook","body":{"titling":"auto","title":"SVG: What is the SVG viewBox about?","cells":[{"id":0,"value":"md`# SVG: What is the SVG viewBox about?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`When I started coding SVG's using D3.js or simply Vanilla JS I only used the width and height attributes as they felt most intutitve. At some point I got introduce to the concept of **a viewBox** and learned the benefits of using **viewBox** as well as how it differs from **height** and **width** and how they are used together.\n\n\nAfter going through this notebook you will understand the following:\n\n1. What is a viewBox? 🔍\n2. How is it different from height und width?\n3. When and how should a viewBox be used?\n\nAs always my notebooks are **fully of interactive** and use **visual examples** to make sure that you understand everything as good (and fast) as possible. **Let's go!**\n\n**💬 Comment** with your feedback and ideas.\n\n**❤️ Like** and **🔗 Share**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`## Background`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`\nSince this aims to be a intutitve guide we will use visual elements to help us understand the concept at hand.\n\n\nLet me start out by presenting to you **a pretty svg element**.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`\nOur element has a **width** and **height** of **100 units** and equally sized quadrants. Each quadrant is filled with a different color and has a letter A-D inside it assigned in a clockwise manner. **Beautiful!** \n\n_Note that in svg the units aren't pixels, cm or anything of that nature. It is simply a unit in svg, which can be scaled to anything._\n\nNow let us also look at the svg frame below, which is a simple frame with a brown border and a grid drawn on it. Each grid box is **25x25 units**. No matter how large we make this frame it will always be filled with the grid!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"html\n`\n

\n \n\n \n \n \n \n \n \n \n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"md`\nTo understand the viewBox we will place our colorful square in **svg** frames to help us understand the difference between the **width & height** attributes and the **viewBox**.\n\nLet's continue...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`\n## 🖼️ Width & Height\n\nLet us start with the simplest attributes: width and height. They make intutive sense but let us try to get a concrete understanding of how the attributes work. In the visualisation below we inserted the square into a svg frame which by default has double the width and double the height. We only use the **width** and **height** attributes and keep the viewBox undefined/empty!\n\nUse the sliders and see what happens to the svg frame (brown border) and the content inside.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`\n \n

\n\n \n \n\n \n \n \n \n \n \n \n\n ${square} \n\n\n \n\n \n

\n\n \n \n \n\n ${square} \n\n\n \n \n \n \n \n \n \n \n \n

\n\n \n \n \n\n ${square} \n\n\n \n \n \n \n \n \n \n\n \n