Transform your illustration into smart SVG

What is SVG?

Short reminder!

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
he sketching phase to try out several ideas on graph paper

Starting the Adobe Illustrator vector process from scratch

Vector process

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

Exporting the Illustration to SVG

Options for SVG

Export options for SVG

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

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 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

  • Boolean Checkbox
  • Color Picker
  • Slider
  • Text Input
  • 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

  • Analytics
  • Artwork & inspirations
  • Fish sector series
  • Flat & sleek food serie
  • Homepage
  • Petroleum sector series
  • 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
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

Support

Feedback

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bene

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