The Road to SVG and Custom Elements in Clarity Icons

Another day, another design system deciding an SVG icon system is the way to go.

Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, scale, and the future. Based on these, they actually ended up on a custom element (<clr-icon>, which is inline <svg> under the hood), just like Etsy.

Etsy’s Evolving Icon System

Etsy moves away from an icon font in production to using SVG. It's going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use.

Two cents:

  • I could see the need for that abstraction going away if we had a more convient syntax for <use> available, like: <svg use="icons.svg#cart" />
  • I like how dedicated they are to icon consistency. I struggle with this a lot. An SVG icon process can be so easy to work with, and new icons so easy to find and drop in, that consistency can suffer. That grid, with the examples, is gold.
  • They are still building an icon font as part of the build process, for the designers to use in design software.

That last one is surprising to me, as I would think it would be a pain in the butt to find the right icon to design with when the one you need is assigned to some random character in the font. I would think the concept of "Symbols" in Sketch or Illustrator would make the way to make those icons super easy to find and use for designers. Which makes me think what the font actually has to offer is interoperability between design software. I wonder if software like Lingo or Iconjar would be helpful here.


Varun Vachhar:

A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.

An amazing contribution to this open source project would be to make all those points draggable, and then be able to spit out the newly adjusted code.

Also, weren't browser extensions on their way to being interoperable? Looks like the community group has significant work done.

Cars with Broken Windshield Wipers

I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at the same time, all out-of-sync with each other. Plus a few of them had seemingly kinda broken ones that flapped at awkward times and angles.

What does that have to do with web design and development? Nothing really, other than that I took the scene as inspiration to create something, and it ended up being an interesting hodgepodge of "tricks".


Why Inline SVG is Best SVG

📹 by Glen Maddern:

I don't think most front-end developers are as comfortable as SVG as they should be. It's one of the most powerful technologies available on the web.

He makes a very strong case for inline SVG, which I wholeheartedly agree with. This screen from the video does a nice job of that:

You could do worse in leveling up your SVG knowledge than picking up a copy of Practical SVG.

An SVG That Isn’t All… SVG

SVG is absolutely a vector graphics format. But it's more than that. You can set type in it. You can place raster graphics in it. There is interactivity and animation. It's more like a multimedia graphics format. Over on the Media Temple blog, I walk through the creation of a multimedia graphic to show off some of those possibilities.

See the Pen SVG is a cross-medium format! by Chris Coyier (@chriscoyier) on CodePen.

If we get SVG 2, it'll be even more multimedia with the inclusion of audio, video, canvas, and more.

If you'd like to make SVG more of a part of you day-do-day workflow, and I suggest you do, pick up a copy of Practical SVG.


High five to Dave Gandy and the Font Awesome team:

The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time.

What's do the funders get? 1,000 more icons, icon font ligatures (a uniquely cool thing fonts can do, like turn "right arrow" into ➡, which can be an accessibility win), and, drum roll please, an SVG framework that will be open sourced.

Experimenting with Color Fonts

Over the past couple of weeks there’s been a lot of excitement over color fonts. Adobe describes the technology like this:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Back in March, Roel Nieskens wrote about his experience building a color font and described the problem that they intend to solve:

Typography on the web is in single color: characters are either black or red, never black and red.


I totally forgot about print style sheets

Manuel Matuzovic rediscovers @media print {} styles.

The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo's website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because they wrap all their styles in @media screen {}, or use <link rel="stylesheet" media="screen" href="style.css">. That's fine if you intend to take a "start from scratch" approach to print styles. I generally prefer just not scoping screen styles and using a couple of print-scoped overrides (a "blacklist" instead of a "whitelist").

Manuel pointed out that you can use Chrome DevTools to emulate print media, which is pretty dang useful! Here's a quick video of that:

That screenshot of Indiegogo's site also goes to show how inline SVG (or any images, I suppose) can get a little crazy if you don't include any sizing information in the HTML. That prompted this tip:

Even if CSS does load and size those SVG's correctly, it might be helpful to have them sized approximately correct to begin with, to avoid what Sara Soueidan has dubbed 'Flash of Unstyled SVG'.

Remember that attributes like width and height are extremely easy to override in CSS. Setting them at all in CSS will override them. They aren't like inline styles.

Manuel's article is loaded with 12 other hot tips on things to include in a print stylesheet that you might not think of: preventing orphans, forcing colors to print correctly, displaying otherwise-hidden content, providing alternate content for things that won't print correctly, etc. Couple of other tips here.