Twin Cities Code Camp

Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor.

This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript.

We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers.

You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.