How to Code Images in React with SVG

Hello everyone! My name is Hunor and today I'm going to talk about how to code images in React with SVGs. And if you're wondering why we decode an image, then here's a couple examples.

SVGs become very powerful once you start combining them with JavaScript. In this example, we are joining this watch face with SVG elements and then we are turning the hands of the watch into position with JavaScript. You can also create animations or generate an infographic or a chart. In this case, we are joining this animation with a React component. In case you need to visualize some data, then you can achieve that by combining JavaScript and SVGs. You can also make things interactive, like in the case of this color picker, if I'm dragging these handlers, then the colors are changing, the values are changing. And what's interesting here is that these handlers that I'm dragging are not an overlay on top of an image. These are part of the SVG image itself. So you can assign an event handler to part of an SVG the same way you would assign an event handler to any other HTML element. And you can take this to the next level and create an editor, like this logic gate simulator. This one is fully interactive. So if I'm clicking the inputs, the output will change. I can drag things around, I can add new elements, I can break connections and make new connections. And this whole thing is one big React, is one big SVG that is built up from multiple components. We have a component for this gate, for this gate, for the connections that are connecting the different gates, for the inputs, for the outputs. And then from these small little components that are all built with React, we can just assemble this big SVG.

Now the last example I want to show to you today is this Gorillaz game. And this one is a bit of an Easter egg, because it's not actually using SVG, apart from this windmill that we are going to cover. But this one is using HTML canvas. The reason I still wanted to show to you today is that HTML canvas and SVG have quite similar concepts. They also have basic shapes, like for the buildings in this case. And we can also build up more complex shapes from different path segments, like straight lines and curves and arcs. So in this case, the body of the gorilla is built up from a path that is using straight lines. Then the arm of the gorilla is one big curve that is defined as a quadratic Bezier curve from different properties. And you can define a quadratic Bezier curve the same way basically in HTML canvas and in SVG, even though one is in JavaScript and one is in HTML, but they have the same parameters. So we are going to get back to this once we are talking about curves. And now let's see if I can hit the enemy. And yes! Okay, so after this introduction, let's see the source code of a basic SVG and let's walk through some basic shapes, styling, and some more advanced shapes.

So this one is showing a circle, a red circle, and that's pretty much it. As you see, the syntax is XML-based. And the cool thing about it is that since HTML5, you can just inline this whole thing inside HTML.

Now of course, there are some hard boundaries here. So within the SVG element, we can only have SVG-specific elements, like the circle. We cannot have a header or a paragraph or a div. If you want to have a text, then we can use the text element. If you want to group things together, then we can use the group element. So there are similar elements, but we cannot use the regular HTML elements that we're used to. And this goes the other way as well. So we cannot use the circle element outside of the SVG element because in order to position this circle, we need to have a coordinate system and that is defined by the SVG element.

Of course, we can just generate this whole thing with a React component. And not just like this, but we can also break down a more complex SVG into multiple components and then assemble them together. Now let's take a closer look into the SVG element. As we see, it has a width and a height, and it also has a view box property, which also defines width and a height. So let's look into this. Here we have two images, and they have the same content. Both of these images have a circle with a center position at 100, 100, and the radius of 50. This one is the same exact circle definition.

The image on the left is obviously smaller, and that's because the width and the height is smaller. This one is affecting the actual size of the image. And then we have this view box property, which is defining the coordinate system, which has defined the canvas that we can draw on. And this one says in both cases that the coordinate system starts at 0, 0 in both cases, and the width and the height are 200, 200 each, which is not a pixel unit. This is an arbitrary unit that is used by the image element. So in both cases, these circles, think of the available space as a 200 by 200 unit wide and high canvas. And if we position this circle at 100, 100, then they're going to be at the center of the image, no matter how big the actual image is. All that matters for the image elements is the view box. Usually, this is aligned, so we have the same numbers in both cases, like in this case, we have 200 in both cases. But if it's not matching, then the image is just shrinked down or grown up. Now within this SVG view box, everything is positioned by coordinates.

As we see, the circle is having a center position. We don't have alignments like align left or grid or flexbox or the usual CSS alignments. We need to use coordinates.

Now the view box doesn't have to start at 0, 0. We can also start at any other number. So in this case, we start at minus 100, minus 100 and the width and the height is still 200. And in this case, the center of the image is going to be at 0, 0. And we don't even have to say that for the circle because that's the default.

Now after clarifying the view box, let's talk about the circle element in a bit more detail. The circle element is a very basic shape. It just has a center position as we saw and the radius to define the size. Now by default, as you see, this is going to be filled with a black color. If you want to change that, you can set the fill color. And here we set it to red, but we can set it to any other value that is valid in CSS for color values. So we can also use a hash color value. We can use the RGB function and so on.

Now if you don't want to fill this shape, but we want to have the outline of it, then we can use the stroke and the stroke width properties. This is pretty much similar to what we have in CSS for HTML elements like the border color and border width, but within SVG, we have to use the stroke properties. And we also have to say specifically that we don't want to fill this element because otherwise it's going to be black. Now what's cool about this, if we define this in HTML or in a React component, then we can move all the styling properties into CSS. Here we can set a class for the circle, for the circle itself, not the whole image, but specifically for each element. And then we can define the styling properties in CSS. We can only move the styling properties though. So we cannot move the properties that are actually defining the shape itself. So in case of a circle, we cannot move the center position and we cannot move the radius. Now this is true styling, these styling properties are true for any other shape as well. So we have the fill and the stroke, even if you have a path or a rectangle or a circle.

So we have the fill and the stroke, even if you have a path or a rectangle or a circle.

Now let's look into another basic shape, which is a rectangle. This one is also very simple. Instead of having a center position, we have the top left position and then we have a width and we have a height and that's it. Now with this knowledge, we can already draw a basic chart. Here's a source code for a React component that is mapping some data points into rectangles. And here for each rectangle, we have to figure out the X and Y position and the width and the height based on the data points. And that's it. Of course, if you need some more advanced chart, then you're probably going to use the D3 library or some other charting library, which by the way, will most probably use SVG under the hood. But if you want to have something custom, you can actually do it yourself with SVGs.

Now rectangles and circles are nice, but if you're opening any SVG, then you're going to find a path element inside of it. And the path element is basically a freeform element, which we can build up from multiple path segments. We can have straight lines and curves and arc and so on. So let's try to break it down and see what's inside the definition of a path.

Here we have a simple line. And this line is already containing two separate segments. First we have a moveTo segment, and then we have a lineTo segment. Each segment always defines the end position, so the lineTo segment defines where does the line end, but it doesn't define where does it start. So that's why we have a previous segment with the moveTo that will describe where do we start things. So this one is basically a capital M, each segment always starts with a letter. Then we just have a coordinate, which says that we just move here, and from here, we draw a straight line here.

Now of course we can continue this, and we can just keep drawing straight lines to different coordinates. But what we can also do is instead of continuing this path, we can also just have another moveTo command and have a hamburger menu icon. So a path doesn't have to be continuous.

Now for styling, we use the same styling properties we had before. Here we don't have a fill property because this path is not surrounding any region. So even if you don't set the fill property, or if you would set it to any color, it wouldn't actually fill anything. But we set a stroke and strokeWidth to a relatively thick line, and then we also set this strokeLineCap property to have the ends of these lines rounded.

Now after talking about these basic path segments, let's talk about transformations. As I said before, every shape is defined by coordinates, and we could already draw this because we already know the circle element and we know how to draw a basic line, but we would need some trigonometry calculations to figure out this position, for instance. And instead of that, we can use transformations.

So we just start with a circle and then we have a simple line, which is just going from here to here. That's it. It has a moveTo and a lineTo segment. Then what we can do is we can assign an ID for it, and then we can reuse this path with the use element, which refers back to the path by ID, and it applies a transformation. So for each of these sun rays, we just move it, we just rotate it by 45 degrees. This way we don't have to figure out where does, where is this position actually or this position, we just keep rotating them. It's also important to note that this works in this case because the center of the coordinate system is in the middle of the image, so that's the zero, zero coordinate, because the view box is defined in a way that it starts at minus 15, minus 15, and it ends at 30, 30.

This way we don't have to figure out where does, where is this position actually or this position, we just keep rotating them. It's also important to note that this works in this case because the center of the coordinate system is in the middle of the image, so that's the zero, zero coordinate, because the view box is defined in a way that it starts at minus 15, minus 15, and it ends at 30, 30.

And by the way, the width and the height is just completely independent, even though the inner size is 30 by 30, the actual size is 200 by 200. Now with this logic, we can create other things like the windmill that we saw in the Gorilla's game. If you check the source code, we have a couple of things we haven't talked about before, so let's walk through the code of this one. At the bottom we have this path, which is the stand of the windmill. This is just a move to and a bunch of line to to draw this stand.

And now for the rest, we have the group element, which is grouping together the rest of the windmill. A group element is pretty much like a div element, so on its own it doesn't really do much. But if it would have some properties on it, like the fill property, then it will cascade down to the children. And in this case, as we are animating the whole thing, we can just animate this group instead of each children individually. Now within this group we have the circle, which is in the center. We have a path for one of these arms, which is built up from a move to and a couple line to segments. It also has this capital C segment, which is a cubic Bezier curve. As you see, this not only has one coordinate but a couple more parameters. We're going to talk about this in a bit. And then we are just reusing this arm with the use element and, again, apply transformation to have three different arms in three different directions instead of just having one.

Now what we can do here, and what we actually do here, is that we assign an ID for this group. And in CSS, we just define a keyframe animation where we just animate the rotate property, which earlier was part of translate. Now you can just use the rotate property on its own so it's not clashing with the translate, which was also part of transform before. So you can just set these values independently. And we have this little animation here. You can just use keyframe animations in CSS the way you would use with any other HTML element. We are also using the same technique when we are drawing this watch face, except here we are not using CSS to move the hands in position, but we are using JavaScript.

Now we covered a lot already. We covered some basic shapes, how to build up basic paths. But things are getting more interesting once you start using curves. So let's look into how a curve looks like. There are two kinds of curves. We have quadratic Bezier curves and cubic Bezier curves.

This one is the simpler one. This is quadratic Bezier curve, starting with a capital Q letter here. But again, because path segments only define the endpoint, which is the last two numbers, we have to figure out where to start. So for that, before starting this cubic Bezier segment, we have another move to segment just to have a starting position.

Now after that, we have this cubic Bezier segment with the end position in the end. And before that, we have another position, which is called the control point. And this control point is defining how to bend the line. So if this would be between these two other points, then we have essentially a straight line and the more we move it away, the more the line is bending. And of course, we can bend it just in this direction or the other direction or the other way, like any way you want. And of course, these positions can also be anywhere you want.

And now we have a quadratic Bezier curve. Now if you go back to the gorillas game we had before, the arm of this gorilla, and again, this is actually HTML canvas, but the parameters for curves is the same. So here we have a quadratic Bezier curve that starts somewhere around the shoulder, it ends around the hand, or it ends at the hand, and it has a control point which is somewhere around here. This is not an exact simulation, but what happens if I'm dragging this hand is that I'm only moving the endpoint. So as a result, I can have this very long arms and I have this arms bending the wrong way. But just by modifying one position out of these three, we already have a quite okay simulation. Now let's see if I'm lucky this time. Yay! Okay, I mean, I built this game, so I played a bit with it.

So after this, let's talk about the cubic Bezier curve, and this is a bit more advanced, but it's quite similar. So again, we start with a move to command, then with a capital C that we also saw in the windmill example, and the last two positions, or the last two numbers, which is a position, is the end position again. Before that, however, we have two other coordinates. We have a control point for the endpoint, and we have a control point for the starting point. And the way this works is this one essentially affects the start of the line. So it affects like how quickly does it turn and in what direction does it go initially. But it doesn't affect how the line ends. Like if you look at this part, that pretty much stays the same. Okay, it's moving a bit, but essentially it's only affecting the start of the curve and not the end of it. And then the other one, the other control point, is affecting the end of the line, so it affects like how quickly it turns and in what direction does it go first. So why is this useful? If you're building up more complex shapes, you often want to have a smooth transition between the different path segments. And what we have here is we have two straight lines. We have a straight line here and a straight line here. And then we're connecting these two segments with a cubic Bezier curve in a way that you wouldn't tell that we are changing segment here because the transition is smooth. The control points of this cubic Bezier curve are aligned with the previous and the following segment. Same story here, like we have a straight line here, we have a straight line here, and then we are connecting with a cubic Bezier in a way that the connection is smooth. So cubic Bezier curves are useful when you're building up more complex shapes and you want it to look like a nice shape.

Now this is pretty much what I want to talk about. So from this, you can already build up quite complex things. Of course, there are some more advanced things like you can also draw arcs that start with a capital A, and it also ends with an N position. The problem here is that it has like five other parameters, like different radiuses and angles, and you can go from the starting point to the end point in the long way or the short way or the other long way and so on. So this is a bit more advanced and I'm not going to get into it. If you're interested, then check out svgtutorial.com where you can find this whole presentation and a lot more small little examples and use cases that you can try out in your next project. So I hope this was useful for you and you learned something and got some inspiration for your following projects. I was Hunor. Please check out my website and see you on the web! Ciao!