User Experience Designer | louithefifth@gmail.com

This is a tutorial for how to quickly make interactive prototypes with SVGs (OMG! SCALABLE). This is useful because you don't have to slice multiple PNGs or spend time coding each element in HTML. In this example I've chosen to make a toggle switch.

I've shamelessly combined these two great blog post written by Tom Germeau and Todd Motto for this tutorial.

1. Create assets in Sketch (Illustrator will also work) [wpvideo efdSnNrf] Here I did not need to hide the orange background because I simply manipulate the opacity of the front layer. If you need to do so, hidden layers can be made visible in the code later.

2. Name layers to reflect HTML 'id' identifiers
When the file is export as svg, you can open the file in a text editor and you will see that your layer names populated into html id tags.

If you're attempting to use JQuery in this tutorial you'll quickly find out that it will not work. That is because SVG/VML files are out of scope for jquery. This article explains this step in more detail: Link Here I added some functions that will help me traverse CSS classes with svg elements.

7. Run SimpleHTTPServer
In your terminal you need to type 'python -m SimpleHTTPServer portNum'. If you don't specify a port number it will default you to port 8000.