SVGs to Make Your Blog Stand Out

Hello everyone. First of all, I want to say that it's 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. And today I want to talk about, once again, about SVGs. I've been talking about SVGs beforehand. 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. And you actually, you can use SVGs inside your projects and products. And today I want to show you just a few ideas of what you can do. So what is an svg? An svg is XML-based vector image. This is basically the definition from Wikipedia. So it says that the format for two-dimensional graphics with support for interactivity and animation. So 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 an example. Last month, I started trying to update my blog. And I started researching a lot. And I wanted to use, 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 this blog from Noah. And Noah created this blog with next.js and also with Chakra UI. And he made it open source. So I decided to, instead of starting from scratch, to fork Noah's project, Noah's blog, and then update and improve a little bit the design. So one thing that I noticed from Noah's blog, first of all, it's like very just text. It doesn't have a lot of design. This is like the blog part. So this is like the first page, the home page. And then you have like the blog. And I noticed that, okay, you have mostly text, 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 said that he took the inspiration from Lee Robinson. So I went to Lee Robinson'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 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 to design, you know, like put image and all of these things. But I can use SVGs or 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 use, 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 in line. 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 on click, on mouse leave, on mouse enter, on all of these event handlers. And the best thing is it's in line svg, 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 JSX 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, so 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 over 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 do SVGs, it's easier to find the SVGs, so the IDs and all of these things. So what I do here is I copy and then I pass it here, actually 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 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 copied that and I would copy 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 overing, I want to show the face heavy. 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 stroke. 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 like design skills, there are a lot of websites where you can use like open source SVGs, you have like flat icon, free peek, and you can just download from there. So this is like 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 Mewkimew text, it updates the color to white if we are in the 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, not like, I didn't want to have like a lot of animation, but just to, you know, change a little bit like, animate a little bit like the planets. And to do that, so I exported like 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 theme 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 theme. 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 theme. And then I have two objects. One is the colors for the light theme and other object is the colors for the dark theme. So what I do is I check if it's the light theme. And if it's the light theme, I update all the colors to use these colors of the light theme object. And if it's the dark theme, 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 that interaction on over. So when I run over, 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 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 is 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 Sharker UI, 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 is this color. I could also like 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 has 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 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 this 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 interactions with Framer Motion. So if I copy this and copy and search for motion. So basically, one of the things that I'm doing with Framer Motion, you just almost like the style of 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 animating. So every time we click, we update like the variant. So we go from zero to one, two, three, four. So when we animate, we change the variant. So we go from the variant zero, and one, variant two, three, and four. So basically, we just translating the Y. And so it starts like empty in the 44 pixels. And then when we go to the first variant, that is the 44 pixel, 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 as like an open source project. And that's it. So that's basically the talk. And I hope you liked the talk. And if you have questions, there's my Twitter, you can make any questions. And after that, you can also, after the talk, 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 listened to the same song over and over. That's awesome. 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. Sorry, can you do the question again? Yeah, 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 like properties, colors, and all of this is better if you transform the svg into react components. If you're just going 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 it? Yeah, one of the benefits maybe would be you won't have like an HTTP request. And but but I think it depends of 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 this react components. But because normally when I think I'm going to use an svg is because I want to change properties, change the feel, animate, if 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 another 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 components. 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 auto. And so we always grow. But you could do the same with other images. It depends. You can use like the widths. 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 aria-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 that title tag. Or you can also use the ARIA label. Cool. Cool. And then from Vlad F, can we get preferred color theme, dark or light from the user agent or the navigator? With Shaka UI, yes. I think you can have. By default, it picks if you run it properly, if you install the Shaka UI properly, you can say that according to the user preference, it opens in dark or light. Shaka 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 you're 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 you 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. And sometimes if you know to create by code, you could just say circle or it could be a very simple svg. And sometimes it's like overcomplicated svg. And for that reason, I think sometimes css is just and the div 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 a div would be better. Cool. Another one from Stevie R. What was the tool for changing SVGs to JSON? To change svg to JSX. Sorry. Yeah. So the name of the tool is let me check in here. It's called svg to JSX.com. Aptly named. Yeah. That's exactly what it says. 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 overriding 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 just 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 Anz Danish, what are the pros and cons of css versus SVGs? I think if you want to create something that is very unique, let's say you want to create that hero illustration where I have that small cartoons, with css 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 design 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 you 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 of these questions where I put you on the spot here. I've definitely learned a lot from this.