Skip to content

Instantly share code, notes, and snippets.

@rossedfort

rossedfort/SVG's with Robbie and Ross.md

Last active January 25, 2016 21:28
Show Gist options
  • Save rossedfort/39eb6e9dc6da99677047 to your computer and use it in GitHub Desktop.
Save rossedfort/39eb6e9dc6da99677047 to your computer and use it in GitHub Desktop.
Download ZIP
An outline of a student led session on Scalable Vector Graphics
Raw
SVG's with Robbie and Ross.md

Intro - 10 mins

Image Formats

  • Raster(pixels) vs. Vector(paths)
  • Raster images use a series of pixels in a matrix like format
    • .png, .jpg, .tiff etc.
    • Hard to scale
    • compression = gross
  • Vector images use series of points and paths to construct images
    • Makes them easy to scale(math)

What the heck are SVG's

  • Scalable Vector Graphics
  • XML-based vector image format
  • All modern browsers have svg support
  • can be made using raw xml, but are typically created using drawing software (illustrator) and exported to .svg
  • can be scripted (animated)
  • examples
  • more examples

How do I make an SVG - live 'code' - 25 mins

  • Illustrator drawing paths, layers, etc.
  • export settings

How do I use an SVG - live code - 25 mins

  • add the svg we created to an existing app.
  • writing scripts for animation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment