7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 SVG Basics

Since SVG is the core of vector-based visualization in HTML, it's important to know how to use it. I'll teach you how in this lesson.

2.2 SVG Basics

Hi, and welcome back to learn data visualization with D3.js. This lesson is going to be all about SVGs. While D3 is agnostic to how you use the data transformation it provides, SVG is used almost all the time due to its graphic abilities. SVG stands for Scalable Vector Graphics, and it's a descriptive language much like HTML and XML, to create images from changeable text. Actually it is based on XML. The base of every SVG graphics, is the canvas that you can draw on. Although it is scalable, it makes sense to define a few blocks that outlines the drawing area. This gives you a usable value range independent of the actual size of the element. SVG is all about shapes and paths. They define the elements you can draw on the canvas. It has support for a lot of basic shapes like circle, rect, ellipse or text but you can also define a free form polygon if you need the flexibility. And those polygons are really powerful. You can not only draw multi-point shapes with straight lines, but you have a wide variety of curve tools. SVG supports cubic and quadratic Bezier curves. Cubic curves are the ones you normally know from vector drawing software. You probably have used them a dozen times. Cubic Beziers, are curves defined by a handle on each of the two points, two curves maps between. This means you have to specify four points, two for the start and end points, and two for their respective handles. Quadratic curves are actually simpler to define. They only need three points. The two end-points, and one control point in between that drags the curve. If you know a little bit about computer graphics, you might also know about fill rules already. Fill rules define which area belongs to a polygon, and which doesn't. Or simply said, which areas should be filled and which should be hollow. This might be simple enough for a rectangle, but for more complex parts, where parts overlap each other, it isn't that simple. Let's take a star for example. You can define it with just five points. Where every line crosses along the middle. It might be clear for us, but the path should be filled, but it might not be for a computer program. Let's look at another example. This shape is defined by two rectangles here we don't want to have the area in the center as part of the shape. So now it's time for fill rules. There are two of them that are supported by SVG. Nonzero and evenodd. Let's talk about the latter one first as its concept is simpler. You take a point in an area, and draw a line to the outside of the shape. Then you count how many lines you cross. If it's even, the area is not part of the shape. If it's odd, then it is. Having it this way makes sense as the outside area always crosses serial lines. Let's look at our two example shapes. In the case of the Rectangular disc, we count +1 for the ring part, and +2 for the whole part. This removes the whole from the shape, resulting in the desired outcome. For the star however, it isn't what we were looking for. Despite some part of the shape, part of pentagon in the middle always crosses two lines. But for this we have the Non-Zero rule. It's more complex because it takes into account the direction of the line. Every time you cross a line that runs from left to right or clock wise, you add 1. But if it runs from right to left, you subtract 1 from your counter. If the result is zero, then the area is not part of the shape, otherwise it is. Let's look at the Star. The way it's drawn, the two lines will always run in the same direction making the count always either plus or minus 2. For the disc the rectangles are also drawn in the same direction every time. So the whole is also part of the area. If one of them was reversed, it would be. Okay enough about shapes. One important thing for the SVG elements is, that you can style them using CSS, or attributes. This includes transformations. To simplify this procedure, there is the g element, that represents a container or group. An attribute or a transformation of a container is inherited by its children as well. So you can for example rotate the group of elements at once. Respecting their relative position to each other. When it comes to more complex graphics, there can be a complex hierarchy of groupings, which can make it difficult to find out where an attribute is applied. The final element I want to tackle in this lesson is the text element. It can be used like any other SVG element to move and transform it. You can also use the same font families you would have access to, when using regular HTML and CSS. Additionally, to format on the parts of the text, for instance, to emphasize a word, there is a T span element, that looks like the span tag in HTML. It can be styled individually, but also inherit the properties of its parent text element. And lastly, you can also put text on a path by using the textPath element as a child of text. It needs an H ref attribute that plants to the ID of a previously defined path element. So, that's all I have on SVG for you in this lesson. Here's a quick recap of the things you learned. SVG is an XML language to draw scalable vector graphics. It defines basic elements like circle, rect or text but you can also use polygon for free-form shapes. You can also define round edges using cubic and quadratic Bezier curves. To apply attributes or transformation to a group of notes, you can use the g element as a wrapper. The text element is used to run the text. This plan can be used to change parts of the text and text path, can put text on a curve. In the next lesson, we are going to talk about different ways of adding data to D3. See you there.

Back to the top