I've been playing around with Inkscape for the first time this weekend. It's been fun and I've managed to get some good results really quickly. Here's my 101 intro to Inkscape! From one beginner to another beginner!

I've always wanted to be able to create my own SVGs but the barrier to entry has always felt too high - as soon as we start having to deal with bezier curves I feel like I'm way out of my depth. This weekend, I finally bit the bullet and downloaded Inkscape, and discovered that it's actually really straightforward to get good results and you don't have to get bogged down with math. Sharing's caring (and I wanted to write notes) - so here's some of the things I have learnt.

Art by Inkonic from the Inkspace home page - I wish I could draw this well!

Keyboard Commands > Interface

There are a lot of options in Inkscape - it's obviously very powerful. I've been using keyboard shortcuts as much as possible as it's easier to navigate than multiple menus. So a lot of the advice here revolves around which keys to use.

Zooming In

So I loaded Inkscape and the first thing that struck me was my canvas was really far away! I couldn't see anything. The usual keyboard shortcuts I'd use in other programs didn't work. It was clear I was going to have to learn new ones.

• By far the most useful, pressing z + 5 zooms the canvas to fit your window size - so you can see everything in one go.
• z + + zooms in and z + - zooms out.

Drawing Something

If you want to draw a circle (press e for ellipse) or a square (r for rectangle) there are some nice, easy to understand tools to help you do that. But if you want to draw a custom shape, you're going to need to work with paths.

The pen tool (keyboard shortcut b) help you draw paths and selecting the "BSpline path" option from the top "Move" menu means you can click away adding as many nodes as you want without having to worry about your curves. The tool will do it's best to smooth out your lines for you letting you just worry about where your shape is going. Double click or hit enter to finish the path.

It'll probably look a little rough if you've used a lot of nodes and you may want a more curved look. Once your path is finished you can hit command/ctrl and l to simplify your path which has a nice side effect of making your path look more natural!

Transform

Within Inkscape, you can scale and rotate your paths and objects. Hitting shift, command/ctrl and m will bring up the transformation panel. I guess m stands for matrix?

It's a bit weird compared to changing values in CSS or other tools - once the transformation is applied, you need to think from zero again as all future actions are additive. For example, in CSS if I wanted to rotate an element I'd use 90deg, and to change it I may update it to 105deg. In Inkscape if I originally did 90deg and wanted the same change, I'd need to apply 15deg to get the same result.

To get a better idea of positioning on your page, View > Page Grid is a nice way to get a grid and then you can line things up.

Symmetry

There's a few ways to achieve symmetry in Inkscape.

There is a mirror symmetry mode where you can mirror your path. As a beginner, I've struggled a bit with this when it comes to placement.

Instead, I've had better success with Duplicate (command/ctrl + d). Once you have a clone, pressing h will horizontally flip your selected object, and v will vertically flip it.

Once you've duplicated, mirrored your path and moved it in to the right place you'll probably be left with some sharp bits where the two objects meet. Inkscape has a really nice tool to help with this.

First, select the Node tool (keyboard shortcut n) and shift and select both paths. Then shift select the end node of each path that you would like to join. There press the 'Join selected nodes' menu item in the top menu. This will join your paths and smooth them out.

In case mirror symettry is your thing, you can try this by going to Path > Path Effects, add Mirror Symmetry effect and then Path > Object to Path to convert it to a path.

Cropping

Once you have made your image, you can reduce the size of your viewport by selecting your objects and pressing shift, command/ctrl + r, or go to the Edit menu and hit "Resize Page to Selection".

Exporting a Single Layer

By default, Inkscape will save your SVG with all the layers you've created - even the hidden ones. Which is good - you probably wanted them for later.

But when you do only want to keep certain objects, in the Layers panel select the layer you want to export and all the objects in that layer. Go to File > Export (or shift, command/ctrl + e) and choose the 'Selection' tab. Tick the box that says "Exported Selected Only", choose "Plain SVG" as the file format and then hit "Export". You can SVGOMG the results for smaller file sizes.

We're Just Getting Started!

I hope you've found these tips useful. I'm going to continue playing around with Inkscape, so if there's any useful beginner tips you think I should know - please drop me a message!