2f:T5f9,# Scalable Vector Graphics (SVG) Acknowledgments: Thanks to Carlos Scheidegger, Kevin Sun, Alexander Lex So far we have only seen textual content in HTML, and this is a data visualization course. SVG (“Scalable Vector Graphics”) is a subset of the HTML5 standard that will provide us with essentially all of our graphical needs. SVG is extremely powerful, broadly supported, and very easy to program for. It’s also the preferred target for D3, the javascript library we’ll use for our visualization design. Alternative methods for bringing dynamic graphics to your browser are [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) and [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which we unfortunately will not have enough time to look properly. ## Minimal Example An SVG drawing starts with an ``` ``` Source: [svg_minimal.html](${await FileAttachment("svg_minimal.html").url()}) If you run the example in tour browser the output will be a blank canvas, which is kind of boring, but you should be able to verify, using the Developer Tools, that there is in fact an SVG element there. In the remainder of this tutorial, you’ll learn how to add basic graphical shapes to the SVG element.30:T847,## Presentation Attributes As you might have noticed, some appearance aspects in SVG are controlled by attributes (position, size); others (color, weight) are controlled by [CSS properties](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). This is a perennial source of confusion, and unfortunately there’s no good way around it. To add to the confusion, a subset of SVG attributes can also be specified via CSS: these are the [“presentation attributes”.](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) The following code has the same effect as the one above, where we used the style tag: ```html ``` See output in your browser: [svg_circle_fill.html](${await FileAttachment("svg_circle_fill.html").url()}) It’s worth remembering this because CSS declarations for these attributes will override inline attribute definitions in the DOM. This is in turn inconsistent with the rule for the style attribute itself, which overrides CSS definitions (on behalf of whoever designed this standard: I am sorry). Finally,**SVG style attributes are not the same as HTML style attributes**. For example, to color a ``

``, we would use the ``background-color`` css attribute, but to color an SVG circle, we use the ```fill``` attribute. This inconsistency is propagated to things like the HTML ```title``` attribute, which doesn’t work in SVG, but instead you have to use a [title](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title) element: ```html

``` See output in your browser: [svg_title.html](${await FileAttachment("svg_title.html").url()}) (note: hover on figures to see text) 31:T811,## Path The SVG [path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) element is how you “escape” the basic SVG shapes. In case none of the predefined shapes are good enough for what you’re trying to achieve, you can draw any arbitrary shape you want using the path element. We will usually not use it manually, but it’s important that you know it exists, because it helps you understand how much of D3 works under the hood. The path element is made up of a micro language. Here are some commands: - M 10 10 **M**oves to the position without drawing a line. - L 50 10 Draws a **L**ine from the previous position to the position specified. - Z closes a path using a straight line to the first point. - C allows us to draw curves, specifically [cubic Bezier curves](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Cubic_B%C3%A9zier_Curve) (there are various other curves). ```html ``` See output in browser: [svg_path.html](${await FileAttachment("svg_path.html").url()}) The curve starts from the previous position and uses two support points (parameters) through which, in the case of the cubic bezier curve, it doesn’t go trough, and then terminates at the final point. Beyond this one simple example that does not do the path element justice, take a look at the [MDN path tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).32:Tcd9,## Grouping and Transforming [Grouping elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g) is a very powerful idea, and we will use it extensively when we get to use SVG for actual visualizations. It is powerful because it gives us abstraction, in the same way that a function groups a sequence of operations under a single name. In dynamic visualizations, this makes it possible for us to move a large number of elements by simply taking one branch of the DOM and placing it in a different subtree; without groups, we would have to remember over and over again which elements we cared about. Here’s an example where we use a group to inherit presentation attributes: ```html ``` See output in browser: [svg_group.html](${await FileAttachment("svg_group.html").url()}) In addition, SVG groups enable geometric transformations. Geometric transformations are amazingly useful when we want to change the positions of a large number of elements in the same way, or when we want to express the positions of the elements in a more convenient manner. For example, recall that SVG’s basic coordinate system increases the y coordinate in the downward direction. If we want to draw a scatterplot based on the example above, then we’d have to remember every time to subtract the y coordinate we want from the height of the SVG element. This is annoying and error-prone. Instead, we could encode that transformation directly, using SVG’s [transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) attribute: ```html ``` See output in browser: [svg_group2.html](${await FileAttachment("svg_group2.html").url()}) The transform attribute is read right-to-left, and it is saying: to get the outer y coordinate, multiply the inner y coordinate by -1 (as specified by the ```scale(1, -1)```), and then add 200 (as specified by ```translate(0, 200)```). In other words, outer_y = 200 - inner_y, which is precisely the flipping we need. Now the y coordinates behave as we would expect them in a scatterplot: increasing y means going up. There are also more [complex transformations for rotations or distortions](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform). The main problem with these transformations, is that they apply to everything: ```html ``` See output in browser: [svg_translate_text.html](${await FileAttachment("svg_translate_text.html").url()}) Something that we may not want to happen in every situation. 33:[{"id":"b3977e7a182e2f0e42f3b9f1769a8af52864d3b40d792303914a6e8b93a6261376270daa23bbf9a281bd5227b51a51f0cfc32e57a6d8e58e25774eadafa3e3b0","href":"https://static.observableusercontent.com/files/b3977e7a182e2f0e42f3b9f1769a8af52864d3b40d792303914a6e8b93a6261376270daa23bbf9a281bd5227b51a51f0cfc32e57a6d8e58e25774eadafa3e3b0","name":"svg_line.html","type":"text/html","lastModified":1641899251342.874,"size":251},{"id":"4eb809b4c3b478d3c95695f997e991dcc194891a94c2892ff57d64efc10be741bda9b26dbded8003fe514386c620ff81be9819e0c00f17bbd568c00c81a30d96","href":"https://static.observableusercontent.com/files/4eb809b4c3b478d3c95695f997e991dcc194891a94c2892ff57d64efc10be741bda9b26dbded8003fe514386c620ff81be9819e0c00f17bbd568c00c81a30d96","name":"svg_group.html","type":"text/html","lastModified":1641899920757.944,"size":245},{"id":"1dc2cd9b4f11fe8f2972ff3d6ce40b639634958b4fedac10ad74cb2f86483e1d936ce84d5efbcbb78e008d3762d45291476fbe7743ead823bd4485a2e8f60933","href":"https://static.observableusercontent.com/files/1dc2cd9b4f11fe8f2972ff3d6ce40b639634958b4fedac10ad74cb2f86483e1d936ce84d5efbcbb78e008d3762d45291476fbe7743ead823bd4485a2e8f60933","name":"svg_translate_text.html","type":"text/html","lastModified":1641900162697.175,"size":269},{"id":"b2c65d78e97098c1f39ba8ad6256e106a51e402fe849ef5558505cb612cf7a8883314133935a452b67c4c6c5efb4efc003f051f81eef08af21a870a54f915014","href":"https://static.observableusercontent.com/files/b2c65d78e97098c1f39ba8ad6256e106a51e402fe849ef5558505cb612cf7a8883314133935a452b67c4c6c5efb4efc003f051f81eef08af21a870a54f915014","name":"svg_group2.html","type":"text/html","lastModified":1641900023648.112,"size":291},{"id":"fdc417f4815d8e1de4e64ea04c7d50bc0093e6ba86b66861d961a0e3ed2df217ddfee255d09087e1d1f0e452229d2769f752c0eb07dad275cc19d4ad592163df","href":"https://static.observableusercontent.com/files/fdc417f4815d8e1de4e64ea04c7d50bc0093e6ba86b66861d961a0e3ed2df217ddfee255d09087e1d1f0e452229d2769f752c0eb07dad275cc19d4ad592163df","name":"svg_order.html","type":"text/html","lastModified":1641899835192.073,"size":439},{"id":"86b9be6c4b33bd7df6742e8593fa2051faf9439e6109c1dad2d73e1f4e8508368e8be50d8862be4fc6631adbc8ff9efdcd916d04bb33166aca96a70d4bc72a36","href":"https://static.observableusercontent.com/files/86b9be6c4b33bd7df6742e8593fa2051faf9439e6109c1dad2d73e1f4e8508368e8be50d8862be4fc6631adbc8ff9efdcd916d04bb33166aca96a70d4bc72a36","name":"svg_path.html","type":"text/html","lastModified":1641899634453.475,"size":673},{"id":"03822ed184338a6a3c55f1c67c990a0d2afb878186542f5bacc6c28a07e4b39cb54e9de160424382476083cfd6d0680d1d00b50c0d76f35428ad49281d6438a7","href":"https://static.observableusercontent.com/files/03822ed184338a6a3c55f1c67c990a0d2afb878186542f5bacc6c28a07e4b39cb54e9de160424382476083cfd6d0680d1d00b50c0d76f35428ad49281d6438a7","name":"svg_text.html","type":"text/html","lastModified":1641899342587.818,"size":124},{"id":"91d64e60e7595133001ff2ef525a717fbfcf94ac3d9d652e4e0766278de07281fed5fd8dfac4ca93fa778e9cf4b62eda1fa262523c5144b2f9d399e4bf33b2d6","href":"https://static.observableusercontent.com/files/91d64e60e7595133001ff2ef525a717fbfcf94ac3d9d652e4e0766278de07281fed5fd8dfac4ca93fa778e9cf4b62eda1fa262523c5144b2f9d399e4bf33b2d6","name":"svg_rect.html","type":"text/html","lastModified":1641899162281.815,"size":152},{"id":"1dda45cb0d344fa3be5780332003cfcf7b3cfa232f2398e27b7a76cb5f7470b806b22b512b8d8d1cfb0a436bd00d6b3daff32107e2e19a89e79541eae6545e5d","href":"https://static.observableusercontent.com/files/1dda45cb0d344fa3be5780332003cfcf7b3cfa232f2398e27b7a76cb5f7470b806b22b512b8d8d1cfb0a436bd00d6b3daff32107e2e19a89e79541eae6545e5d","name":"svg_ellipse.html","type":"text/html","lastModified":1641899081311.127,"size":154},{"id":"e0e7d9d087a567cece4425fad773adc9123846a5a65ef2a4f24574b39b5d41d78c30edc5b258d8f4526da1e860ad1be8e7069005ff07db72683283daac5e3739","href":"https://static.observableusercontent.com/files/e0e7d9d087a567cece4425fad773adc9123846a5a65ef2a4f24574b39b5d41d78c30edc5b258d8f4526da1e860ad1be8e7069005ff07db72683283daac5e3739","name":"svg_title.html","type":"text/html","lastModified":1641898733834.985,"size":351},{"id":"db2eeb87cb98713882e7d1169f621c1d23dbfe09f1a6f4212dedcbd6b5bb6c07dc42643335dde5b87f55cfd9da5e5c6fc00a37e125226fa90dd2d5902508d8c1","href":"https://static.observableusercontent.com/files/db2eeb87cb98713882e7d1169f621c1d23dbfe09f1a6f4212dedcbd6b5bb6c07dc42643335dde5b87f55cfd9da5e5c6fc00a37e125226fa90dd2d5902508d8c1","name":"svg_circle_fill.html","type":"text/html","lastModified":1641898539750.757,"size":126},{"id":"99e40b758fb67db4600c920991d6c0910f4d1ffb9d959e0809a03a976ccc253a69907dfd915a71c276c81e22c22d390d0f0843b04318ce48ee123c44308aa610","href":"https://static.observableusercontent.com/files/99e40b758fb67db4600c920991d6c0910f4d1ffb9d959e0809a03a976ccc253a69907dfd915a71c276c81e22c22d390d0f0843b04318ce48ee123c44308aa610","name":"svg_coordinates.html","type":"text/html","lastModified":1641898391469.442,"size":145},{"id":"c780aaed3941ac442a6ce6809b4194c5d4c3c3e7ed591a1cb1d492d584753f22d7f3770cff582eaff0668debfe95fc7d45b3280edcc2bcb17f2b39aa57c3b929","href":"https://static.observableusercontent.com/files/c780aaed3941ac442a6ce6809b4194c5d4c3c3e7ed591a1cb1d492d584753f22d7f3770cff582eaff0668debfe95fc7d45b3280edcc2bcb17f2b39aa57c3b929","name":"svg_circle.html","type":"text/html","lastModified":1641898215027.319,"size":136},{"id":"c2d5dfc7ecd50b8a89792d5fb06ae635f995a7cc12e7406775f640fa570927fb944ef3ea3b44211f5fe4a10e2e0ef96db225c122794e7ab09a9edba9ea580fbe","href":"https://static.observableusercontent.com/files/c2d5dfc7ecd50b8a89792d5fb06ae635f995a7cc12e7406775f640fa570927fb944ef3ea3b44211f5fe4a10e2e0ef96db225c122794e7ab09a9edba9ea580fbe","name":"svg_minimal.html","type":"text/html","lastModified":1641897950530.698,"size":155}] 2d:{"title":"Scalable Vector Graphics (SVG)","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"## Circle\n[Circles](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle) have an x (cx) and a y (cy) position specifying the center point, in addition to a radius (r).\n\nI will omit the HTML boilerplate going forward, unless there are reasons to include it. Note though, that valid HTML always needs to include it.\n```html\n\n\n```\n\nSee output in your browser:\n[svg_circle.html](${await FileAttachment(\"svg_circle.html\").url()})\n","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"## Coordinate System\n\nThe [SVG Coordinate system](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions) originates from the top-left (this is common to many graphics reference systems).\n```html\n\n\n```\nSee output in your browser:\n[svg_coordinates.html](${await FileAttachment(\"svg_coordinates.html\").url()})\n\nNote: SVG dimensions are given in “user units”, which by default match to pixels. How the user units match to pixels can be changed, as the name “scalable” implies.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"## Ellipse\n\nAn [Ellipse](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse) is specified by position, a radius in x and a radius in y:\n```html\n\n```\nSee output in browser:\n[svg_ellipse.html](${await FileAttachment(\"svg_ellipse.html\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"## Rectangle\n[Rectangles](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect) are specified with x, y, width, and height.\n```html\n\n```\nSee output in browser:\n[svg_rect.html](${await FileAttachment(\"svg_rect.html\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"## Lines\n[Lines](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line) are specified using two points, (x1, y1), (x2, y2).\n```html\n\n \n\n\n```\nSee output in browser:\n[svg_line.html](${await FileAttachment(\"svg_line.html\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"## Text\nYou can also specify [text](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text) in SVG:\n```html\n\n```\nSee output in browser:\n[svg_text.html](${await FileAttachment(\"svg_text.html\").url()})\n","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"## Ordering\nThe order in which elements are drawn is the order in which they appear (very important to remember!):\n```html\n\n```\nSee output in browser:\n[svg_order.html](${await FileAttachment(\"svg_order.html\").url()})\n","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"## Suggested Exercise\nTry out the exercise described in [this JSBin](https://jsbin.com/rudakit/edit?html,output).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}