Transform your illustration into smart SVG

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!

SVG stands for Scalable Vector Graphics and SVG files are text files with XML inside. Visual information in an SVG file is defined by human-readable code, which is then calculated and rendered by your browser or graphics software.
SVG files are infinitely flexible. They can be altered manually in a text editor. They can be altered by code, such as JavaScript and CSS. They can be compressed to small sizes.

Why use SVG?

Short reminder!

Because SVG is dynamic, it can be controlled using Javascript and CSS. SVG is a web technology that’s adopted by modern browsers. Because SVG is smart, illustrations can be manipulated to show different states and variations. This way, we don’t need different images to display different states. SVG can also handle text and give designers the possibility to display relevant information with the illustration, for example indicators. SVG can also be bundled into 1 SVG sprite reducing the data load for a screen.

Getting Started

Let’s take a look at a personal project

I did some sketch work for educational purposes and sketched students, a school, teachers and other elements.
Below i show some of the initial sketches that were scanned and placed into a vector program, I use Adobe Illustrator (other software is Sketch, InkScape, …). These sketches were traced into vectors with the Pen Tool. You have other options with the Image Trace command but that is beyond the scope of this tutorial (google it, you’ll find plenty of great tutorials). Using the Pen Tool, you’ll have full control of the vector points to alter, in this case i recommend using this process.

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

Once your sketch is scanned and imported into a vector program, make sure to place it on a separate layer and lock the layer.

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

Once you have a stroked and filled shape illustration/icon, make sure that your artwork is saved before exporting it to SVG. In Adobe Illustrator, choose File > Save a copy and choose SVG in the drop-down menu with file extensions. It can be a bit confusing not to use the File > export command.

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

illustrio allows you to add a layer of styling and customization on top of your SVG illustrations. Its language structure is heavily inspired by Sass, an extension of the CSS language. If you know CSS, you’ll master illustrio’s language in no time.
The first step will be to export your vector in .SVG format. Next, you can add some CSS-like coding variables. The functions allow you to:

• 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

Log in to the illustrio platform and get to know the work area. Make sure you have the SVG code open in a text editor before starting the illustration process in illustrio.

Documentation

illustrio has extended documentation

Best start your illustrio’s process by reading the documentation as the illustrio’s language will be needed into your code. Illustrio’s forum is also a great place to start reading about designers’s experiences with the platform.

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

Series and illustrios

Create series

It’s a good idea to start by creating a serie of icons/illustrations. Creating a serie will give more value to the illustrations and inspiration to potential users of your work.

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

Clean SVG

Export your SVG code into illustrio

Once your illustration is ready for SVG export, select the SVG code in a text editor and copy it into the illustrio’s SVG code pane and paste it here. Click the Clean SVG button to clean up your SVG code. Clicking this button will adjust your code so that your work is aligned, zoomed and centered in the work area of the editor. It will exclude overhead code an align the code correctly. Once this code is cleaned, the CSS process in the right pane can start.

Export your SVG code into illustrio and Clean your code

The CSS process

Add the illustrio’s language to your CSS code

Add variables to your CSS code to control the 3 main colors of your illustration: use logic class names like main color, highlight color and additional color.

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

Once your illustrio’s code is correct, you’ll have unlimited freedom to add interaction to it. Make sure you have your initial idea with you because you’ll soon have too many options to interact with the illustration and forget what the initial purpose was. Adjust the color controls (with the 3 colors), decide whether you want a stroke and define the stroke with a slider control to limit the amount of stroke, will your illustration have transformations or interactive text? Will some elements be hidden or shown, let the user decide. Test here and add the controls to the code until you are happy with the result.

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

Make sure to give your illustrio a name and add it to a serie. Save your illustrio and once you decide it’s finished and ready for publication, hit the submit for review button.

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

My illustrios

Drafs and reviews

Once your illustration work is added to illustrio, you can overview your work by selecting the “My illustrios” in the left pane of the interface. You will get an overview with the name of your illustrio, the series to which they belong to, when it was last edited, if it was accepted by illustrio’s staff and the status.

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

Series

Add more series and illustrios

Once you are acquainted with the process of illustrio, you can start building your series and have additions to it. Expand your series over time with more illustrio’s and submit them for review.

Create more series and illustrio’s

Apply themes

illustrio’s build-in themes

illustrio has custom build-in themes to apply a custom look to a complete series of icons or illustrations. You can choose between 5 themes or create a theme yourself: give it a name and 3 colors: main, highlight and additional and save this theme. You can apply it to every series you create.

• 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

In the galleries, you can discover several adjustable and great smart illustrations, the galleries are divided in 2 main categories: the inspiration galleries and the technical galleries with these subcategories:

Inspiration galleries:

• Analytics
• Artwork & inspirations
• Fish sector series
• Flat & sleek food serie
• Homepage
• Petroleum sector series

Technical galleries:

• Fill, Fill-Shade, Fill-Hue, Fill-Sat
• Move-X, Move-Y
• Opacity, Fill-Opacity, Stroke-Opacity, Visible
• Rotate, Rotate-Anchor
• Scale-X, Scale-Y, Scale-Anchor
• Stroke, Stroke-Shade, Stroke-Hue, Stroke-Sat, Stroke-Width, Stroke-Linecap
• Stroke-Length, Stroke-Offset
• Text-Content

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

I recommend testing the code of your smart illustration on the illustrio platform and look for any potential malfunction or inconsistency. Help improve the quality by making sure that every line of code is correct and that the overall illustration works fine.

Approval and promoting your illustrations

Once your illustration is approved, it’s time to promote your work! Explain the illustration on other platform (Dribbble, Behance, …) so that users understand the purpose of the illustration. An even better way is to actually use your illustration in a real world environment, like a presentation or slideshow to provide potential users with the added value of your illustration

Bonus

Download illustrio’s interface as SVG code

As a bonus, i provide you with the SVG code of the illustrio’s interface. You can use it to paste your illustration idea. The code is available for download from CodePen.io

The code is available for download from CodePen.io

Support

Feedback

I hope you enjoyed this tutorial. If you have questions, suggestions or remarks, please do not hesitate to contact me. Thank you!

References

• Saving SVG Files in Adobe Illustrator by Mat Helme
• The ultimate guide to SVG
• SVG workflow for Designers by Dan Mall
• Tips for Creating Accessible SVG
• Exporting SVG for the web with Adobe Illustrator CC by Michaël Chaize