Color is pretty good for separating things. That's what your basic pie chart is, isn't it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.
When you use a bit of inline
<svg> and you don't set
width, but you do set a
viewBox, that's a fitwigoo. I love the name.
The problem with fatwigoo's is that the
<svg> will size itself like a block-level element, rendering enormously until the CSS comes in and (likely) has sizing rules to size it into place.
It's one of those things where if you develop with pretty fast internet, you might not ever see it. But if you're somewhere where the internet is slow or has high latency (or if you're Karl Dubost and literally block CSS), you'll probably see it all the time.
I was an offender before I learned how obnoxious this is. At first, it felt weird to size things in HTML rather than CSS. My solution now is generally to leave sensible defaults on inline SVG (probably icons) like
height="20" width="20" and still do my actual sizing in CSS.
I recently did an experiment where I created the same vector illustration in three different applications, exported the illustration as SVG in each application, then wrote a post comparing the exported code.
While I loved the banter and insights that came in the comments, I was surprised that the bulk of conversation was centered on the file size of the compiled SVG.
There are a number of ways to export graphics from Illustrator. Some of them aren't particulary useful (Save As), some of them don't support SVG (Export for Web), some of them produce good output but have limited options that don't allow preserving space around the art (Export As). The only way to output SVG preserving the space around the art is export the artboard itself, which is only an option under the Export for Screens area.
I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many articles and talks have been written about over the past few years, but somehow don't get used that much in the wild - the likes of CSS Grid, custom properties, blend modes, and even SVG.
SVG was used in order to create the irregular images that appear as if they were glued onto the page with the pieces of neon sticky tape. This article is going to explain how to recreate that in the simplest possible manner, without ever needing to step outside the browser. Let's get started!
<svg viewBox="0 0 100 100"> <text> <tspan class="line-1" textLength="100" x="0" y="1em" font-size="20"> The Cat </tspan> <tspan class="line-2" textLength="100" x="0" dy="0.9em" font-size="20" lengthAdjust="spacingAndGlyphs"> in the </tspan> <tspan class="line-3" textLength="100" x="0" dy="0.9em" font-size="35"> Hat </tspan> </text> </svg>
SVG offers the
<tspan></tspan> tag. While it functions a lot like a normal
<span></span> in HTML, it accepts attributes that unlock powerful text-shaping capabilities.
One of those attributes is
textLength. If we set this to
100, then the text wrapped in
<tspan></tspan> will be forced to the full length of the SVG container.
I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos.