Hello everyone! Today we're going to talk about
the subject that I find fascinating, which is the way we can use SVG files in React JS and
the way they work particularly well together. The point of origin of this interest was
work I had to do on a website for H&M, where we had to create a dynamic map where we
had different projects with different states and different types of products, and the types of the
projects in the states would change depending on a number of things like how completed they
were. There were different ways of doing this: We could have just created image files
with transparent png files and created 20 odd files but I started looking into how
SVGs worked in React. What I found was really interesting, and it was something I didn't know.
Okay, let's get using SVGs with React js! We have five reasons to use SVGs and four ways to use
them in React. Now, the five reasons to use SVGs: 1/Because SVGs can be they can be light.
A properly done SVG (which doesn't have an excessive amount of details) can be weigh one or
two kb, where an equivalent PNG file would be at least 10 times as big. Now this is not an absolute
rule. I've seen SVG files that were very heavy in details and that were half a meg in size, but in
general for a simple illustration or for an icon, for anything that's vectorial SVG is the
perfect fit and will make your network load a lot lighter and make your website load faster.
Which is a good thing! The second thing is: SVGs can be scaled. We can have the same file look
good at a small size and a big size because as it is vectorial content it's vectors: it's basically
the case for the icon that we have on-screen here. It's vectorial content. It will scale up
simply. It's not a load of pixels that trying to make a circle it's in code. We say this
is actually a circle this is actually a line and so this means that it ends up looking
good a lot better at higher resolutions and at higher scales. The third thing is: SVG
files can be styled. We can apply CSS styles. We can apply CSS styles to SVG files,
we can apply a number of things which means that they can take on different styles
depending on the context, depending on the logic. This means we can have SVG files that change
color depending on if the item is active, in the icon in the menu for example.
The fact that we can change the image dynamically in code is really important. We
can't do this with a png for example. We can do a filter but this can be heavy it's not going
to have a good color, whereas here you can say this outline, this class has this color,
and that can be done dynamically in code. SVG files can also be animated because
there's logical content The way it's done: We can say okay: This this part here, we can
change its length, we can change its curvature, we can turn this on and so this allows
us to animate SVG files in a way which is not possible with PNG
files and which is lightweight too. Lastly SVG files are basically text files, and the
fact that they are basically text files means that they can be indexed, and so they can be useful
for SEO. They can also be useful (for the same reasons) for translation. That's slightly more
complicated because words have different sizes in different languages but basically if you're in a
context where you must have text in an image (and I'd recommend against using text in an image in
95% of the cases). But if you absolutely *must* have text in an image, and you know that the size
is going to be safe you can use your translation (and if you need to have it translated
obviously). You can use the translation underlying translation of your framework, for
example of React, and use that to inject text inside the SVG, and that have that text
be translated. So five reasons (six, if you count translation) why it's a good idea
to use SVGs. That said, how do we use SVGs? Well, there are four ways to do so. The simple
way, and the way we're most used to, is to just include it like any other image file: do an image
tag with the src equals and go and fetch it on the server. Now the problem with that, is that we're
fetching on the server and that we're actually not making use of a number of the good things
that I mentioned before. We can actually also import the SVG logo directly into our react
component, and this is actually what the create react app start page does. The app
actually basically has this code here, and if you do a "create react app" you can
see it for yourself. I've simplified it, I've moved out some of the fluff which is not
relative to the subject at hand, but basically, this means that it's a lot nicer way of writing
things, but it's basically the same thing that's happening. That is: it's basically fetching a
file from the server. For other image files of other formats (other than SVG) so: PNGs and stuff,
when the file is less than 10 kilobytes in size, React will actually inline the content, i.e.
write it as data inside the src attribute of the image tag. But this is not true for SVG files.
There's a bug that prevents it from happening. We're still doing a round trip to the server with
the SVG files, and round trips to the servers are generally a bad idea. Now, there's another
better way of using SVGs, which is to use a library called SVGR, and you can look up how to
install it. I'll include a link in the comments. This allows you to transform SVG files into React
components, and this transformation means that you no longer have a round trip to the server. It
means you can basically do as we have in line 2: import ReactComponent as Logo from an SVG file,
and then use that logo directly as a component. And the advantage is that you're no longer doing a
round trip to the server. So it's better in terms of speed and responsiveness of your application,
it also means that styles are better applied. So all-around it's a good solution, and for a lot
of use cases, it's largely sufficient. However, for my use case (with the map) that I
talked about initially, it's not sufficient. I needed to be able to apply logic and to
apply conditional styling and stuff like that based on what the content was that
I was trying to display. And basically, the reason why SVGR works, and the reason we can
do even better is: Because SVG files are basically just a text file, and the fact that they're just
text files mean that they can be rendered by React. And in fact, they're just text files that
have an XML-type structure just like HTML does. This means that we can actually render them
directly inside a component. So if we take this, this is more or less the code for the React logo
on line six. The line is actually a lot longer so hence the etc. But this is basically what SVGR
does, and in a lot of cases, we can actually do it ourselves. Now we don't always need to do
it ourselves, it can be a lot faster just if we don't need to change the icon if there's no
logic to apply. If there's no business logic that is required then SVGR (which comes bundled
by default in CRA 2.0 by the way) is fine. But basically what it's doing is what we can do
ourselves, and it's creating a render of the SVG file basically like the text we have
on-screen here. Now, what does this mean? This means that we can apply all the fun
stuff we do in React to this component. So this means that we can easily include a state,
we can include a callback on a click that changes the state, and we can take into account
that state to change the styling of the SVG. So basically this means we can have an icon that
changes depending on the state of the application. So in my case, in the map, I could change the icon
based on whether the project was active or not, I could change the styling. And this is actually
a really powerful thing. It's not useful for every single use case, but it does allow us to do a
lot of things, and to do it in the natural React way, using hooks, using a component that renders
the SVG. This allows us to break out the context of just HTML and to apply the same kind of React
goodness to images that we include inside React. I hope that was useful or fun it was both :) It
was fun for me at least. It was an interesting subject that I haven't even completely finished
exploring. I think there are lots of things to discover with SVGs because they're a very powerful
tool and a very useful tool. And the interesting thing for me was that how closely, how well they
fit into React, how well the two can intermesh. Anyway if you found this video interesting,
if you found it fun, please feel free to like the video. In fact please do! I appreciate
the encouragement. Subscribe if you like, if you want to hear more, if you want to learn
more, and I'll see you in the next video. Bye! oh and if you have any questions any comments any requests uh for example if
you're interested in learning how we created the map component in the website i
showed in the intro um let me know thanks bye you
