SVG On

The Web

Brought to you by: 

Joni (Bologna) Trythall

Nora the NowSecure narwhal 

Oh hi, I'm Joni.

  • Started as an Illustrator; but not required! 
  • Wrote Pocket Guide to Writing SVG
  • Publish SVG tutorials
  • Product designer NowSecure 
  • Bake GF cookies for classes

Oh hi, this is Nora.

  • Our NowSecure mascot
  • Assisting with presentation 
  •  

Agenda

  • What is SVG?
  • Why SVG is the best
  • Using as <img> & inline
  • & CSS
  • Where to get 'em
  • Preparation 
  • Advanced features

What is it tho?

  • Scalable Vector Graphics
  • Two-demential graphics in XML
  • Consists of paths, shapes, text
  • Powerful alternative to rasters 
  • Nora & I are SVGs ... on these slides

Why It's Amazing

VS

Ways Of Using

  • As an <img> *
  • Inline *
  • CSS background-img
  • As an <object>
  • Data URIs

As An img

  • Pros
    • Straightforward & familiar, minimal markup required 
  • Cons
    • No real editing power, no access to "innards" of graphic
<img src="nora.svg" alt="Nora the narwhal being adorable" />

Inline

  • Graphic's code inline in HTML
  • svgpocketguide.com 
  • Pros
    • Total editing power, access all parts, source code; unlimited potential
  • Cons
    • ​Can get messy, more difficult to get started

"AKA the best way."

- Me all the time

Inline: Document Structure

  • Organization & Semantics 
    • SVG element 
    • g element
    • defs element
    • symbol & use elements
<svg>
    <!-- Where all the magic happens -->
</svg>

Inline: Document Structure

  • Stacking order; no z-index 

Inline: Basic Shapes

  • Rectangles, circles, ellipses, straight lines, polylines, polygons
  • Varying attributes required

Inline: Basic Shapes

  • circle:
  • rectangle:
<svg>
    <rect width="200" height="100" fill="#33ccff" />
</svg>
<svg>
    <circle cx="75" cy="75" r="75" fill="#254cff" />
</svg>

Inline: Basic Shapes Nora :(

  • Possible but not recommended because nightmares

Inline: Workspace

  • Tricky, but fame & fortune when it makes sense
  • Infinite "canvas" with set viewing window
  • Two coordinate systems
  • Coordinate system transforms
    • translate, rotate, scale, skew

 

"This is hard."

- Me all the time

Inline: Workspace 

Inline: fill & stroke

  • fill = like background
  • stroke = like border

Inline: fill & stroke

  • Lots of neat <stroke> attributes 
  • stroke-linecap & stroke line-join
  • dashes & offsets

Inline: text

  • Written within the <text> element 
<svg width="600" height="100">
    <text x="30" y="80">
        <!-- Clever or not clever text goes here -->
    </text>
</svg>

& CSS

Where To Get 'Em

  • The Noun Project
  • Icomoon
  • Nucleo
  • Vector Graphic Software
    • Ai, Sketch, Inkscape
  • Hand code

Prepping For Use

  • Get code from Vector Graphic Software or open w/ text editor (like Atom)
  • Run code through optimizer to clean up nonsense
    • SVGO (also a Grunt plugin)
    • Peter Collingridge's Optimiser

Browser Support

  • As <img>

caniuse.com

Browser Support Cont.

  • CSS background-img

caniuse.com

Browser Support Cont.

  • Inline

caniuse.com

Browser Support Cont.

tl;dr Very strong until things get weird 

Advanced Features

  • Sprites & icons systems
  • Hand coded gradients & patterns
  • "Drawing" line animations
  • Animation libraries

Advanced: Gradients

<defs>
  <radialGradient id="Gradient1" cy="60%" fx="95%" fy="70%" r="2">
    <stop offset="0%" stop-color="#0099ff" />
    <stop offset="20%" stop-color="#252a46" />
    <stop offset="40%" stop-color="#0099ff" />
    <stop offset="60%" stop-color="#eafaff" />
    <stop offset="80%" stop-color="#252a46" />
    <stop offset="100%" stop-color="#252a46" />
  </radialGradient>
</defs>

Advanced: "Drawing" Things

  • Demo
  • Playing with stroke-dasharray & stroke-dashoffset

Advanced: Icon Systems

  • Demo
  • The power of <symbol> & <use>

Wrap Up

  • Use it today
  • Illustration background not required 
  • HTML/CSS knowledge 
  • Join us in Philly & Wilmington

Bye & Contact

 

@jonitrythall

jonibologna.com

Made with Slides.com