Wow, this is incredible. I've been blown away with how versatile svgs are lately. Being able to design something in Illustrator, upload it to the web, edit and extrude the shape in Blender - it's...
Wow, this is incredible. I've been blown away with how versatile svgs are lately. Being able to design something in Illustrator, upload it to the web, edit and extrude the shape in Blender - it's a dream.
I’m sure this is just an ambiguity of language thing, but SVGs have always been useful. Even before the standard was codified we were using vector drawing techniques in cool ways. Vector fonts,...
I’m sure this is just an ambiguity of language thing, but SVGs have always been useful. Even before the standard was codified we were using vector drawing techniques in cool ways. Vector fonts, for instance, is the foundation for digital typesetting for many good reasons.
I was following a tutorial that had me ask an LLM to create some css for me. I was curious what it would come up with, so I dumped the request into Claude along with my html template. The design...
I was following a tutorial that had me ask an LLM to create some css for me. I was curious what it would come up with, so I dumped the request into Claude along with my html template.
The design it can't up with was pretty typical of what's popular right now, but what stood out to me was that it included a moving background image that was an svg, defined inline with the css instead of as a link. I didn't even know you could animate svgs before that.
Wow, and yeah that surprised me too when updating my knowledge of how versatile SVGs are (have become?) as a tool embedded in markup. Wasn't it possible to create shapes in HTML back in the day?...
Wow, and yeah that surprised me too when updating my knowledge of how versatile SVGs are (have become?) as a tool embedded in markup.
Wasn't it possible to create shapes in HTML back in the day? I'm no coder, so what's new about the versatility of SVGs? That they can be manipulated more than old HTML shapes?
You can create shapes using the html canvas. I never got around to learning how to do that, it looks like you have to also use JavaScript. What I do know about svgs is that they aren't supported...
You can create shapes using the html canvas. I never got around to learning how to do that, it looks like you have to also use JavaScript.
What I do know about svgs is that they aren't supported without plugins in react, a program that is used for creating websites. I think that's why I never really dug into them, I mostly used react for a long time and none of the projects used svgs.
What do you mean about them requiring plugins in React? In the past I've written svgs in React JSX by just using the associated nodes. I more-or-less just copied in the contents of an svg made by...
What do you mean about them requiring plugins in React? In the past I've written svgs in React JSX by just using the associated nodes. I more-or-less just copied in the contents of an svg made by an artist on my team and tweaked it a little to support some parametrization, but all in rather plain React.
The times I tried it, I had to install a plugin for the svg files to work at all, they otherwise showed a broken image. Possibly things have changed since then, it has been a few years. There's a...
The times I tried it, I had to install a plugin for the svg files to work at all, they otherwise showed a broken image. Possibly things have changed since then, it has been a few years.
I find the assertion they are unsupported to be misleading. They're supported just as well as any other HTML element. I've used them for years without plugins. It would be unfortunate if anyone,...
I find the assertion they are unsupported to be misleading. They're supported just as well as any other HTML element. I've used them for years without plugins. It would be unfortunate if anyone, especially newer users of React, came away thinking that it lacks svg support or needs these plugins.
What you can't do is the exact thing that plugin is doing without it or equivalent code, but frankly I think that's a very strange use case and thing to do. I get why they're doing it, but I don't think that not having explicit support for an edge case that I'd personally discourage using in production constitutes being unsupported. "Load and inject into the DOM this file defined at runtime" isn't really a feature of any frameworks I'm aware of, and probably shouldn't be because it's a security footgun.
I'm a few weeks late on submitting this, but I thought it was a delightful blog from Josh Comeau (as is typical of his work). A great intro to using SVG graphics for animations, especially in...
I'm a few weeks late on submitting this, but I thought it was a delightful blog from Josh Comeau (as is typical of his work). A great intro to using SVG graphics for animations, especially in conjunction with CSS and JS. In particular, I liked the marching ants effect with stroke-dashoffset.
Recently added a subtle background to my blog using an SVG generated from Hero Patterns and I really enjoy it. I haven't done anything too deeply with SVGs in general yet though However, I didn't...
Recently added a subtle background to my blog using an SVG generated from Hero Patterns and I really enjoy it. I haven't done anything too deeply with SVGs in general yet though
However, I didn't realize til after the fact how large/complex these pattern inline SVGs are, and I might remove it, because, at least if I toss it into a text editor, the SVG CSS alone is like 95kB which is way too much, considering how I approach my site, which is to be as efficient and small as possible... and I think this is a situation where it's extremely possible even a PNG version would be significantly smaller.
Update: yeah I could use a compressed PNG and get the same result for like 20kB, just tried it since the site lets you download the unstyled SVG (which I then styled in an image editor). I think I might remove altogether though and not use any bandwidth to load a background. At least if I do decide to do it, I can make a much smaller tradeoff.
(I am aware I am a bit extreme in my pursuit of being massively bandwidth-efficient / light on load, for many reasons, including environmental ones and providing access in low-bandwidth situation ones, even just as a middle finger to the bloated web tbh, etc)
For really simple shapes and such like this post is about though, are fine, and very small and handy.
You have a few options to compress things further. For the png, consider if you need the alpha transparency layer. For a tiling background image, you would only need one if it inherits from the...
You have a few options to compress things further.
For the png, consider if you need the alpha transparency layer. For a tiling background image, you would only need one if it inherits from the background-color behind it.
You can also quantize it using a tool like https://tinypng.com/. For a simple shape, you likely don't need high colour resolution. https://squoosh.app/ is another good tool with a little more control. Measure the resulting quality and file sizes.
Consider other raster formats like WebP or AVIF. image-set() is the background equivalent of <picture srcset> (with okay support itself), so you can fallback to the png.
However, I actually suspect the SVG may be better in the end.
Remember that raster images are already highly compressed. You can send an SVG through gzip/deflate and compress it down a lot further (it's just text, after all). Compare the transmission size, not the raw file size.
You can also use a tool like https://svgomg.net/ and try each setting to see if it affects the resulting image. For a simpler shape, you may be able to get away with lower number precision. 95KB seems really big for an SVG, so I'm guessing it includes a lot of superfluous detail you can strip.
Hopefully these tips help you find an optimal solution. As you may be able to guess, I am also a fan of making webpages as small as possible.
Appreciate the suggestions. I do already use compression tools and strip unnecessary alpha layers. I prefer to use long-held standards like PNG over WebP- for many reasons I won't go into detail...
Appreciate the suggestions. I do already use compression tools and strip unnecessary alpha layers. I prefer to use long-held standards like PNG over WebP- for many reasons I won't go into detail about.
I will check out the possibilities for SVG, and yeah I should inspect the transmission size rather than the raw inline SVG CSS. It's possible my bloghost is already gzipping resources it serves, if not this will wait until I make the move to static pages.
I also suppose instead of inlining I could just use the SVG as a background image the same way one would any other image type
Yes, I would definitely link the file over inlining it. It'll cache between page loads that way, and the browser can continue building the DOM while the background image is queued in a separate...
Yes, I would definitely link the file over inlining it. It'll cache between page loads that way, and the browser can continue building the DOM while the background image is queued in a separate thread. Modern web servers support multiplexing which really mitigates any overhead from a network request, so you're going to come out ahead that way unless it's a really tiny asset.
Wow, this is really amazing! Not only because SVGs are cooler than i guess i gave them credit for...but, the way the author writes is really quite effective from an instructional perspective!...
Wow, this is really amazing! Not only because SVGs are cooler than i guess i gave them credit for...but, the way the author writes is really quite effective from an instructional perspective! Really quite brilliant, and so easy to follow! My days of web design are behind, but wow, these kinds of tutorials would have really helped back in the day!
Josh has now posted the promised follow-up on using paths inside SVGs. I also found it quite informative. https://www.joshwcomeau.com/svg/interactive-guide-to-paths/
Josh has now posted the promised follow-up on using paths inside SVGs. I also found it quite informative.
The design work on this page is really incredible. I particularly liked the fonts he used in his code examples. I may end up stealing them.
Wow, this is incredible. I've been blown away with how versatile svgs are lately. Being able to design something in Illustrator, upload it to the web, edit and extrude the shape in Blender - it's a dream.
I’m sure this is just an ambiguity of language thing, but SVGs have always been useful. Even before the standard was codified we were using vector drawing techniques in cool ways. Vector fonts, for instance, is the foundation for digital typesetting for many good reasons.
Hah, yeah "lately" implied more about my recent use of them than their long history. Glad that I finally boarded the train, though.
I was following a tutorial that had me ask an LLM to create some css for me. I was curious what it would come up with, so I dumped the request into Claude along with my html template.
The design it can't up with was pretty typical of what's popular right now, but what stood out to me was that it included a moving background image that was an svg, defined inline with the css instead of as a link. I didn't even know you could animate svgs before that.
Wow, and yeah that surprised me too when updating my knowledge of how versatile SVGs are (have become?) as a tool embedded in markup.
Wasn't it possible to create shapes in HTML back in the day? I'm no coder, so what's new about the versatility of SVGs? That they can be manipulated more than old HTML shapes?
You can create shapes using the html canvas. I never got around to learning how to do that, it looks like you have to also use JavaScript.
What I do know about svgs is that they aren't supported without plugins in react, a program that is used for creating websites. I think that's why I never really dug into them, I mostly used react for a long time and none of the projects used svgs.
What do you mean about them requiring plugins in React? In the past I've written svgs in React JSX by just using the associated nodes. I more-or-less just copied in the contents of an svg made by an artist on my team and tweaked it a little to support some parametrization, but all in rather plain React.
The times I tried it, I had to install a plugin for the svg files to work at all, they otherwise showed a broken image. Possibly things have changed since then, it has been a few years.
There's a library for adding svg support in React, though that doesn't mean much. I've yet to see anyone win at the game of "guess the name of a package not in npm".
I find the assertion they are unsupported to be misleading. They're supported just as well as any other HTML element. I've used them for years without plugins. It would be unfortunate if anyone, especially newer users of React, came away thinking that it lacks svg support or needs these plugins.
What you can't do is the exact thing that plugin is doing without it or equivalent code, but frankly I think that's a very strange use case and thing to do. I get why they're doing it, but I don't think that not having explicit support for an edge case that I'd personally discourage using in production constitutes being unsupported. "Load and inject into the DOM this file defined at runtime" isn't really a feature of any frameworks I'm aware of, and probably shouldn't be because it's a security footgun.
I'm a few weeks late on submitting this, but I thought it was a delightful blog from Josh Comeau (as is typical of his work). A great intro to using SVG graphics for animations, especially in conjunction with CSS and JS. In particular, I liked the marching ants effect with
stroke-dashoffset.Recently added a subtle background to my blog using an SVG generated from Hero Patterns and I really enjoy it. I haven't done anything too deeply with SVGs in general yet though
However, I didn't realize til after the fact how large/complex these pattern inline SVGs are, and I might remove it, because, at least if I toss it into a text editor, the SVG CSS alone is like 95kB which is way too much, considering how I approach my site, which is to be as efficient and small as possible... and I think this is a situation where it's extremely possible even a PNG version would be significantly smaller.
Update: yeah I could use a compressed PNG and get the same result for like 20kB, just tried it since the site lets you download the unstyled SVG (which I then styled in an image editor). I think I might remove altogether though and not use any bandwidth to load a background. At least if I do decide to do it, I can make a much smaller tradeoff.
(I am aware I am a bit extreme in my pursuit of being massively bandwidth-efficient / light on load, for many reasons, including environmental ones and providing access in low-bandwidth situation ones, even just as a middle finger to the bloated web tbh, etc)
For really simple shapes and such like this post is about though, are fine, and very small and handy.
You have a few options to compress things further.
background-colorbehind it.<picture srcset>(with okay support itself), so you can fallback to the png.However, I actually suspect the SVG may be better in the end.
Hopefully these tips help you find an optimal solution. As you may be able to guess, I am also a fan of making webpages as small as possible.
Appreciate the suggestions. I do already use compression tools and strip unnecessary alpha layers. I prefer to use long-held standards like PNG over WebP- for many reasons I won't go into detail about.
I will check out the possibilities for SVG, and yeah I should inspect the transmission size rather than the raw inline SVG CSS. It's possible my bloghost is already gzipping resources it serves, if not this will wait until I make the move to static pages.
I also suppose instead of inlining I could just use the SVG as a background image the same way one would any other image type
Yes, I would definitely link the file over inlining it. It'll cache between page loads that way, and the browser can continue building the DOM while the background image is queued in a separate thread. Modern web servers support multiplexing which really mitigates any overhead from a network request, so you're going to come out ahead that way unless it's a really tiny asset.
Wow, this is really amazing! Not only because SVGs are cooler than i guess i gave them credit for...but, the way the author writes is really quite effective from an instructional perspective! Really quite brilliant, and so easy to follow! My days of web design are behind, but wow, these kinds of tutorials would have really helped back in the day!
Josh has now posted the promised follow-up on using paths inside SVGs. I also found it quite informative.
https://www.joshwcomeau.com/svg/interactive-guide-to-paths/