SVG in JS and how to make a fun page

Performance is very important when building a webpage, now that I have learned about fetch request from your own backend or any API, most of the time, there will be a wait time.

User attention span is short, about 2 seconds until drop off. But even with the best performance, if your webpage is not appealing, people will leave immediately or never come back.

Building a webpage means that you are offering some information to a user, not all the pages have the same purpose, but all of them have a user, no matter what your app is about, you always have to think about how the user will feel when accessing to your app.

The easy way is to start thinking about how people will go from point A to point B(from start to end), you don’t want to build a labyrinth, even if your product is complex, at least make it fun.

Some questions that you have to answer are: Is easy enough? It is clear where you have to go? where you have to click? how does the app work? how can you make the user experience memorable?

Personality

It is important to declare the personality of your app, it is a good thing to have a simple explanation video on how to use or surf your app, or a little animation or interaction with the logo or your mascot.

Also, the timing is key, nobody likes that as soon you open a page a pop-up box appears asking for your information, to sign up, or to buy them a coffee, right? that is not a good UX.

Even before starting to code, it's important to follow a pattern, the MVC (model view controller) pattern is a good habit, that most companies use.

Make a diagram and define what is changing, what is moving, and what is staying, then you start building your Models, having an idea about how the View will be, and finally how to connect everything with the controllers.

Now lets talk about how to make it fun.

LOADING

A simple loading image makes people understand that something is going to happen next. Semantic UI can offer you a good variety of loaders, here are some of them.

But custom loading experience is best received by the user, people are willing to wait twice as long for a custom experience, people like new things!!

Gifs might look like a good option but they are heavy in weight, HTML5 canvas is also another option but the content of the canvas are not part of the DOM and thus not accessible by screen readers. You would need a secondary content between the opening and closing <canvas> tags to serve as a fallback and, an accessible content, and more[…] basically, you will need the double amount of maintenance. with SVG, get semantics and accessibility as well as interactivity with Javascript out of the box.

SVG

Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Basically, vectors are made of math, which does not have pixels, that why is scalable and it will never get blurry.

you can create your SVG directly in your code:

you also can import it inside an image tag :

and you can give it animation with CSS, via the className:

but wait, how is the SVG code of a more advanced one? let's take a look:

For better understanding, first, we can define viewport, view box and path.

Viewport

The viewport is the visible section of an SVG. While an SVG can be as wide or as high as we wish, only a certain section of this image can be visible at a time.

The viewport is set through height and width attributes within the <svg>.

In the example, the SVG width and height are 350px, and in order to see it let's give it a border color with CSS.

And finally, we are able to see what is the viewport.

We can move our circle and rectangle inside the Vierport, changing the cx and cy in the circle and the rx and ry in the rectangle.

But if the viewport is smaller, decreasing the width and height, the circle will be there but we were not able to see it.

Like here.

In general, you should assign the width and height with CSS and just assign a className to the SVG <svg className=”example”>.

Viewbox

The viewBox provides us with very powerful capabilities. It allows us to specify that a given set of graphics stretch to fit a particular container element. These values include four numbers separated by commas or spaces: min-x, min-y, width, and height that should generally be set to the bounds of the viewport.

The min values represent from what point within the image the viewBox should start, while the width and height establish the size of the box.

The viewport is the viewable area, how big is my viewable area, the viewbox controls what is inside of that viewable area.

Path

A path represents the outline of a shape that can be filled or stroked. A path can also be used as a clipping path, to describe animation or position text. A path can be used for more than one of these functions at the same time. Here is a web to play around with path and an interesting youtube video with an example.

The path uses the x and y coordinates, you set a starting point with M, e.g (M10 20), which means 10 in the x coordinates and 20 in the y coordinates.

The main thing to understand is that the path can use absolute and relative directions, absolute use a capital letter, V for vertical, H for horizontal L for line and so, and relative path use lowercase letters. Relative makes it easy to move the whole thing because just the initial point is absolute and the rest follow the starting point.

These two arrows are exactly the same size but the code is different.

If I want to move the first one, I need to change the absolute path of all of them, in the below arrow I just need to change the starting point M50 and I can move the whole arrow at once, and not just a point.

And now like a bonus if you have a pic or a logo from somewhere else and you want to transform to SVG, you can do it through several programs like adobe Illustrator, but if like me, right now you are not willing to pay, because let's be honest Illustrator is expensive, then Inkscape is a really good option for start practicing.

Once downloaded and with your image loaded in the menu at the top, go to path, then tracebit map, inside the choose multiple scans, check colors, check smooth, stack and remove background.

Click update to see that everything is looking as you want, and then hit ok.

Finally, save it and by default, it would save as SVG, and then voila, you have your first SVG.

In your VScode just drag it, import it in your component or container JS, and put it inside your image tag.

And that is it.

Make it bigger or smaller without any blurry issue.

Now that you can build or import your SVGs try to build a custom loading image or a logo and give it some animation and insert it in your code, like so.