Where to learn SVG

For the start of this year I decided to dive deep into designing with SVG files. First starting with tight restrictions on myself:

Daily SVG Shape - a Collection by Michael Gehrmann on CodePen

The Task in my head is summed up something like this:

Create 24 SVGs on Codepen. Restrict yourself to basic shapes and paths. Restrict yourself to a color palette of 5 Colors. Try to get a grip of the syntax of SVG basic shapes and the path syntax. The topic for each day is the number of the day.

Some examples of shapes created in this challenge

After the 24 were done, I started a second daily batch. I lifted the tight rules and gave myself permission to play around with every SVG feature I can find. With Animations in CSS and SVG. With Javascript and much more pug.

#DailySVG #Plus - a Collection by Michael Gehrmann on CodePen

This project is still running. And I learned a lot. Especially about the sometimes funky syntax of SVG. And sometimes about some serious browser limitations.

Some examples from the second daily SVG project

This is a lot of fun. And I learned a lot! I hope this made me a better designer in the end. And I am already getting questions like this one:

And this question is excellent. And in retrospect not easy to answer: Where do you get started as a designer?

Where to start?

I think this one is the hardest. Since SVG and any kind of design are so big topics it is easy to get lost. You look around and get overwhelmed and finally and up with not starting at all. Because there is no clear and logical path with a clear starting point and goal.

The only answer I can give to this question is:

Start anywhere and keep going.

OK. This was the lazy answer. Now some real practical tips:

Get a project

Find yourself a topic and set yourself some limitations. Limitations are the essence of every design. Find a topic you enjoy. Or a color palette you like. Or even something simple like: I use this font and base my designs on a 900px circle in a 1000px square. Some Topic ideas:

1. Create a daily illustration every day with a random color palette
2. Create a daily Icon for a topic you like (e.g. science, nature, food)
3. Pick one of the other daily challenges on the web. There are loads of them

Go public

Codepen is an amazing tool for designing in code. And it has the great advantage, that you can quickly go public with your designs. Showing your work to the world has a great advantage: You want to do better. The world is littered with ugly code examples with misguided colors and fonts. But when you aim for likes and comments you force yourself to do nice ones. You can litter your fill drive and sketch book with thousands of experiments and sketches. You actually need them to get ready. But at the end of the day you should try to have something, that you are proud to present to everyone else.

Design Basics

Read up on some design basics. If I should pic one for a start I’d go for color theory. Color Supply and their free color field guide is a great start: http://colorsupplyyy.com

And the list of available Books about Design and Layout is plainly endless. You can more or less pick one at random.

Get to know tools

“Hey Michael, what tool do I Use for SVG?” my answer is “All of them”. Plain and simple. Software are tools to express your creativity. Every designer develops after a while a workflow he is most comfortable with. But like you wouldn’t say: “This pencil is the only one you’ll ever need” you can’t say “Hey, this software is perfect for everything”. Creativity often happens when you mix and match.

I personally love the Adobe Creative Cloud. Simply because they give you a whole host of tools. Desktop and Mobile. Vector, Raster, Video. All in one interconnected suite. And unlike many open source tools they think like designers.

But this is just me. Download every tool you can get your hands on. Make it run on your machine and simply play around with it. You quickly find out what works best for you.

Don’t shy away from code

Everything you Design digitally becomes sooner or later code Design tools only give you a hint of what is possible. Get yourself comfortable with the source code. Especially for SVG this is extremely helpful. Export your Design as a SVG file and check out the source code.

Then go to codepen and play around with JS, Pug and CSS Preprocessors. You will find quickly, that you can archive amazing things when you get used the syntax and let the computer to the grunt work of placing 10000 shapes in 40 colors.

Code is a design tool! Just like a pencil!

Some Links

This was my basic advice. Now go! Play around!

Well, you need more? Let me give you some Links to the basics of SVG.

Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox…

The SVG `path` Syntax: An Illustrated Guide | CSS-Tricks

Styling And Animating SVGs With CSS - Smashing Magazine

Understanding SVG Coordinate Systems and Transformations (Part 1) - The viewport,

Small Things I've Found While Working With SVG