SVGs to Make Your Blog Stand Out

Hello everyone. First of all, I want to say there is really a pleasure to be here at React Summit Remote Edition and today I'm going to talk about SVGs to make your blog stand out. My name is Elisabet Oliveira and I'm a senior product designer working right now for Elastic. Elastic is a really cool company. We all work distributed. I work from Lisbon, Portugal. I'm currently living in Lisbon, Portugal. I have colleagues from the United States. And I'm basically, right now, helping building the Elastic UI, our design system, and I'm also helping sometimes like helping building Kibana, one of our products.

Today I want to talk about, once again, about SVGs. I've been talking about SVGs before and I've been in other editions of React Summit, but today I want to tell you a little bit like how you can use SVGs inside your project. Why? Because a lot of people, normally, when they see my talks, they say, oh, you know, SVGs are really cool. I wish I could use them inside my projects, inside my products. Actually, you can use SVGs inside your projects and products. Today I want to show you just a few ideas of what you can do. What is an SVG? An SVG is XML-based vector image. This is basically the definition from Wikipedia. It says that the format for two dimensional graphics with support for interactivity and animation. As you can see, when you have an SVG, basically an image, and you open the file, you will see all of this code. And this code, you actually can change the properties, fill, colors, all of these things, and it makes really great if you want to animate or to interact with the SVG.

So I thought for this talk that a blog can be a very good example of how we can use SVGs. So I can give you like an example like last month I started trying to update my blog. I started like researching a lot and I wanted to build my new blog. I wanted to use Next.js. Also I wanted to use Chakra UI, so I started researching a lot and I found I found this blog from Noah and Noah created this blog with Next.js and also with Chakra UI and he made it open source. So one thing that I noticed from Noah's blog, first of all it's like very just a text. It doesn't have a lot of design. This is like the blog part, so this is like the the first page, the home page, and then you have like the the blog and I noticed that okay you have mostly text. You don't have too much of design.

You don't have too much of design. So I went like to Noah's repo and I saw okay I forked the project and then Noah's said that it took the inspiration from Lee Robison. So I went to Lee Robison's website and this is like his blog and it's also very content based like mostly just text. And I realized okay nowadays most of developers blogs are just text and they don't have too much of design. Normally they have like an icon to change the theme from dark to light or from light to dark. They don't have a logo or they don't have images. And so I thought okay yeah that's okay a blog should be content focused. So there's nothing wrong with these blogs. I know that the content is more important but I think, and actually I'm a designer so that's why probably I think this, that a good design can help your blog stand out. So I started thinking about that and and I thought okay so I'm going to fork Noah's blog. But how can I make it stand out a little bit? So I said okay I can use, I can change a little bit the design you know like put image and all of these things. But I can use SVGs for do that and that's what I want to show you. So for what I'm going to do is basically show you how you can use like SVGs and for this talk we're going to transform the SVGs into JSX. In React you can also import SVG as an image and if you do that you almost can't interact with the content inside the image. So what we want to do is to use the SVG inline. So we're going to transform into JSX and this is actually really good because first of all if you transform the SVG as a React component you transform the SVG into JSX you can easily split the code in different parts. You can have an image that you split in different parts. It's perfect for animations and styling with CSS and you can make use inside the SVG of the props of the state and event handlers like onClick, onMouseLeave, onMouseEnter and all of these event handlers and the best thing is it's inline SVGs so you don't have like HTTP requests. So it's the same as using a normal React component. So right now, let's dig into some code examples.

So if I go here, first of all, I want to show you how I split the project. So when I started from Noah's Fork, you basically had all the components here and I created like a new folder called SVGs. So inside this folder, I will have all my SVGs components. So it's like basically GSX React components, but inside these components, you have SVGs. So they live inside this folder called SVGs, okay, components and SVGs.

So first thing that I want to show you is how you can, first of all, you have like an image and let's start like with the logo. First thing that I wanted to do from Noah's blog was to change the logo. So I created my own logo And as you can see, I have like two different faces. One that is called the love struck and the other face that is called the happy face. So I feel like I want to animate these and my idea was to interact with the logo. So when I hover the logo, I want to change the face from happy to love struck.

So what I'm going to do is basically export this logo. I could copy paste. Actually, I could, in Figma, I could copy as SVG. And then I use a lot of this tool from Jake. I could pass the markup and as you could see, I would have like the SVG here. But I don't like to do this way because when I like to export the SVG, as you can see here, I prefer to export and I'm going to export to my desktop. And the reason I'm exporting this way, it's because I want to include ID attributes. Okay. So I want to include ID attributes. So I'm going to my desktop and I'm going to drop it. And now I have SVGs with IDs. As you can see in this option, I'm not cleaning the IDs. And the reason I'm doing this, the reason I want the IDs is because then it's easier when I'm manipulating the SVG, when I'm trying to change properties and interact to the SVGs, it's easier to find the SVGs and all of these things.

So what I do here is I copy and then I pass it here. Actually, I should copy like this and then I use this SVG to GSX. You can use other tools to convert the SVG into GSX. I prefer to do it manually because I can see what is happening and I can optimize it the way that I want. So now that I have this, I can copy. And now, okay, I have it here, my components.

And let's say that I copy that and I would copy and paste here. And now I want to show you. Actually, it's already here. And I want to show you how you can interact and now you can create like, interact like with SVG and create animations and all of this cool stuff.

So first thing that I'm doing here is having like this event on mouse enter and on mouse leave. And I'm using this hook you state to see when it's over. So by setting it's over I can use this variable is over just to check if the mouse is entering the SVG or if it's leaving the SVG. And this is like Sharker UI and this is like the SVG.

And now that I have like these events that I can check if it's over or not. So now what I want to do is as you can see in my SVG, I'm going to change if it's over, I'm just showing that part that face left struck that is like a group and if I'm not over ring I want to to show the face Jave. So basically, if you see that's the reason I exported the icon, the logo with the two faces. And now in my code I just check is it over? So if it's over, I just want to show the left struck. If it's not over, I'm going to show the happy face.

Okay, so now let's see. Now this is how the blog looks like. So as you can see if I over, now the face changes. Actually the logo is not that big, but I think it's a small interaction that it makes your blog looking a little bit better. And you can actually, if you don't have design skills, there are a lot of websites where you can use open source SVGs, you have like flat icon, free pick, and you can just download from there. So this is the first interaction. And then the blog, you can change the light and dark theme. So if I change the dark and light theme, my logo is going to update the color. And the way I'm doing this, is I have like this prop called text color. And from the parent component, I'm checking what is the theme and I'm doing this like with Chakra. So in Chakra, I check what is the actual current theme, is it light or is it dark, and then I update the text color according to the light or dark theme. So basically, that MewKeyMew text, it updates the color to white if we are in dark theme and to dark if we are in the light theme. So basically, that's what this component does.

And then the next components that I want to show you, it's this part. So for creating this part, I actually wanted to just animate a little bit. I didn't want to have a lot of animation. But just to animate a little bit like the planets.

And to do that, and to do that, so I exported like the that illustration. And I'm going to show you. So I have here, it's called the own illustration. And for do this, I'm using React Spring.

So one of the things actually that I'm also doing is you can change the team here with this icon. But you can also interact with this illustration. And if you click this illustration, you can also update or change the current team.

So to do this, I have like two, I'm using Chakra UI to see what is the current color mode. And then I have this toggle color mode. And with the toggle color mode, I have like a box from Chakra UI that I'm using like a button. And inside the button, I have all the SVGs. And what I'm doing is on click, I just update the team. And then I have two objects. One is the colors for the light team. And other object is the colors for the dark team. So what I do is I check if it's the light team. And if it's the light team, I update all the colors to use these colors of the light team object. And if it's the dark team, I update all the colors to use the colors dark from this object.

And then the other thing that I do is I use the React spring to create to create that interaction on over. So whenever the planets update a little bit, the computer seems a little bit slow because I'm just recording. And actually, the animation is a little bit better than you can try by yourself. So I use the react spring to to do that. So basically, what I'm doing there is just I'm using the Translate 3D and updating the X and Y values according to the mouse movements. So you can try to do this also by yourself. It's really easy. Actually, there's a demo and the React Spring website. It's basically almost a copy paste from there.

So, other things that you can add like another SVG in your project is this button. So, I wanted to create like a different type of button so the block could stand out, as I said, and instead of using like a normal button, I wanted to use my own. So, to do this, I have like this button.

So, basically, with SharkUI, I have all of these button properties and then that's my SVG, where I say where I'm not preserving the aspect ratio because I want the SVG to grow with the text. So, I'm just passing as a prop the height that I want and then the aspect ratio, the width, it goes to like 100% And then I'm passing also the accent color. It's this color. I could also update the color according to the theme. In this case, it works well. It works very well for the light and dark themes. So I don't need to update the color, but I could do the same as the text from the logo or as this illustration. The color could be updated according to the theme.

And other thing that I'm doing here is these cards. And for these cards, the idea for these cards is when we are in the dark theme and we hover the cards, I can't see the shadow. It's very difficult. So I needed a way to make the cards stand out. So I thought okay, if I have, like, what if I put like an SVG here and on hover, I update, like, the color. So that's what I did. And so I call the panel background. And the panel background, it's part of that card. And it's really easy. So I check if it's over. And it's over. It's coming from the parent. So I check it's over. I have like a fill color and another color for when we're hovering the card. And then for this one, I'm using, again, React Spring. So basically, what I'm doing here, if it's over, the over fill is the one that we see. And if you're not over, the animated pad is just with the fill color. So it's also really easy. So when we're over, you can see this effect.

And the last component that I want to show you, this is actually using an SVG, but the last one that I want to show you is this component. And it's like, it's what I call the love button. And the love button...

For the love button, I'm actually using React Motion and Framer Motion. And I could use also React Spring. But for this one, I decided to use Framer Motion. More like to show you that you can use the library, that you feel more comfortable. And it's really easy to create this type of interaction with Framer Motion.

So if I copy this and copy and search for motion. Basically, one of the things that I'm doing with Framer Motion is just almost like the stylet components, motion.svg. And then while over, we scale a little bit. So whenever we're scaling a little bit, we also have the same interaction as the logo. So it checks if it's over or not and the face changes. And then what we also do it here is we have a variant and we animate. So every time we click, we update like the variants. So we go from zero to one, two, three, four. So when we animate we change the variants. So we go from the variant zero, variant one, variant two, three and four. So basically we just translating And so it starts like empty in the 44 pixels. And then when we go to the first variant that is the 44 pixels and then we translate to 33, 22, 11 and zero, and it creates like this effect. So it's basically there's a background that is going up, up, up, up and that's basically what I'm doing.

So here we are again. And that's it. I just wanted to show you the things that you can do with SVGs to make your blog stand out a little bit. I'm going to share the code and you can see the way that I'm doing the code. And you can also use this is like an open source project and that's it. That's basically the talk and I hope you like the talk. And if you have questions there's my Twitter. You can make any questions and after that you can also talk with me and do all your questions. And okay, that's it. Thank you once again and I hope you enjoy it and I hope now you have inspiration to make your blog with more design and more creative. And that's it. Thank you.

Looks like music without lyrics is the top one which makes a lot of sense. I feel like that's a little bit less distracting than some other types of music.

Awesome. Yeah, but I actually listen to the same song over and over.

That's awesome. So, let's do the Q&A. So, we got some amazing questions from our discord. And so, let's see what people were asking. So, the first question is, since SVG is valid JSX inside React components, is there any benefit to keep the SVG that I get from designers in separate files? And this is from Aprilion.

So, can you do the question again? Yeah. So, since SVG is valid JSX inside React components, is there any benefit to keep the SVG that I get from designers in separate files? No. I think it's better if you use the SVG in line. But I think it also depends what you want to do. If you're going to animate the SVG, if you're going to change properties, colors, and all of this is better if you transform the SVG into React components. If you're not going to change colors or anything, you can just import it as an image because you don't have any benefit of putting in line. So, why would you transform? Yeah, one of the benefits with BEO, you won't have an HTTP request, but I think it depends on your case. If it's just an image that you don't change anything, just import as an image. If you're going to animate it or you want to change colors based on React props, I think it's better to transform into a component.

Awesome. The next question is from Vladislav. It's always fun to read people's usernames because it's like how do you pronounce this? So is it better to use SVG always as a React component? That's it. It depends. I like to use as a React component, but because normally when I think I'm going to use an SVG is because I want to change properties, change the feel, animate, and also have the best quality because it's like a vector image. So, I think if your use case is you're going to have interactions, you want to let's say you have an icon, and the icon is an SVG, and maybe you want to make the icon really customizable because in one part of the page you want to use that icon in dark color, but maybe in other page you want to use that icon with a different color. So, you just need to pass a prop with the color. If you are importing an image, the SVG as an image you would have to export in red and import, and then you would have to export again with another color, import as an image, and do this over and over again. So, if you want to make use of the customization, I think it's better to transform into React component.

Cool. Awesome. Two questions from Habma.

So, the first one is, how would you implement an SVG as a responsive React component instead of defining width, height, and view box? Yes. So, actually, that button that I created was responsive. And what I did with, one thing was, I don't preserve the aspect ratio because I want it to grow. And the other thing is, I say that the width is 100% and the height is also. And so, it always grow. But you could do the same with other images. You can use like the width. And also, you have to pay attention to the aspect ratio because with SVGs, you only have that. And yeah. But you can make it responsive.

Cool. And what are the points which we as a developer should keep in mind while using SVGs to make it accessible? Are there any tools or libraries for automatically checking accessibility for SVGs? Yes. Actually, there's the SVGR that you can create your own script and transform the SVG into React components. And where I work at Elastic, we use this SVGR. And when we do, actually, inside SVGs, if you use the title for accessibility, so, if your SVG is just doing nothing, it's just an image that it doesn't say anything, you can use like hidden true. But if your SVG is like an icon that says something that is important for the context, it's better if you pass a title. And with SVGR, you can also do that automatically. And so, yeah. I would use that. There's a title tag, and you can it's better if you use the title tag. Or you can also use aria-label.

Cool. Cool. And then from Vlad S., can we get preferred color theme, darker light, from the user agent or the navigator? With Chakra UI, yes. I think you can have. By default it peaks. If you run it properly. If you install Chakra UI properly, you can say that according to the user preference, it opens in darker light. Chakra UI is one of my favorites to use as well. I'm using it for everything.

It just looks so good by default, and it's easy to use, too. Cool.

Thomas B. asks, for the card hover, was using the circular SVG and changing the color, is this more performant than just using a div with border radius and the background color? I think probably using the CSS would be better for performance than that SVG, because I think if your SVG, sometimes if you do it properly, if you know what you're designing, when you export it, it's really simple, but sometimes if we use especially like this type of software, like Figma or Sketch, and you export like a square or a triangle, it creates a lot of paths. Sometimes, if you know to create byte code, you could just say circle, or it could be a very simple SVG, and sometimes it's like over-complicated SVG, and for that reason, I think sometimes CSS is just, and Adib is much better. In that case, I think I did it that way because I just wanted to show where you can create with SVGs, and maybe in that example, yeah, I think Adib would be better.

Cool. Another one from Stevie R. What was the tool for changing SVGs to JSON? To change SVG to... To JSX, sorry. Yeah. So the name of the tool is... Let me check in here. It's called svg2jsx.com. JSX.com. Aptly named. Yeah. Does exactly what it says. Yeah. Yeah. That's awesome. So this one's from Im Sardon. Question. Have you issued any performance issues while playing with React SVG animations that we should be aware of? Yeah. Actually, one of the examples that I was showing when I was overring that hero illustration, it was really slow. And it was because I was running Zoom and recording the talk. And doing this at the same time, it showed this performance is really bad. I think sometimes having this type of animation with JavaScript makes your websites slower. And sometimes it's better if you just had like CSS like on over. This happens with CSS.

But I can say that also using this JS libraries, if you don't know CSS properly, it's much easier to do that. Awesome. Cool. I think you've pretty much answered this one. But from what are the pros and cons of CSS versus SVG? I think if you want to create something that is very unique, let's say you want to create that illustration, where I have that small cartoon. With CSS it would be really difficult to achieve that. But a lot of people do that. Like on CodePen, you see people designing things with CSS, but it takes time and it's like a div, and position the div in that place. And with the SVG it's just, you designed it and you export it. But I think in that example of the card, I didn't need that round corner with SVG. So I think we really have to know when you should use an SVG. And in this case I think when your design is complex and you want something that is unique, like an icon, it's very difficult to have that icon or a logo with CSS. So SVG would perform better for that. And it's easier just to achieve better results.

Awesome. Well, thank you so much for both the awesome talk and then also for answering all these questions where I put you on the spot here.