Scalable Vector Graphics (SVG) can be drawn up in graphics software or hand coded in an editor. In this workshop, we are going to do both! \o/ If your happy place is usually filled with code — and drawing sounds scary — this workshop is especially for you.

“But I can’t draw,” you say…? Sure you can! Because basic shapes and simple lines will do just fine. There is so much we can make without any classic drawing skills, and this is what we want to show you.

Say hello in a comment on this Gist so we can add you as collaborators.

Introduction to some basic shapes in this warm-up codepen.

• Install Inkscape
• File > Document properties > Set page size to 2000 x 500 px
• Play around with rectangles, circles, bezier curves and straight lines
• Save as Plain SVG
• Check out saved .svg in an editor and in a browser
• Look into cleaning up the code with SVGOMG

Your task is to play around with drawing and writing SVG. Have fun! Use this HTML & CSS to get you started. Delete the <polygon> and <path> to add your own mountains, oceans, or perhaps a city skyline? Go for any theme you feel like, or pick from the suggestions.

There is only one rule: Victor Vector. Make him small or large, change his appearance, give him props or animate his arms. But you have to add him somewhere in your landscape.

big city / small town / countryside / seaside and sailboats / under water / over the clouds

a day at the beach / island 🌴 / river / winding road / lone tree / desert 🐪 / on the moon / in space / on a distant planet / up in heaven / down in hell 😈

Bergen / Oslo / New Delhi / Paris / London / Golden Gate bridge / pyramids in Egypt / Antarctica 🐧 / any actual geographic location

Think about if it is… day, night, sunset, cloudy, snowing, winter, summer, or a total abstract fantasy scene with green sky and pink mountains?! Want to recreate a famous work of art?!

Are there some… trees? birds? clouds? famous landmarks? river, road or who knows, maybe an erupting volcano?

• Pocket Guide to Writing SVG by Joni Trythall.
• Intro to using SVG by Chris Coyier.
• Tools to Visualize and Edit SVG Paths by Chris Coyier.
• SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
• SVGOMG is a GUI for SVGO.
• In-depth articles on SVG by Sara Soueidan.
• A Complete Guide to SVG Fallbacks by Amelia Bellamy-Royds.
• SVG element reference on MDN.