Details

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.

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 ([masked]). TAing is a great way to practice what you know and to get to know members of our community.