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:
A Doodle a Day keeps Doctor away. Playing with SVG and Color Schemescodepen.io
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.
The Training Wheels are off! After working through the basics of SVG Shapes I take the deep dive in. Symbols, Patterns…codepen.io
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.
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:
- Create a daily illustration every day with a random color palette
- Create a daily Icon for a topic you like (e.g. science, nature, food)
- Pick one of the other daily challenges on the web. There are loads of them
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.
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!
This was my basic advice. Now go! Play around!
Well, you need more? Let me give you some Links to the basics of SVG.
The SVG viewBox attribute is easily one of SVG's most powerful features. Mastering this attribute can take your SVG…sarasoueidan.com
The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other…css-tricks.com
Sara Soueidan explains how to export and optimize SVGs, how each one affects the styles and animations applied, and…www.smashingmagazine.com
This is the first in a series of three articles covering the topic of coordinate systems and transformations in SVG…sarasoueidan.com