SVG Summit 2016

January 25, 2016

I attended my first online conference last week with Environments for Humans’ SVG Summit 2016. It was a great conference with some solid talks that taught me a lot about SVG. Below are some takeaways from the event, as well as the notes I took during each talk.

  • Being my first online conference, I was a bit skeptical about how it would go. Overall, I thought it was a great experience. It was hard to beat getting to enjoy it from the comfort of my home office without any lodging or travel fees.
  • I’ve started to use SVG more and more in my sites, which is why I had the interest in the conference. I thought there was a nice balance in the talks. There were a few more beginner-level talks that I felt totally comfortable listening to (like Ryan Irelan’s Introducing SVG and Brenda Storer’s Cracking the SVG Code), a few more complex talks that showed the awesome potential of SVG, but were a bit over my head (like Sarah Drasner’s Designing Complex SVG Animations), and a few that were a bit more concrete and tools based (like Clark Wimberly’s about Sketch).
  • I wasn’t sure how I would like the webinar-style format, but it ended up working out nicely. One of the speaker’s internet didn’t work, so they rescheduled his talk, but other than that the multi-location setup went off without a hitch.
  • The chat room was a bit disappointing. It seemed to be dominated by 4-5 participants and the way the presenters were set up, there wasn’t an easy way for them to answer questions as they went. That’s no different than a normal conference though.

Overall, it was a great conference—especially for the cost. I’ll definitely do one again in the coming months.

Here are my (rough) notes from each of the talks:

Introducing SVG

by Ryan Irelan

  • from Mijingo
    • site for dev courses
  • What is SVG?
    • Scalable Vector Graphics
    • XML language and file format
    • can be an image like a logo or a complex animation
      • go to CodePen to see some really cool things with SVG
  • Why Should You Use SVG?
    • Scalable
      • can be used for any resolution
    • File Size
      • Bitmap > SVG usually can save file size
    • Mutable
      • can alter it on a site (color, animation, etc.)
  • History of SVG
  • Is it safe to use SVG?
    • Yes
    • look through feature support too (CSS backgrounds, HTML image element, etc.)
  • Creating SVGs with tools
    • Illustrator
      • fill in white spaces
      • be sure to outline text
      • Export > SVG
      • SVG code to either use or make sure it is setup as you’d like
      • will need to clean up code a bit (Brenda’s talk will discuss and many articles online)
    • Converting Bitmap image to SVG
      • tool: VectorMagic.com
        • make sure it actually converts to vector, not base 64
  • Creating SVGs with code
    • viewBox
      • article: https://sarasoueidan.com/blog/svg-coordinate-systems/
      • takes four values
        • x
        • y
        • width
        • height
      • viewBox=“0 0 400 400″
        • x, y, width (to be seen), height (to be seen)
      • if you make viewBox width/height smaller, but leave the width/height defined, it zooms in on the graphic
  • SVG Elements
    • <svg></svg>
      • height – the height of the viewport
      • width – the width of the viewport
      • preserveAspectRatio – forces the aspect ra2o so image isn’t stretched when using the viewBox a8ribute to define a new coordinate system.
      • viewBox- set a new coordinate system by defining where x,y coordinates where the system starts as well as the width and height.
    • <g></g>
      • Used to create groups of SVG objects.
      • Any transformations you apply to g apply to everything inside of the group.
      • Accepts all global attributes (like stroke, fill, etc).
    • <circle></circle>
      • creates circles
      • cx – defines the x coordinate of the center of the shape.
      • cy – defines the y coordinate of the center of the shape.
      • r – defines the radius of the circle.
    • <rect></rect>
      • creates rectangles
      • height – defines the height the shape.
      • width – defines the width of the shape.
      • x – The x coordinate where the shape should start drawing.
      • y – The y coordinate where the shape should start drawing.
    • <path></path>
      • Any shape can be created with the path element.
      • d – defines the path to follow to create the shape. The path is defined using path descriptions: Moveto, Lineto, Curveto, Arcto, ClosePath.
      • pathLength – define the total length of the path.
    • <polygon></polygon>
      • create any shape with many sides (like an octagon)
      • plot the sides of the polygon using points.
    • <text></text>
      • set text in your SVG. • takes the global style attribute
      • textLength – an exact value of the length of the text.
      • rotate – determines the rota>on of the text.
      • x – the coordinate where the text begins
      • y – the coordinate where the text begins
    • <textPath></textPath>
      • allows you to put text along a path element and have the text follow the shape.
      • classic SVG demo element
    • for more documentation: developer.mozilla.org/en-US/ docs/Web/SVG/Element
  • Adding SVG to Your Template Code
    • Plain Ol’ SVG XML
      • access via DOM, manipulate/modify via JS and CSS
      • not cachable
        • You can include SVG in a pseudo element in CSS, which is cached
    • SVG as object
      • use <object> element
      • use <img> element within for fallback
        • <img> will be downloaded even if object works though
    • Using <img>
      • will be cached
      • can’t manipulate
    • As Background Image
      • will be cached
      • can’t manipulate
  • Styling SVG with CSS
    • using <style> attribute
    • adding a class attribute to the SVG code
      • overall best option
    • using inline stylesheets
  • Manipulating SVG with JavaScript
    • Just like any other DOM element.
    • Use JavaScript, jQuery, [flavor of the month]
    • Special JavaScript libraries just for working with SVG
      • Snap, Velocity, etc.
  • SVG Optimizations
  • Link: mijingo.com/svg
    • articles about SVG
  • https://mijingo.com/blog/helpful-links-and-resources-on-svg

Cracking the SVG Code

by Brenda Storer

  • Designer at thoughtbot
  • Overview
    • Brief History
    • The SVG output from popular applications
    • The SVG element’s attributes
    • Shapes and paths
    • Stroke attributes
  • SVG 2
    • still not ready
  • What is familiar from HTML
    • it’s XML
    • it’s like an HTML document for digital drawings instead of content
      • unicode characters
      • elements, tags, and attributes
      • nesting
      • bitmaps, anchors (a.k.a. links), text
      • AND shapes, paths, opacity, gradients, rotation, animation
  • SVG attributes
    • Name spacing
      • xmlns & xmlns:xlink
      • define what that element is
      • provides semantic meaning for the name of that element and its children, provided that the children do not have their own name spaces
      • Attributes can have namespaces too. They are prefixed.
      • Some say you don’t need, but she prefers to keep it
      • links don’t go anywhere; they are just a unique identifier
      • Mac OSX will only preview if you have name spacing attributes
    • Title & Description
      • think of “title” like an “alt” tag
      • good for accessibility
    • Viewport
      • width/height
    • SVG coordinate system
  • Exported files
    • Illustrator
      • don’t need
        • xml declaration
        • Illustrator comment
        • version (1.1)
        • ID
        • if no links, remove xmlns:xlink
        • x, y coordinates
        • style + classes (leave or move to CSS and update to semantic classes)
    • Sketch
      • similar to Illustrator in output
      • don’t need:
        • xmlns:sketch
          • if you delete at top, you need to delete within
        • title/description
          • good to have, but their defaults are not helpful
        • too many groups
    • she uses Illustrator because it is a bit cleaner
  • Shapes
    • stroke = border
    • fill = background color
    • rectangle
      • rx = corner radius
    • circle
      • cx = x coordinate of center of circle
      • cy = y coordinate of center of circle
      • r = radius of circle
    • ellipse
      • <ellipse>
      • rx = x radius
      • ry = y radius
    • line
      • <line>
      • x1 = start of x coordinate
      • x2 = end of x coordinate
      • y1 = start of y coordinate
      • y2 = end of y coordinate
    • polyline/polygon
      • points = coordinates (ex. 1,1, 50,1 50,50)
        • paired units
      • polygon will close itself because it is a full shape
    • path
      • d = draw
        • M or m = moveto (x,y)
        • L or l = linnet (x,y)
        • A or a = arc
          • rx,ry
          • x-axis-rotation — sets the rotation of the arches, always should be 0
          • large-arc-flag — true or false value (0 or 1)
          • sweep-flag — clockwise (1) or counter-clockwise (0)
          • x,y — is where to draw the arc to from its reference point (based on capital A or lowercase a)
        • Z or z = closepath
          • draws path from where path is to the original origin point
          • if you don’t want it to connect to the end, don’t define
        • Uppercase – absolute position based on parent
        • lowercase – relative to its current position
  • Cubic Bezier Curve
    • atrributes
      • C or c = curveto (Cubic Bezier Curve)
      • S or s = curveto (Smooth or Shorthand Cubic Bezier Curve)
      • C x1,y1 x2,y2 x,y
      • S x2,y2 x,y
    • A cubic Bezier curve is defined by four points. Two are endpoints. The origin endpoint is either absolute or relative depending on the lowercase or uppercase “c”. (x,y) is the destination endpoint. The points (x1,y1) and (x2,y2) are control points.
    • In a Shorthand or Smooth Cubic Bezier Curve, the start control point is is assumed to be the same as the end control point of the previous curve.
    • If you copy and paste from Illustrator, it will use SVG code
    • decimals/commas
      • technique for making code more compact
  • in browser
    • CSS can do a lot, but cannot animate paths
    • SMIL has been deprecated
    • snap.svg
    • D3 (graphs/charts)
    • SVG.js
    • GreenSock
  • Animated Stroke Dash
  • Resources

Designing Complex SVG Animations

by Sarah Drasner

  • staff writer at CSS tricks
  • senior UX Engineer at Trulia
    • deals with marriage of design + interaction on site
  • why
    • animation is powerful to convey meaning
    • can guide your users
    • because otherwise we’re not using the web to it’s full potential
  • animation as information
  • Types
  • Not one size fits all
    • Questions to ask
      • responsive?
      • toggle on/off?
      • easing structures
      • user flow
      • what happens EVERY TIME
        • keep those consistent (forms, etc.)
  • Easing
    • accents in eases
  • Motion Design language for projects
    • seems like a lot of work?
      • Consider your tooling- loss leader- it was a lot of work at first that paid off along the way
      • Reuse resources like easing functions, animation keyframes in mixins, extends, variables, you name it!
      • If mobile is decoupled- easier to keep it consistent across both
      • Good animation branding guidelines means less communication down the line and reinventing the wheel.
  • Main Principle
    • Design everything first, slowly unveil things
  • use storyboards for animation
  • SVG
    • crisp on any display
    • less HTTP requests to handle
    • easily scalable for responsive
    • small file size if you design for performance
    • easy to animate
    • easy to make accessible
  • Optimize
  • Animation performance
    • JankFree.org
  • SVG Sprites
  • animation media queries work just like any other media query
  • viewBox shift with JavaScript
    • acts like a window to show and hide the requisite parts of the sprite
  • article: https://www.smashingmagazine.com/2015/03/different-ways-to-use-svg-sprites-in-animation/
  • use negative delay, so the animation is going when the page loads
  • Greenback/GSAP
  • information graphic example: http://codepen.io/sdras/full/JdJgrB
  • accessibility is important

4 (More) Impossible Things with SVG

by Dudley Storey

 
  • technical issues, need to watch on replay

SVG & Working with Sketch

by Clark Wimberly

 
  • works at InVision
  • Sketch
    • vector-based
    • art boards
    • assets
  • Exporting
    • Slices
      • insert slice (S)
      • ‘Export Group Contents only’
    • Groups/Layers
    • Artboards
  • Getting them out from Sketch
    • one-by-one
    • batch
      • export all items use export link in the top right
  • Managing file paths
    • rename folders/layers with file structure
    • ex. logos/logo-name.svg
  • can create multiple versions of the same slice
    • click ‘+’ next export menu and define new styles
  • View box and other properties
    • position & size defined in Sketch is what gets ported to SVG
  • Organize SVG
    • IDs in SVG are set with groups from file
  • Maintaining an icon set
    • use art boards in Sketch to maintain icon set used in a site
  • Using symbols
    • can group icons
    • insert > symbol > icons
    • can also use for logo sets
  • Background colors
    • can have background (from art board) either only in the Sketch file or only in the export
  • Responsive icons
  • Command Line
    • can hook it to your other processes
    • ex.
      • sketchtool export slices stat-icons.sketch
      • sketchtool export dartboards filename.sketch
      • sketchtool dump filename.sketch
      • sketchtool list pages filename.sketch
    • can add in output, scale or formats
  • Sketch plugins

A More Holistic Approach to SVG

by Chris Gannon

  • Slides: http://slides.com/chrisgannon/svg-summit?token=8TgePUBf#/
  • his workflow
    • AI > Sublime Text > Codepen/GreenSock
  • great resource: Seth Eckert
  • start with low hanging fruit, then move to more complex things
  • Tips & tricks
    • draw everything and reveal the bits
    • SVG text animation performance sucks
    • <clip-path> performance is better than <mask>
    • Apply clips/masks to a parent group
    • Set the source for <use> elements at 0,0
    • cloneNode has more flexibility than <use>
    • Clean up unnecessary anchor points
    • Use separate groups for masks and filters
      • apply mask to <g> element
    • ScrubGSAPTimeline.js
    • Separate nested groups for independent motion
    • Use filters sparingly
    • Introducing animation randomness adds value
  • get inspiration from everywhere
  • uses ‘trick boxes’ to determine what works and what doesn’t

Building with SVG Q+A Round Table

by Chris Coyier

 

Andrew Pautler

Posts