25:["$","title",null,{"children":"SVG | jpt | Observable"}] 4a:T47b,# SVG **This notebook has been superceded by ** ## What is SVG? SVG (Scalable Vector Graphics) is a markup-based language similar to HTML, but for laying out images. A simple SVG might look like: ```html ``` SVG is unitless, whereas in HTML and CSS we have to specify units like "300px" or "20em", SVG uses a unitless system so that it can be scaled to any size. Units should be thought of as relative, if your graphic is 100x100, you know that the center point is at (50, 50). The decision on how these virtual units convert to real-world units is made when you embed on an HTML page, in a PDF document, print, etc. ### Coordinate System As mentioned previously, computer graphics uses a top-left origin system by default. The top left corner of an SVG is (0, 0) by default. **MDN Resources**: - [Introduction to SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction)4b:T43f,4c:[] 29:{"id":"1abcedf11a35c1ae","slug":"svg","title":"SVG","thumbnail":"316176e95dd1538f39942e511738aebf4477574a32dadc99198839d0734d79fa","access_level":"public","create_time":"$D2024-10-28T18:06:23.722Z","update_time":"$D2026-10-29T19:22:52.662Z","view_time":null,"first_public_time":"$D2024-10-29T04:23:33.467Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e1d9f35bdac07876","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/72e10a43bda276292c5d748244cf7dc1d3cfb1d188ff32d52f1c5c3e0b5b5522","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":459,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c412710920b89269","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/6925780e31ef84d65818e305f228f86a2b41ebdb465d7382027da54ab8d87fb8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c412710920b89269","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/6925780e31ef84d65818e305f228f86a2b41ebdb465d7382027da54ab8d87fb8","tier":null,"role":"editor"},{"type":"team","id":"e1d9f35bdac07876","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/72e10a43bda276292c5d748244cf7dc1d3cfb1d188ff32d52f1c5c3e0b5b5522","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c5297cfb013b1030","slug":"web-collection","title":"Web Collection","owner":{"id":"e1d9f35bdac07876","login":"jpt","name":"jpt"}},"type":"notebook","body":{"titling":"auto","title":"SVG","cells":[{"id":0,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"### viewBox\n\nOn the root **svg** element, **width** and **height** control how the image appear in the context of the HTML page (if embedded directly).\n\n**viewBox** controls the interior coordinate system. \nIt takes four parameters separated by spaces: \"minX minY width height\".\n\n**MDN Resources**:\n- [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)\n- [width & height](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"## Basic SVG Elements\n\n### Common Attributes\n\n- `fill` - interior color of drawn shape/path\n- `stroke` - exterior color of drawn shape/path\n\nNot required attributes, but we'll use them in upcoming examples. (Can also be set via CSS styles.)\n\nSVG defines tags for common shapes, each with a few required attributes.\n\n### Circle\n\n- `cx` & `cy` - used to define center of circle\n- `r` - radius","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"### Rect\n\nRequired parameters:\n\n- `width`\n- `height`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"### Line\n\nRequired parameters: `x1`, `x2`, `y1`, `y2`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"p","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"### Polyline & Polygon\n\nTake list of `points`. Difference is that polygon is closed loop & polyline is a continuous line.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"### Text\n\nThe text element has a lot of additional properties, and uses innerText between the tags to set the actual content:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"$4b","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"### Path\n\nFinally, `` is the most flexible SVG shape. We won't go into defining our own paths by hand, as you will usually use either a tool (like Inkscape) or a library (like d3) to lay out paths. They use a custom format to define specific movements, straight lines and curves.\n\n**Resources**\n- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"\n## Grouping and Transforms\n\nWe often have related objects that we want to keep together logically, and we can use \n`` to create groups, and then apply **transforms** to these groups.\n\n**MDN Resources**:\n- [SVG `` Element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g)\n- [SVG Transformation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Transforms)\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null