An Overview of Available Libraries

So – now we’ve set our hearts on using a library: where next, I hear you ask?

This list represents just a handful of some of the options available when using SVG. I would recommend spending time researching options online when it comes to choosing a library; the first one that comes up should not be the final solution, unless it turns out to be the closest fit for a project.

There are plenty of options available – to tempt you as a starter, we’re going to create some examples over the next few pages, to show you what is available, and how they operate when working with SVG. Our first example is a simple but intriguing library – how often have you seen images being drawn onscreen in real time, as if someone were drawing them in front of you?

Understanding How It Works

At first glance, you might be forgiven for thinking that this effect requires special magic; after all, we didn’t add any code when dropping our SVG image on the Vivus Instant site, so how does it all work?

Well, it relies on one simple principle – our shape must have a stroke (which can be dashed or solid) or border that we can animate. We’ve already met (and used) this attribute in earlier demos, but the trick here is not what we use, but how we use it. Let me explain:

If we take a close look at the screenshot shown in Figure 9-2, we can see the presence of stroke and fill attributes.

These will, of course, not be present in standard text, so we added them in the conversion script; Vivus makes use of the stroke attribute to draw the required shape. The animation that creates this drawing effect is automatically added by Vivus Instant, as indicated in Figure 9-3.

The beauty about this is that we can easily extract this code and store it in a separate style sheet – although it may look a little odd, this is just how Vivus adds it; it is a standard keyframe-based animation. It’s up to us to decide whether we want to keep it inline (for instances such as creating company logos), or export it to a separate style sheet.

If you look carefully at the code in convert.js, you will see that we’ve used an .otf format font. We can use standard TTF fonts, but these produce a lot more SVG code; it’s worth converting it to OTF format! We can do it very quickly online, using the conversion facility at https://everythingfonts.com/ttf-to-otf .

Okay – let’s change tack: it’s time to revisit creating chart types. Remember how we looked at building standard pie or bar charts back in Chapter 8, “Creating Charts”? Well, they were just a few types of charts that we can building using SVG; there are plenty more that we can create – how about creating something different, using bubbles?

Exploring Our Demo in Detail

For a simple demo, it sure looks like we’ve produced a lot of code! So how does it all work, to give us our bubble chart?

Well, we start with creating a JSON object that stores details of our data – this contains values for the car make and the number. We then assign a handful of variables, before using D3 to define our SVG container and apply it to the #chart element.

Next up, we use the D3 hierarchy to turn the values defined under json into nodes that we can insert into our bubble chart. As part of this, we use a transform method to move each circle into the right position. These circles are then appended using node.append, before being filled with a color from the D3 color scheme defined at line 13.

We then added text labels to each circle to identify which circle equates to which value. For each of these, we apply standard font attributes such as text-anchor, font-size and dy, to center each label in white to its appropriate circle. The last stage is to use the D3 legend plug-in to create our chart’s legend, and affix this to the page, with appropriate text labels as a key for our bubble chart.

Improving Our Design

Thinking further afield though, our design lacks impact – its simplicity actually makes it look like it punches with the weight of a featherweight boxer, whereas we want it to deliver more of a knockout blow!

There are several ways to do this, but two that come to mind are: add a little animation on displaying each bubble, and apply SVG filters to each of the bubbles in our chart. Yes, it seems ironic, but we can use SVG to enhance SVG!

To get a flavor for how we would add in the SVG filter, look for the bubble – with dropshadow.js file in the code. If you update the bubble.js link in the original demo to point to this file, you can see the effect in action.

Time for a change methinks – and to chart a new direction (oops, sorry!) We’ve only scratched the surface with regard to charting; for me, it’s all about trying different things, to see what works best for your needs.

Talking of trying things out – I love trying different effects; after all, one doesn’t learn if one doesn’t try, right? A great effect that I’ve discovered is Anime.js – this library provides a hand-drawn animation, which works beautifully with SVG images. To see what I mean, let’s dive in and take a look.

Dissecting Our Demo

There is something to be said for relaxing after a long day coding, in front of a log fire, with a nice glass of red wine – it sure takes a lot of beating! It’s perhaps no wonder that I would choose to animate an SVG centered on my favorite alcoholic beverage; it doesn’t matter though what the image looks like, as the same principles we used in the last two exercises can be applied to any SVG image.

The keen-eyed among you will likely spot that we're revisiting an effect we touched on in the Vivus demo – I suspect you might be (rightly) asking the reason for this, and there is a good one:

Although we're using the same effect in both cases, the tools we've used are different – Vivus is designed for animating SVGs, whereas anime.js is a JavaScript animation engine that can be used to animate all kinds of elements, including but not limited to SVGs. This is a perfect way to show just how different libraries can achieve the same effect, and that it is incumbent on us to choose the most appropriate one for our needs.

In both cases, the libraries depend on one property being present, as a minimum: stroke. Put simply, this can be seen as the SVG equivalent of border: 1px solid XXXXXXX (where XXXXXX is our chosen color). We can of course also add a stroke-width value to specify the thickness of our "border," or a stroke-dasharray to give our border a dashed effect, although these are not obligatory for the effect to work.

In the first part of this mega-exercise, we prepared our content – the first step was to optimize the image (which should become de facto when working with SVG), before exporting some inline styles to a separate window in Codepen. In the second part, we then dropped in four configuration objects, one each to represent the four classes that we've applied to the various paths specified in our code. We then finished off by adding in suitably colored stroke properties for each of the paths specified in our code, which were used by the Anime library to create the final solution.

Okay – let’s change tack and move on: Remember from earlier in the book, where we created some interesting effects using SVG filters? Well, for our next demo, we’re going to continue that theme, but take a different look at how we create our filters…this time using JavaScript!

Exploring the Code in More Detail

Although our code at first glance appears to be very simple, it hides a lot of the grunt work required to configure an SVG filter . To see what I mean, take a look at the code from our demo using a DOM inspector, and you will see something akin to the extract shown in Figure 9-6.

All of that markup was added from one line of code in our demo! It’s easy to see why using a library such as SVG.js is useful; we can concentrate on using the core effects such as Gaussian blur to re-create the effect that we need, without worrying about the markup. If you remember back as far as Chapter 5, “Applying Filter Effects,” we had to create the SVG filter manually; this way, we can focus on creating the effect, then copy and paste the resulting markup into our code (and remove the plug-in) once we’ve achieved the desired effect.

The code we’ve used is very simple – we start with defining a new SVG object to the draw variable; this is used to create the SVG container we saw in Figure 9-6. Next up, we then draw our chosen image (in this case, the background image from the Unsplash library), in our SVG container, setting it at a size of 500px square. We then finish by applying a filter effect of GaussianBlur , using a (stdDeviation) value of 3.

…if we wanted to dynamically change our filter effect at the point of triggering an event such as clicking a button or hovering over an image.

Thinking further afield though – SVG.js’ filter plug-in is perfect for creating some more advanced filter effects; one that comes to mind is the backdrop filter. It’s a great effect for removing some of the distraction if you have text overlaid on a busy image, for example – you can see it in use in a Codepen example I’ve created at https://codepen.io/alexlibby/pen/BxwzQb .

A word of warning – support for this filter is patchy with only Edge and Safari supporting it without requiring some form of flag to be enabled. Chrome will support it if the Experimental Web Platform features setting is enabled; Firefox doesn’t support it at present, but this is likely to change. It’s a good reason why SVG filters can be used to create this effect – the developer Vincent de Oliveira has created an example at https://codepen.io/iamvdo/pen/VLOGdw , which I think could be achieved using SVG.js!

If you want to really experiment with filters, then try installing the CSS filters console tool extension for Chrome: it’s available from https://github.com/spite/css-filters-devtools-extension and allows us to tweak filter settings directly in the browser.