Share this project

Done

Share this project

Done
A quick but thorough “pocket” sized reference for getting started writing Scalable Vector Graphics.
A quick but thorough “pocket” sized reference for getting started writing Scalable Vector Graphics.
181 backers pledged $4,711 to help bring this project to life.

About this project

Pocket Guide to Writing SVG project video thumbnail
Replay with sound
Play with
sound

$4,711

181

Please visit the book's site to subscribe to be notified when it is published in September 2014! 

Overview 

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: 

  • Introduction 
  • 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. 
  • Conclusion

View more details of the table of contents on the book's site: svgpocketguide.com

Formats

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:

Dollar Bills 

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. 

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

Support this project

  1. Select this reward

    Pledge $5 or more About $5

    APPLE CLUB: Your name in the “Thank You” section of the book’s site.

    Less
    Estimated delivery
    2 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  2. Select this reward

    Pledge $10 or more About $10

    WATERMELON CLUB: Your name in the “Thank You” section of the book’s site, as well as a PDF of the book for yourself.

    Less
    Estimated delivery
    103 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  3. Select this reward

    Pledge $15 or more About $15

    LIME CLUB: A thank you mention on the book's site, a PDF copy of the book, and an SVG tote bag.

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 12 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  4. Select this reward

    Pledge $25 or more About $25

    BANANA CLUB: Everything from previous amounts, and “SVG is Bananas” mug.

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 50 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  5. Select this reward

    Pledge $45 or more About $45

    PEAR CLUB: Everything from previous amounts, and SVG print set.

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 5 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  6. Select this reward

    Pledge $200 or more About $200

    GRAPE CLUB: Two mugs, two sets of prints, a PDF copy for everyone in your company, plus a personal “Thank You!” in the book.

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 3 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  7. Select this reward

    Pledge $500 or more About $500

    CHERRY CLUB: Everything from previous amounts, and I will guest post on your blog regarding SVG. PS: You’re amazing and I love you.

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 2 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.

Funding period

- (30 days)