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 over the other pretty clear.
- A little flat-color icon? That's clearly SVG territory.
- An interactive console-like game? That's clearly canvas territory.
I know we didn't cover why yet, but I hope that will become clear as we dig into it.… Read article
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), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular.
What if you have a sprite, and you wanna see what's in it?… Read article
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 a straight rectangle. Or you have a large uniquely shaped logo where you only want that unique shape to be clickable. Or you have an interactive image that responds differently when different regions of it are clicked.
You can surround … Read article
There was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren. But... the pictures aren't actually selfies because they are taken by someone else. The article has this hilarious line of text that wiggles by on a curved line as you scroll down the page.
Let's look at how they did it.… Read article
I find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates of things in the SVG code. Hey, I've even got a book about all that.
But once in a while, it's appropriate, and maybe even a little bit fun. In this case, I wanted to draw a pretty specific line with a couple of … Read article
Weekly Platform News: Preventing Image Loads with the Picture Element, the Web We Want, Svg Styles Are Not Scoped
In this week's week roundup of browser news, a trick for loading images conditionally using the picture element, your chance to tell bowser vendors about the web you want, and the styles applied to inline SVG elements are, well, not scoped only to that SVG.
Let's turn to the headlines...… Read article
I’m in love with SVG. Sure, the code can look dense and difficult at first, but you’ll see the beauty in the results when you get to know it. The bonus is that those results are in code, so it can be hooked up to a CMS. Your designers can rest easy knowing they don't have to reproduce an effect for every article or product on your site.
Today I would like to show you how I came up … Read article
Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should work with clicks and taps, too. Without that, you've broken the menu for anyone without a mouse. That doesn't mean you can't also use
:hover. When you use a hover state to reveal more content, that means an un-hovering state needs to hide them. Therein lies the problem. … Read article