1 of 16

Intro to Writing SVG

With Joni Bologna

2 of 16

Hi, I’m Joni.

  • Designer at Appsembler; we are hiring!
  • Live in Wilmington
  • Started in tech as illustrator
  • Swimming fish out of divs
  • Wrote a book
  • Eat squash sometimes
  • Fav fruit = Cherries

@JoniTrythall jonibologna.com

3 of 16

Agenda

  • What is SVG & the benefits
  • What is Inline SVG
  • Document Structure
  • Basic Shapes & Paths
  • Fills & Strokes

Each section will be followed by practice time!

@JoniTrythall jonibologna.com

4 of 16

SVGeeWha? Inline Huh?

  • Scalable Vector Graphics
  • Crazy scalable icons lend well to responsive design
  • Using SVG icons has many benefits of font icons
  • Beautiful site illustrations, endless UI possibilities
  • Inline SVG = source code embedded in HTML
  • More accessible than traditional images

5 of 16

Why Use It This Way?

  • Complete access to a graphic’s “innards”
  • Special accessibility attributes
  • SVG text is searchable and accessible
  • Easy edits
  • Interactivity
  • Plays well with CSS
  • Super strong cross browser support
  • Neat advanced features

6 of 16

First, Let’s Open Some Tabs

  • Go to: bit.ly/svgintro
    • Slides
    • Demos
    • References
    • Contact info
  • svgpocketguide.com/book

@JoniTrythall jonibologna.com

7 of 16

Document Organization

  • The <svg> element
  • Organizational and container elements
    • <g> groups related graphics
    • <defs> permits reuse of elements

​

<svg>

<!-- This is where our graphics will live! -->

</svg>

@JoniTrythall jonibologna.com

8 of 16

Document Organization Cont.

  • Stacking order; no z-index!

@JoniTrythall jonibologna.com

9 of 16

Practice Time!

  • Let’s study the document structure of an SVG document fragment and then change the stacking order

bit.ly/svgdemos Demo: 1

​

10 of 16

Basic Shapes & Paths

  • rectangles, circles, ellipses, straight lines, polylines, polygons
  • paths

Reference guide: svgpocketguide.com/book

<svg>� <rect width="200" height="100" fill="#BBC42A" />�</svg>

11 of 16

Practice Time!

  • Let’s hand code a few shapes!

bit.ly/svgdemos Demo: 2

​

@JoniTrythall jonibologna.com

12 of 16

Fills & Strokes

  • fill is like the background
  • stroke is like the border (needs a width!)
  • A number of stroke related attributes

@JoniTrythall jonibologna.com

13 of 16

Fills & Strokes Cont.

  • stroke-linecap
    • shape of end of an open path

​

  • stroke-linejoin
    • shape of corners

​

  • stroke-dasharray
    • dashed lines

​

14 of 16

Practice Time!

  • Let’s make some changes to the stroke on some grapes!

bit.ly/svgdemos Demo: 4

15 of 16

​

Wrap Up

​

  • Where can we go from here?
    • Advanced features; gradients, patterns, text on a path, clipping paths
    • Deep dive into accessibility
    • SVG sprites as icon systems
    • Optimize all the things!

bit.ly/svgintro

16 of 16

Thank You

@jonitrythall

jonibologna.com

info@jonibologna.com