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 “pocket” sized guide provides designers and developers with the base knowledge needed to get started with writing SVG and better understand its overall syntax and behavior through clear examples (with fruit images!) and quick descriptions of properties and attributes.

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. Inline SVG refers to the embedded code written to generate these graphics in the browser.

The Author

Hi I’m Joni, a creator of web sundries living at the top of Delaware. I have been working with and publishing tutorials on SVG for some time now. These tutorials can be seen on my own blog, jonibologna.com, my CodePen blog, SitePoint, Designmodo, and Modern Web.

Though my professional background and education are in nonprofit grant writing, my passion for web design eventually took over with the creation of a CSS fish named Franklin. Since creating Franklin and getting him to move across the screen I have been obsessed with bringing graphics to life on the web.

This obsession quickly led me to the world of inline SVG. I am constantly learning about SVG and its potential, and thoroughly enjoy making this information accessible to as many people as possible through unique but simple demonstrations.