Intro to Writing SVGs

Brad's Deals - 640 N. LaSalle St., Suite 460 Chicago - View Map Girl Develop It Chicago
Thu, Sep 17, 2015, 6:15 PM (CDT)

About this event

Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics.

Using these graphics over traditional images on the web has many benefits. They can consist of paths, shapes, and/or text that are able to be scaled and resized without losing image quality (it’s a beautiful thing!), which lends well to responsive logos and icons.

Inline SVG refers to the embedded code written to generate these graphics in the browser. This gives you complete access to all the individual parts of a graphic, allowing for some super neat animations and straightforward editing. Styling can then be done within the the SVG code itself or using CSS.

Upon taking this course designers, developers, and anyone knowing a thing or two about HTML/CSS will have the base knowledge needed to get started writing SVG and better understand its overall behavior through some hands on practice (with basic shapes and fruit images!).

Course Roadmap:

We’ll start by reviewing what SVG is exactly, different ways to use it, and what it means to write them.

Next we’ll dive right into SVG document structure and how to code basic shapes directly in the browser, which will lead us to review the SVG workspace (viewBox, viewport) in more detail.

Fills and strokes describe the outline and fill color of these graphics and there are a lot of details that can be defined within these properties to make sure our graphics render exactly as we intended on the screen.

We’ll conclude this course by touching on SVG text and some different properties that can help us customize this incredibly handy and useful feature as much as possible.

Tech Requirements:

-Basic knowledge of HTML and CSS; no need to be a career designer, developer, or illustrator!

-Your laptop.

-A modern browser such as Chrome.

-A text editor and/or ready to use CodePen (yes!)

Cost: $30

No shows: your course fee will be donated to the chapter scholarship fund. 

Date: Thursday, September 17th from 6:15 - 9 PM

Location: Brad's Deals, 640 N. LaSalle

Light snacks and drinks will be provided by the generous folks at NowSecure!

A limited number of scholarships are available for those with a financial hardship. To apply, click here. Do not RSVP for the event. The deadline to apply for a scholarship is September 1st. Scholarship applicants will be notified shortly after the deadline. Class capacity does not impact scholarship students.

About the teacher:

Joni Trythall (aka Joni Bologna) is a designer at NowSecure, teacher with GDI Philly, and author of SVG and CSS tutorials on SitePoint, Designmodo, and her personal blog. She published a book last year, Pocket Guide to Writing SVG, that is now free and open source.

When not drawing fruit you can find Joni knitting scarves or planting squash...or thinking about how it would be cute to illustrate a squash wearing a scarf.

She hopes you are as jazzed up as her about scaling some fruit graphics!

Sponsor: NowSecure

Host: Brad's Deals

Brad’s Deals is a curated guide to the best shopping deals used by over 10 million consumers. We level the playing field and reduce the noise in people’s lives to give them back time, save them money and help them to be better consumers. We’re focused on solving really cool problems, like scaling out a service that is doubling in traffic every year, building an engaged community of avid deal seekers, defining the future of retail on mobile, and processing huge amounts of data to deliver the most relevant content to the right people, in the right channel, at the right time. 

If you are interested in being a teaching assistant for this workshop, please contact Paige through Meetup or via email. TAing is a great way to practice what you know and to get to know members of our community. 

All attendees, including staff and volunteers, are expected to abide by the Girl Develop It code of conduct


Thursday, Sep 17
6:15 PM - 9:15 PM (CDT)


Brad's Deals
640 N. LaSalle St., Suite 460 Chicago