Intro To Writing SVG

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 or Firefox.

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

About the teacher:

Joni Trythall (aka Joni Bologna (http://jonibologna.com/)) is a designer at Lincoln Loop and author of SVG, CSS, and HTML tutorials on SitePoint, Designmodo, and her personal blog. She published a book last year, Pocket Guide to Writing SVG (http://svgpocketguide.com/), 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!

PS. Joni will be bringing her GDI famous gluten free chocolate chip cookies to share at the course, so be ready.

All attendees are expected to abide by the Girl Develop It Code of Conduct (http://www.girldevelopit.com/codeofconduct).

Want to TA? Get in touch! [masked]