SVG

Saving SVG with Space Around It from Illustrator

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.

Glue Cross-Browser Responsive Irregular Images with Sticky Tape

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!

(more…)

Text Lock-Up

<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.

(more…)

Snap Animation States

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you're interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support, there's never been a better time to start working with SVGs. Snap Animation States is a JavaScript plugin built around Snap.svg to help create and extend icon libraries with scaleable, editable SVG icons. Snap Animation States makes it easy to load and animate those SVGs with a simple schema.

(more…)

Shape Morphing Icons in Button on Click

The idea here is use an SVG icon in a button and swap that icon out for another when the button is clicked. A button click often suggests an action has been taken, so switching icons can be a nice UI touch to show the change in context and confirm that the action has happened.

A possible use case could be a download button. The icon in the button might initially indicate that the button will trigger a download but change to a checkmark when the button has been clicked.

(more…)

Adobe Illustrator Export Options

This is less of a snippet and more of a reminder for something I look up often. When creating SVG files in Adobe Illustrator, there are a couple of different methods for exporting the files. Both methods include a handful of options, some of which I totally forget what they mean and what to select.

(more…)

SVG Patterns

The SVG <pattern></pattern> attribute allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like:

  • Define a <pattern></pattern> inside of the SVG
  • Define the shapes inside of the pattern
  • Use the shapes
  • Create a new shape and fill it with the pattern

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag