The Hidden Powers of the Shape Block  In a recent video, I was building out a header just so we could play around a little bit more with the generate blocks navigation block. And in that video, I used the shape block instead of the image block for the logo inside of that header. And I got a question down in the comments about why I used that shape block instead of an image block. Now, to be fair, I didn't even really think about this as I did it. I just kind of did it out of a force of habit. But as I had to think about it and answer that question, I realized there's actually a lot of superpowers that come along with using the shape block instead of the image block. To be fair, there are a couple downsides, too. But once you know what you can do with the shape block that you just can't do with the image block, I bet you can find some ways to use it more creatively. So, in today's video, we're going to go over the advantages and disadvantages of the shape block and show you a few things that you might not know. If that sounds interesting to you, then stick around and let's get started. Now, the only reason why I could use the shape block here instead of just the image block is that the logo I was using for my website was an SVG file. Now, if you don't know much about SVG files, those are actually vector graphics. Vector graphics have a couple benefits to them. The main one being that they can scale infinitely without ever losing resolution. Unlike a raster image like a JPEG or a PNG, they're never going to get pixelated whether they're 10 pixels or 10,000 pixels wide. They can also be a much smaller file size depending on exactly what the graphic is. But for a simple logo or an icon, usually an SVG file is going to be smaller than a raster file. Now, the image block will allow you to use SVGs inside it. So that doesn't really answer why I use the shape block instead of the image block in this scenario. So let's take a look at both of these inside of the website and see how they differ. So here inside the setup, you can see I have two images that basically look identical. This first one here is using the shape block and the second one is using the image block, but both are using the exact same SVG. And again on the front end, both of these look identical. But when we inspect the code, we'll see the difference here. If I go ahead and select the second one, which was using the image block, we can see it's using the image tag here and it's pointing to the source of my SVG image, but the shape block outputs the actual SVG element. The full SVG markup is all directly here inside the HTML. Now, this is what we call an inline SVG versus like an external SVG like we have inside this image block. So, now that you can see how these output two different HTML tags, let's talk about why this matters. Back here inside the editor, I'm going to go ahead and get rid of our shape element so we only have our image element. We'll go ahead and save those changes and I'll refresh on the front end. Now, here inside the network tab, we can see every request that's being made in order to load this website. We see at the bottom down here that there are 17 total requests. But if I go back in here and undo those changes, this time we'll get rid of our image block and go ahead and save those changes. And again, we'll refresh. and we'll see the number of requests has gone down to 16. With the image block, the browser has to request that SVG file. But with the shape block, the browser doesn't. The SVG is already inside the HTML. Now, this difference doesn't mean a whole lot when we're just talking about one logo. But imagine you had a layout with eight cards and each one of them had their own different icon. If you were to use the image block for all those icons, that's eight extra requests on your page. But if you use the shape block, you wouldn't have any extra requests for all those icons. Now, reducing the number of requests doesn't always speed up your website, but it certainly can. And that would definitely be the case when you had a bunch of simple icons. So, using an inline SVG like the shape block allows us to do can be one way to speed up your page. Now, the second big benefit to using the inline SVGs and the one that's a little bit more fun is inline SVGs give us the ability to style those images using just plain CSS. In fact, I can show you this here in a pretty simple demonstration. If I have this simple icon that's just a single color, I can use the inline SVG element, then use the panels inside generate blocks to recolor that icon whatever I want. If I use the image block, I wouldn't have this ability. If you want to get extra fancy, you can use all your color variables from your theme inside the SVG images and that way it matches the theme of your website perfectly and if you ever change those brand colors, all your icon colors will update with it. But it's not just about the color of icons. Using the inline SVG means you can actually target the elements inside that SVG and animate them pretty simply. That's actually how I created this animated SVG on the homepage of Termageddon's website. If you want to learn a little bit more about how to animate those SVGs, I've left a link down in the description for a video from Fire Ship that does a really good job of showing you how that works. Using inline SVGs gives you a whole lot of control that you could never have with the image block. But of course, web development is never black and white, so it comes with some drawbacks, too. Inline SVGs are going to add more HTML code to your page. If you had the same logo or icon six times on your page, it's going to be repeated six times in your HTML. However, if you were using the image block, you just have one image that keeps getting referenced multiple times. So, you might end up with more or less code either way you go. It really just depends on the situation. The inline SVGs and image elements also don't get cached the same way. Your browser may cache that full HTML page, but it doesn't reuse that same HTML when you go from one page to the next. With a image block, once you cache that image, it can be referenced as people visit different pages on your website. And let's say you use inline SVGs for your logo across a bunch of different places on your website. Well, if your logo ever needs to change, you're going to go have to hunt down every single one of those instances and replace them manually. If you just used the image block and referenced a specific SVG file, you could go in your media library and replace that and it would be instantly updated across your entire website. And of course, dealing with SVG code is just a little bit more technical. It's not too bad if you don't mind digging into the code, but I know not everyone wants to do that and you have to do it a little bit more when you're using those inline SVGs. Now, I don't think any of these are dealreakers for using inline SVGs. In fact, I use them quite a bit, but it's helpful to know the benefits and drawbacks so you know which one to use in different situations. Now, if you've only used the image block, I'm not suggesting you go back to every project you've ever done and replace it with inline SVGs. However, if you've ever thought, "Oh, this would look pretty nice in dark mode if I change the color of this icon, or you'd like to animate it or just change something on hover, then the shape block can really come in handy." Hopefully, you learned something in today's video. If you did, I would really appreciate a thumbs up. And if you want to make sure to catch the next one, hit subscribe and we'll see you, The Hidden Powers of the Shape Block, YouTube, 01kcyvndqmnm48kr23xqjtkva0.