My SVG Workflow Needs to Change

My process for create and publishing SVGs on the web is a little cumbersome. The goal of this walk-through is to be able to write a script (Grunt process) that’ll take care of this tedium for me. Feel free to skip the backstory and go right to the script demo at the bottom.

image12
Tools of the Trade icons – 90 x 300px PNGs images

Overview
To start I need an example of images that should be SVGs. As a designer and illustrator, I have these icons that I call my Tools of the Trade on my homepage:

  • A Pencil for sketching – modeled after the Dixon® Ticonderoga #2 (my favorite toy)
  • A Pen for illustrating – modeled after the Stabilo® .88 Drawing Pen
  • A Marker for UX & whiteboarding – modeled after Standard Expo® Dry Erase Marker
  • A Tablet Pen for design – modeled after Wacom® Intuos2 pen

I use them as background images in my header using the class .tooltime (a friendly nod to Tim “The Tool Man” Taylor and Al “The Bore Man” Boreland).

image08image04image05image09

 

What’s Wrong with Images?
My biggest problem with these icons is that they aren’t transparent! Why are they even PNGs?! I could just re-export each one with an alpha channel, but because they were originally designed and exported using Illustrator why not clean them up and improve my design workflow at the same time.

Performance – SVGs instead of images FTW!
I already increased the performance using lazyload (actually LazySizes) taking the total payload of my single page portfolio site from ~4MB to 1mb; A 400% reduction (right?). So how big are these PNGs? Each one is about 3.6kb, plus the network request. I think we should be able to dramatically reduce that using SVG. (In fact we can, it’s only 1.1kb, plus no request).

Creating SVGs – Step-by-Step

1. In Adobe® Illustrator, create a new document that is the desired dimensions, or viewport. In this case it is 90x300px.

2. Open the original artwork, highlight the shapes and paths, copy and paste the graphic into the new document (step 1).

image02

3. Next choose “Save As…” and change the format to “SVG”. Then click “Save”.

image11

4. Next, select “SVG Code…” at the bottom.

5. Highlight and Copy the text in that SVG code dialog window.

image03

6. Visit the SVG Editor from Google: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

7. In the top left Select the SVG icon.

image07

8. Paste the SVG Code from Illustrator into this SVG editor. Then click Apply Changes.

9. Now, Click the icon in the SVG Editor once more and copy the edited SVG code.

10. Open Peter Collingridge’s SVG Optimizer:
http://petercollingridge.appspot.com/svg-editor

11. Paste the SVG Code in the the box and click “Load” button.

image06

12. Choose the level of “Optimisation” (Conservative or Extreme).

13. Download the optimized SVG.

Finishing Steps
Now I’ll rename the SVG from “optimised.svg” to something more meaningful, i.e., tool-pencil.svg. Then upload to my server. Remember, even on the server I can still edit it, add groups, titles, CSS, fill and stroke colors, even animate it because SVG is markup. They are made for customizing. Also, remember original PNG was ~4kb. As an optimized SVG it is now only 1kb.image01

Next Steps
The process for optimizing SVGs isn’t hard, it just requires a few steps and tools. The goal of jotting this process down is because I would like to automate it instead of Copying & Pasting. I think I could build a script to do this. Essentially, saving the SVG right from Adobe® Illustrator that is optimized and ready for the web. Stay tuned for developments and thanks for reading!

Resources

CSS Tricks – Intro to SVG
Chris Coyier. Enough said. Tons of great resources here: https://css-tricks.com/using-svg/

Drawing Basic Shapes
Basic shapes are easier to draw than polygons. So if you find yourself needing a or element use the SVG shape syntax instead. It’s simpler to read and edit.

More Advanced Shapes
If you’re feeling adventurous and want to understand how the and element work, here are a few useful resources that I’ve found to teach you how to edit SVG paths:
http://callmenick.com/post/getting-started-inline-svg

Base64 Encoder/Decoder
Turn your SVGs into Base64 encoded images that you can quickly reference: http://www.mobilefish.com/services/base64/base64.php

Potential Solution
http://svgtutorial.com/optimizing-svg-with-grunt/

Thoughts: Ukaranian Banksy

So everyone knows who Banksy is by now. And you may know that I have a Tumblr dedicated to my love for Pencils (myfavoritetoyis.tumblr.com). But what you may not know is a graffiti artist by the name of Šharik (Ukraine: Little Ball).

His piece below has quickly become one of my favorite ideas, images, graphics and one that I want to blow up as a poster on my wall. It illustrates and illuminates the creative process. Simply put, “My favorite toy is a pencil.”

Sharik - Ukranian Banksy

More of his work can be see here: http://banksysforum.proboards.com/index.cgi?action=display&board=everywhere&thread=1050

Working: Public Media Mantra

Reading up on my long-time design idol, Bob Gill on WYNC I stumbled on a blog post referencing a talk that Hugh Dubberly sat in on as an art school student, which got me thinking. As an art student at the Art Institute of Boston I was privy to a number of influential talks and lectures; artists that AIB had speak and spread their knowledge. In fact, listening to the artists and designers like Malcolm Grear, Steven Heller, Wolfgang Weingart, Vaughan Oliver, Clifford StoltzeCF Payne, Brad Holland, Tim Bower, Sterling HundleyMarshall ArismanAnthony Freda, and Wim Crowel has had a profound impact on me. Just being in the same room, listening to their personal experiences, seeing how they speak and carry themselves, and speak about their own work is one of the most important parts in my education as an illustrator and designer.

One of the designers that I remember speaking to the Design students at Lesley University was Chris Pullman, V.P. of Design at WGBH in Boston for 35 years. His talk was formatted in a simple way. It was titled, “What I’ve Learned” and it listed his top ten lessons learned.

Chris had given this talk to others in 2008, in fact Jason Kottke, who runs a blog, wrote about Chris’ talk. In his post he highlights Chris’ #2 thing: Work with people you like and respect. Chris goes on to talk about the respect and encouragement he received at WGBH which allowed him to stay happy for 35 years.

Perhaps all of public media is like this because all of my colleagues at NPR seem to be gracious, respectful, encouraging and enriching. So, I second Chris Pullman’s second. A sentiment I guarantee everyone of the influential artists and designers that I listed above would agree upon.

Design Process: Apple’s Pony Meeting

When it’s time to redesign a live website, I have found, you are constantly tweaking the current website in parallel with redesigning the new one. In fact, when the question of a redesign comes up the most common response is F*ck It! Let’s start from scratch! This is probably for the best. It was also the impetus for this post.

Having been involved in a number of website redesigns (BostonChefs, City Square Associates, Hamersley’s, Lumiere, Sel de la Terre, StateStreet.com, State Street’s intranets 1 & 2, HealthGAINS, Bubucheek…and most recently NPR Digital Services current site) I have learned a few things. Some of those things I have to re-learn (I am a perma-student if you were wondering).

As a product designer at NPR I am tasked with redesigning interactive products. Not a separate animal from websites, but definitely a different beast since they are tools; tools that people have to interact with everyday. For me this provides a chance to reflect on my own design process and do research on the intertubes for external enlightenment.

One resource that I’ve found to be particularly helpful is Zurb.com. When I interviewed with them this past summer I left more refreshed than I led on. I learned that the folks behind the grossly out-of-date “work” section are incredibly active in the interactive community. In fact, they seem to be ones offering the industry more transparency in their interactive and design process as a whole. (Kudos to those folks in Campbell.) Suffice to say when I have a question, or time to kill, I cruise their links.

During this most recent perusal for ephemeral knowledge around the design process I discovered a term I hadn’t heard before and want to share: Pony Meeting. It is from Apple’s Senior Engineering Manager, Michael Lopp from his presentation at SXSW. I hope to use this in practice someday:

Pony Meeting

This refers to a story [Michael] Lopp told earlier in the session, in which he described the process of a senior manager outlining what they wanted from any new application: “I want WYSIWYG… I want it to support major browsers… I want it to reflect the spirit of the company.” Or, as Lopp put it: “I want a pony!” He added: “Who doesn’t? A pony is gorgeous!” The problem, he said, is that these people are describing what they think they want. And even if they’re misguided, they, as the ones signing the checks, really cannot be ignored.

The solution, he described, is to take the best ideas from the paired design meetings and present those to leadership, who might just decide that some of those ideas are, in fact, their longed-for ponies. In this way, the ponies morph into deliverables. And the C-suite, who are quite reasonable in wanting to know what designers are up to, and absolutely entitled to want to have a say in what’s going on, are involved and included. And that helps to ensure that there are no nasty mistakes down the line.

from Apple’s Design Process posted by Helen Walters on March 8, 2008

 

Illustration: 1969 Chevy Chevelle

Classic Muscle with a Twist

Finally finished this for my business partner, Austin. I used a slightly more elaborate technique on this piece, which is detailed below. On this piece, I used a process that I can legitimately call “mixed media” because of all the media used. Tools used: Pencil, Photoshop, Pen, Waterpen, Conté Crayon, Kneaded Eraser and a Razor Blade.

 

 

The New Process

  1. I sketched the car and found the perfect reference photo.
  2. Placed the reference in Photoshop
  3. Manipulated the image to my liking and
  4. Printed out three blue copies (at a very low opacity).

This is Where “The Process” Gets Fun.

  1. I sketched with my Stabilo Point 88 fineliner pens on the 3 blueprints and scanned in each blueprint.
  2. I then placed them on top of the already created blueprint in Photoshop so the just lines showed though.
  3. Then I began to add the textured/brayer background — as is typically seen in my work — and perfected the colors for print.
  4. Finally I cut the watercolour paper and print out the illustration on 140# Somerset color-pressed white. (It can go through an inkjet, but it has some tooth to it and most importantly it is durable.)

 

The Deviation

  1. After running the print through the printer twice, to saturate the colors, I grabbed my same drawing pens and began redrawing some of the lines that needed more clarification.
  2. Noticing my watercolor pens I grabbed my waterpen and began painting around the subject of the illustration. This produced a very unexpected product
  3. After adding a few more black lines I grabbed my white conté crayon and drew in the highlights.
  4. Once the highlights were done, I noticed a few globs of ink from the printer on the work so I took out my razor blade and scratched away in a very light way a layer of the paper at a time.

 

This new process of using the watercolor brush and conté crayon along with a kneaded eraser really improved the organic feel of the piece. In fact, the whole thing ended up having a pastel-like quality, which was my medium of choice in college because I wanted to be the next Gary Kelly (that’s why I sign my “E’s” like Kelly does. Below is the signed and framed result.

 

Tech Bits: Google+ Hangouts

I am always interesting in what makes something different—I know I’m not alone here, but stay with me—and this seems to be the key to why Google’s new social network is not Facebook…as of today:

“The video chat feature might be one of the most interesting aspects of Google+. Gundotra and his team thought about why group chat hasn’t become a mainstream phenomenon. He compared it to knocking on a neighbor’s door at 8 p.m. — most people don’t do it because it isn’t a social norm. However, if a group of friends are sitting on a porch and you just happen to walk by, it’s almost rude not to say hi.

That’s the concept behind “Hangouts,” Google’s new group chat feature. Instead of directly asking a friend to join a group chat, users instead click “start a hangout” and they’re instantly in a video chatroom alone. At the same time, a message goes out to their social circles, letting them know that their friend is “hanging out.” The result, Google has found in internal testing, is that friends quickly join.”

via Mashable