Please visit the book's site to subscribe to be notified when it is published in September 2014!
Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML. These graphics can consist of paths, images, and/or text that are able to be scaled and resized without losing image quality (I know, right?!). Inline SVG refers to the embedded code written to generate these graphics.
Getting into the world of inline SVG can be vast and intimidating. It’s difficult to understand where to start and get a handle on all the syntax involved. This PDF and EPUB strives to provide designers and developers with the base knowledge needed to get started writing SVG and better understand its overall syntax and behavior through clear examples (with fruit images!) and thorough descriptions of properties and attributes.
From small stroke details to getting started with hand crafted patterns, this "pocket" guide aims to be an all around “go-to” reference for inline SVG use.
Current Focus & Release
In terms of content, the book is currently about 85% written. Over the next few weeks I will be working on finishing up the content and getting the book edited/reviewed. I have someone in mind for editing at an affordable price.
I hope to be able to release the ebook in September, with an early release shortly after the Kickstarter completes if I meet my funding goals. The early release of the book will only be available to backers and an update will be sent when it is ready!
Working Draft of the Table of Contents:
Here is a working draft list of the main sections within the book:
- Getting Started -How to draw basic shapes and embed from vector software
- viewBox & viewport -A look at setting up your SVG "canvas" and what preserveAspectRatio is all about.
- Organization & Structure -All about semantics, grouping, and the defs, symbol, and use elements.
- Transforms -All about translate, scale, skew, rotate.
- fill Properties -Fill in the "background" of SVG and a look at the properties to use here for further customization.
- stroke Attributes -There are a number of attributes that let us manipulate the "border" of SVG that are addressed in this section, such as stroke-dasharray and stroke-dashoffset.
- The text Element -Get started with this element and learn how to navigate the SVG text world that does not currently support automatic line breaks and word wrapping. Also...text on a path!
- Clips & Masks -Overview on how to restrict regions to which paint is applied.
- Gradients -Intro the the basic structure and attributes to get you started drawing SVG gradients. So fun.
- Patterns -Patterns are hard, but this section will walk you through how to write and use them in a way that is almost completely painless.
View more details of the table of contents on the book's site: svgpocketguide.com
Currently, the plan is for this book to be released as a PDF and EPUB. Depending on interest expressed and funding amount, this guide maybe be printed as a small journal like book and generated as an AZW3 file.
Other Published Work
My design and development tutorials have been mentioned by a number of respected web magazines, blogs, and round ups, including: Smashing Magazine, Sidebar, CodePen, Web Platform Daily, Treehouse, CSS Design Awards, Modern Web, CSS Weekly, SpeckyBoy, and Codrops.
Links to my most recent and popular SVG articles/tutorials:
- Getting Started with SVG Gradients -SitePoint
- How to Use SVG Patterns -Designmodo
- Animating SVG Gradients -Designmodo
- Using SVG stroke Attributes -Joni Bologna
- A Look at preserveAspectRatio in SVG -CodePen
- A Look at SVG viewBox and viewport -Modern Web
The pledge amount for this project allows me to take time off to complete the book, hire an editor, get assistance with the final PDF formatting, and to cover the creation and shipping for the rewards.
Update: All backers eligible for the PDF will now also receive an EPUB version as well!
Stretch Goal Details
- $4,000 10% donation (after fees) to Ada Academy, a tuition-free developer training program for women in Seattle, WA.
- $5,500 Printed copies of book published and available to all initial and future backers of at least $10.
- $8,000 I will also write a PDF companion guide regarding animating SVG available to all backers eligible for pocket guide.
Thank you for viewing this project!
Risks and challenges
1. I need to find editorial help, but have some guidance from the folks at Lincoln Loop. -UPDATE: totally found an awesome editor
2. Still has to pass technical review, but have a few experienced web designers/web developers willing to help.
3. I have never created a technical book before, but have done a lot of blogging, tutorials, and articles over the last few years.Learn about accountability on Kickstarter
- (30 days)