The Best Way to Create SVGs from Existing Artwork

I feel like SVG should be 'our thing' in 2016.

In purely technical terms, we know how to make it work in most modern browsers.

It's also ridiculously well-suited to the web, giving us tiny file-size, crisp edges and almost infinite scalability. In fact, Google has been indexing SVGs since 2010.

Mainstream graphics apps such as Illustrator, Sketch and Inkscape are getting pretty good at outputting efficient, 'web-ready' SVG graphics.

So, why isn't SVG dominating?

Perhaps the main sticking point for many of us is the long legacy of pixel graphics we drag behind us. Decades of JPGs, PNGs and GIFs. The idea of converting all those logos, icons, diagrams, graphs, charts and who-knows-what-else into a vector format is enough to give most of us a headache.

Converting Pixels to Vector

Vector autotrace is not a new concept. I remember getting really excited when Adobe included a separate auto-tracing application called 'Streamline' with my first copy of Illustrator. I could now create new illustrations in seconds!

The excitement wore off.

It soon became clear that Streamline's generated vector files were, at best, a starting point. By the time you'd cleaned, fixed, straightened and re-organized them into something more useful, you had to wonder if it might have been better to start from scratch.

Eventually, Streamline's autotrace function was integrated into the Illustrator core, but the issues remained.

-Smooth letter forms were jaggy. -Right angles were bent. -Extra nodes were added where they shouldn't be needed.

As you can see in this Illustrator 'LiveTrace' example above, elements will almost ALWAYS need to be hand retouched.

This only becomes more important with SVG, where it becomes difficult to attach CSS or JavaScript behaviours to crazily complicated shapes within your SVG.

VectorMagic

I've mentioned VectorMagic in the past, but I find that it's still relatively unknown to most people.

It's been around for a number of years and, the truth is, I'd love to be able to point to an alternative because VectorMagic is pricey.

But on the other hand, I think it's still comfortably the king of pixel-to-vector conversion software.

There are two ways to use VectorMagic. The Desktop edition is the fully-featured edition and it's a one-time $295 payment.

They also offer a browser-based, online version as a subscription service for $8 a month, and I don't think you lose anything significant.

VectorMagic's default settings are very good, but - like most autotracers - they also allow you to customize your level or domain and color palette.

However, it's the smart algorithms that you're paying for. Have a look at the shapes that VectorMagic generated from the same 'Star Wars' banner JPEG.

Vector graphics both look and perform better with fewest possible node points. As you can see, the shapes that VectorMagic produces are sharp, simple and clean, and elements fit together like a laser-cut jigsaw puzzle.

They have some seriously impressive mathematical magic going on, and I don't think anyone else knows how to do it. I have to say it: this is a service worth subscribing to.

Continue reading %The Best Way to Create SVGs from Existing Artwork%

by Alex Walker via SitePoint