JavaScript and Scalable Vector Graphics in Svelte

[00:00 - 00:11] So, every chart that we make in this course is going to leverage two technologies that are worth familiarizing yourself with. The first is Sveld, which we've already talked at length about, but the second is SVG.

[00:12 - 00:22] So in particular, we're going to learn how to use Sveld, which we've already talked about, to create SVG, which we're going to talk about. And in order to know what that means, let's talk about SVG and what it is.

[00:23 - 00:29] So SVG stands for Scalable Vector Graphics. And interestingly, it's actually an image format.

[00:30 - 00:42] So image.svg could be a file that you would embed in your web page, just like any other common image format, like image JPG or PNG. But the difference is that SVG is composed of code.

[00:43 - 00:55] It's composed using XML markup, which is essentially HTML-like syntax. And so we can create SVG images using code, whereas you can't do that with a PNG or a JPEG.

[00:56 - 01:03] So that means we have abundant control over the way that these images are designed. And we can tweak images just by changing the markup.

[01:04 - 01:11] So here's a super high level, very basic example of what an SVG image could look like. Obviously, this is not very pretty.

[01:12 - 01:16] It's not going to win any image awards, OK? But let's illustrate kind of what's happening here.

[01:17 - 01:30] We open and close an SVG tag, and the same way we would open and close a div tag or a container tag in HTML. Then inside, we write these presentational attributes, or these elements, like rect and circle.

[01:31 - 01:43] And each of those elements has a series of attributes that define their appearance. So this rectangle has a width of 100, a height of 100, an X and a Y of 0, and a fill of plum, which is exactly what you see here.

[01:44 - 01:55] We see a circle that starts at the 10, 10 position and has a radius of 10, because the fill is omitted, it defaults to black. So here's a really good example of how SVG is working.

[01:56 - 02:06] Within the wrapper tag, we have each of these elements, and each of these elements have attributes. And that's what defines the visible appearance of the SVG output.

[02:07 - 02:14] So we could change the width and height of the SVG, the rectangle of the circle , add other elements, like path elements. But this is how we create charts.

[02:15 - 02:29] And already, you can kind of start to see these graphical primitives, these elements, like circles, could be used to create things like scatter plots, for example. So SVG's are also scalable, meaning they look good at all resolutions and all scales.

[02:30 - 02:37] So whereas if you zoom into a PNG, it'll look blurry, this is pixel perfect on any screen size. Second, they're interactive in nature.

[02:38 - 02:49] So individual SVG elements can be animated via CSS, and they can have their own hover or click listeners just like HTML elements, which obviously you can't do with a PNG. And third, they're accessible.

[02:50 - 02:59] They're more accessible to screen readers and other approaches because they're embedded in the document flow. So you're not required to use SVG in visualizations on the web.

[03:00 - 03:09] You could use Canvas or a few other output formats. But this is going to be what we're using in the course for the reasons we've already listed above.

[03:10 - 03:15] So here's a really simple SVG chart to really bring this home. So this example, this is a scatter plot.

[03:16 - 03:21] And within the SVG, we see five circles rendered. You'll notice that the CX of each is increasing by 10.

[03:22 - 03:24] The CY is increasing by 10. The radius is always 10.

[03:25 - 03:33] The fill is always plug. And so this is an example of if you render these five circles in order, it would look like an ascending scatter plot.

[03:34 - 03:45] But writing SVG charts this way would be painful because it's repetitive and it would be untenable for charts more with more than a dozen data points, right? You're not going to copy and paste this 200 times.

[03:46 - 04:01] It would also not be responsive because we're hard coding the X and Y positions . So that's why we use Svelte to basically bring in and integrate our data into SVG outputs in a way that's dynamic and responsive and intuitive.

[04:02 - 04:07] So this is another example of kind of how a Svelte file might work. And you might recognize the old example.

[04:08 - 04:12] This is pretty similar. But we can write our markup directly in Svelte.

[04:13 - 04:27] So we can write SVG elements like above, but rather than writing out these attributes one by one and copying and pasting all these circle elements, we can do so within S velte. We can append data in line to make declarative visualizations.

[04:28 - 04:50] So here, for example, we're going to talk about how this works in a future lesson, but in the script tag, we're creating a new array of items, one, two, three, four, and five. And our SVG output, we're then looping through them using this each block and making the CX equal to D times 10, the CY equal to D times 10, the radius of 10 in the fill of plum.

[04:51 - 05:01] So the interesting thing is, right, this is equivalent to this in its output. But as you can see, its input is a lot more powerful, allows for more elements and is a lot more robust.

[05:02 - 05:23] So if we had 500 data points instead of five, this would obviously be the preferred approach. So we've already talked about how SVG is the best output format for our purposes, but writing SVG itself would be a pain, which is why Svelte is a perfect complement , because it's the easiest way to input what produces the required output.

[05:24 - 05:38] So the takeaway from this lesson, something to remember throughout the course, is that we're going to be using Svelte to bind data to SVG elements. Our final charts will just be SVG representations, but we'll use Svelte to set the attributes of those elements.