This lesson covers how to create various SVG elements, the foundation of D3.js. In it, we will discuss:
This lesson covers how to create various SVG elements, the foundation of D3.js. In it we will cover the following topics
1. Base tags
1. Basic Elements
@ -8,10 +8,9 @@ This lesson covers how to create various SVG elements, the foundation of D3.js.
1. Styling
1. Important SVG elements
## Base tag
All svg elements go inside an `<svg></svg>` tag. Let's set this up:
When viewing SVG graphics in a browser, it's important to embed and `<svg>` tag inside a basic HTML page. Let's create an `index.html` file and add the following to it:
```html
<!DOCTYPE html>
@ -24,7 +23,7 @@ All svg elements go inside an `<svg></svg>` tag. Let's set this up:
</html>
```
If we inspect this in our browser's dev tools, we'll see this:
Now start a web browser and open that file (usually File->Open File). For this book, it is recommended the reader use Google Chrome, but in development and production any browser will do. If we inspect our HTML in the Elements tab of Chrome's dev tools (View->Developer->Developer Tools), we'll see the following:
@ -39,7 +38,7 @@ We can draw elements in our `<svg>` element by adding a variety of predefined ta
</head>
<body>
<svg>
<circle><circle>
<circle></circle>
</svg>
</body>
</html>
@ -47,28 +46,27 @@ We can draw elements in our `<svg>` element by adding a variety of predefined ta
Note that we can't see the circle because it doesn't have a radius:
We'll talk about this more later, but for now, if we want to see the circle, we can add a special attribute that all `<circle>` elements take:
```html
<circler=50><circle>
<circler=50></circle>
```
This tells the browser to give the circle a radius of 50px:
At the moment though, we only see the bottom right quarter of the `<circle>`. This is because the center of the `<circle>` is being drawn at the very upper left corner of the `<svg>`, and the rest of it is being clipped outside the `<svg>`. We can change this by changing the position of the circle, which we'll do next.
## Positioning an Element
- The `<svg>` tag is an inline element, like an image (as opposed to a block element like a `<div>`)
- Elements within the `<svg>` are positioned similar to photoshop, with a set of coordinates which follow the form (x,y). This is different from HTML, where elements are laid out relative to each other
- e.g. for (10,15), x=10 and y=15
- the point (0,0) is the top left of the `<svg>` element
The `<svg>` tag is an inline element, like an image (as opposed to a block element like a `<div>`). Elements within the `<svg>` are positioned similar to photoshop, with a set of coordinates which follow the form `(x,y)`. An example of this could be `(10,15)` which translates to `x=10` and `y=15`. This is different from HTML, where elements are laid out relative to each other. Some important things to keep in mind:
- the point `(0,0)` is the top left of the `<svg>` element
- as y values increase, the point moves vertically down the `<svg>` element
- don't confuse this with a typical coordinate system that has 0,0 at the **bottom** left with a point moving up as y increases in value
- don't confuse this with a typical coordinate system that has `(0,0)` at the **bottom** left with a point moving up as y increases in value
Note that the stroke in the image above is getting clipped. That's because the stroke is create outside the element. If we wanted to see the full stroke, we can resize the circle:
