What’s Essential to Know about SVG

SVG is a relatively new technology that allows for improved rendering of image-like content. It’s a preferred method for adding artwork to mobile and web apps because it performs faster than traditional jpg and png images.

SVG are essentially vectors – you can increase and decrease their size without losing quality (using code)

SVG are better than icon fonts because: they are image tags, which makes them better for accessibility and they have more controls (e.g., class name).

Apps are built using templates. Here’s how to templatize SVG:
use inline HTML, and wrap the SVG in a DEF tag, as DEF prevents it from rendering. You can use it one time and then point to it in the templates. SVG is rendered in the DOM, so there’s no HTTP request (HTTP requests slow apps down) – then use CSS and JavaScript to make it increase or decrease in size, animate, etc.

1) a PNG might render faster if the SVG has a lot of vector points – thus SVG is more for boxier artwork, such as charts and graphs or logos that don’t contain a lot of complex lines

2) SVG needs fallback support for Android 2 (and IE8)

based on LukeW’s notes from C.Coyier’s lecture:

icon set in this artwork can be found here:

How to Quickly Isolate a Part of an Image Using Illustrator

There are times when we need to isolate a region of an image graphic. We can use a mask in Illustrator to accomplish this in 2 or 3 steps.

For our example, let’s isolate the play icon from the screen grab I took (from proto.io’s website).

1) create a shape that covers the area you want to expose in your artwork

1) let's isolate the play button
1) let’s isolate the play button

2) select that shape, plus the artwork beneath it
2) Create object clipping mask-make
2) With both objects selected, we create the object clipping mask

3) go to the Top Menu, choose Object > Clipping Mask > Make
3) View the masked play button
3) View the masked play button

How to Quickly Vectorize an Image in Illustrator

There are times when we want to work fast and lean, so we grab screenshots of items off the web and plop them into our wireframes. But there are other times when we want a more polished finish. It is during those times that we’ll need Illustrator’s vectorizing abilities to trace images that we want to scale.

Below are directions for using Illustrator’s Trace feature to trace a bitmap image.

1) paste an image into Illustrator
2) with the image selected, go up to the Object menu, then Trace > Make & Expand
3) Voila! Your image is compromised of vectorized parts.