If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only few seconds and reduces your file size a …
A little open-source utility from Tyler Sticka that returns a data URL of an SVG to use as an image placeholder as needed.
I like the idea of self-running utilities like that, rather than depending on some third-party service, like placekitten…
When drawing lines with SVG, you often have a <path></path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that the entire stroked …
We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.…
There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: …
This demo from Jérémie Patonnier is incredible. Make sure to look at it in Firefox because some Chrome bug apparently prevents the entire thing from working.
The big idea is that the entire demo is one <rect> element. That’s it. …
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg"/>). And you can embed CSS within an SVG with a <style></style> element. That CSS can use a perfers-color-scheme media query, and …
I find myself web searching for some tool by Yoksel at least every month. I figured I’d list out some of my favorites here in case you aren’t aware of them.…
SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one …
I think of an SVG sprite as this:
<svg display="none">
<symbol id="icon-one"> ... </symbol><symbol>
</symbol><symbol id="icon-two"> ... </symbol><symbol>
</symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>I was long a fan of that approach for icon systems (<use></use>-ing them as needed), …
Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as …
