Transform your illustration into smart SVG

Bene
Bene
Mar 2, 2015 · 10 min read

In this tutorial, i’ll explain the process of converting a sketch into a smart illustration using a platform called illustrio.

Creative people love sketching. Transforming ideas into drawings can take an idea to the next level. What would my drawing look like if this fish is actually swimming, how would that hair look if it’s curly? Your head bursts with non-static ideas and flows when you look at your sketch. Transforming certain elements in a drawing can give more value to it because it becomes more interesting to look at. The good news is, we can do this and we can transform our sketch into lines and shapes and then into code to have it adapted! Even others can adjust your work to personalize it and have it integrated into a document or presentation. Let’s take a look at all the possibilities we have with the illustrio platform.

I’ll guide you through the process of smart illustration to take it to the next level with code and have it interact with style elements such as color, interactive text, transforming effects and other cool properties.

What is SVG?

Short reminder!

More info about SVG: SVG News

Why use SVG?

Short reminder!


Getting Started

Let’s take a look at a personal project

Ideas resulting in sketches

Import your sketches into Illustrator and vectorize the sketches

Before you begin your sketching, it’s a good idea to have a subject for your illustration work. My project subject here is ‘education’ and i sketched several ideas and elements around this topic to give myself the flexibility to redraw or switch to another sketch while in the process of drawing. In case you’re not satisfied with the result, start another sketch with a different subject and fresh inspiration for the subject will pop-up.

I started my sketches by dividing every item into 3 parts: the first static part or initial state of the element — the second frame of the element in a different state and the last part in the final state.

An example: i started with a schoolbag open, then fruit and food dropping into the schoolbag and the final state is the filled schoolbag closed.

he sketching phase to try out several ideas on graph paper

Starting the Adobe Illustrator vector process from scratch

Vector process

For every individual element use a layer and name the layer accordingly. This way, your work stays organized and it will help you identifying the CSS classes and id names later in the SVG code.

Start by drawing and combining shapes and draw separate elements. Make sure the artwork isn’t too complex as every line of SVG code should be clear later on. Try to keep this rule as a reminder because your illustration can quickly become too complex to have it transformed into a SVG.

Use “align to pixel grid” in the transform panel to make the illustration crisp and sharp

Exporting the Illustration to SVG

Options for SVG

Fill out the options in the SVG Options pop-up panel:

Export options for SVG

TIP: The illustrio’s documentation has a section called How to have a compliant SVG code, use it as a guideline while saving your SVG illustrations.


Introducing the illustrio web platform

Use illustrio to code your smart illustration

  • Scale and move elements
  • Transform objects with rotation, length
  • Change colors
  • Add text input

Apply to become a designer on the illustrio platform and create smart illustrations and gain an income. illustrio is looking for talented designers, apply to become an illustrio.


Get to know the work area

Bring your illustration SVG code into illustrio

Documentation

illustrio has extended documentation

I highly recommend reading the documentation as you’ll need the language into your code

Series and illustrios

Create series

he blank canvas: create a new serie and add a new illustrio

Clean SVG

Export your SVG code into illustrio

Export your SVG code into illustrio and Clean your code

The CSS process

Add the illustrio’s language to your CSS code

Add illustrio’s language to your CSS code

Make sure the SVG group id names or path class names correspond to the names you use in your CSS code (see figures below). Start adding the illustrio’s controls, you’ll use these id and class names to identify the controls.

Make sure the class and id names in the css correspond to the ones in the SVG code
Add color controls, add the id names and assign the initial value
More controls to add interaction to your illustrio

Customize your illustration

Add controls

Use the illustrio’s documentation to guide you through the step-by-step process of customization:

Add controls:

  • Boolean Checkbox
  • Color Picker
  • Slider
  • Text Input

Categories of methods:

  • Color
  • Positioning
  • Styling
  • Text
Make sure you add all the necessary controls

Submit for review

Give names

hit the submit for review button, once your illustrio is ready

My illustrios

Drafs and reviews

Use illustrio’s overview pane to control your illustrio’s

Series

Add more series and illustrios

Create more series and illustrio’s

Apply themes

illustrio’s build-in themes

  • Firefox
  • illustrio
  • Sir yes sir!
  • 80's Monoski
  • Sweden
  • Customize me!
illustrio’s build-in themes
Change the look of the theme inputting different colors and text

illustrio’s galleries

Check out the galleries

Inspiration galleries:

Technical galleries:

These galleries are a work in progress, so come visit to check out the latest additions!

discover illustrio’s galleries

Testing your illustration on the illustrio platform

Test and refine your code

Approval and promoting your illustrations


Bonus

Download illustrio’s interface as SVG code

The code is available for download from CodePen.io

Bene

Written by

Bene

I’m a web- & graphic designer living in Belgium with over ten years of expertise in creating web & print experiences for institutes and companies