Intro to SVG

Download Demo Files

Today’s Agenda

• What is SVG?
• Why use SVG?
• Examples
• How do you create SVG?
• Using SVG in a webpage
• Animating SVG

What is SVG?

• Scalable Vector Graphics
• Great to use in webpages, but not in emails yet
• Primarily used for vectors, but can contain live text and pixel‑based images (JPEG, PNG, etc.)
• XML-based image format
  (If you know HTML, XML is very understandable.)

Why Use SVG?

• Can be used at any size
  (no need to save multiple files at different sizes)
• Look great on any resolution screen
  (no need to make separate low/hi-res 1x/2x versions)
• Typically a smaller file size than pixel-based images, so they download faster
• Can be animated with JavaScript or CSS
• Can be styled with CSS
  (no need to make a separate hover image)

Static SVG Examples

• Thrive Solo
• On The Grid

Animated SVG Examples

• 100 Years of National Parks Service
• Stripe
• Supremo’s Typeterms
• Apex
• Polygon’s PS4 Review

How do you create SVG?

• Using a graphics app such as Adobe Illustrator, Sketch, Adobe XD, Inkscape (free), etc.
• Photoshop only exports proper SVG from native vectors. Vector smart objects don’t export as SVG properly, they end up having an embedded PNG in them instead of vectors!
• Hand coding

Live Demo

Reference:

• Tips for Creating SVG with Adobe Illustrator
• Adobe XD: Minify omits layer names (does not code IDs)
• SVG Optimizer: Website and Sketch Plugin
• Understanding viewport, viewBox, & preserveAspectRatio

Using SVG in a Webpage

• Use like any image (standard HTML <img> tag or as a background image in CSS)
• Inline the SVG code (put it into HTML). This has pros & cons:
• Pro: Can be styled with CSS
• Pro: Individual elements within the SVG can be animated
• Con: Not cached for efficient reuse across pages
• If your Apache web server isn’t preconfigured to support SVG: Configure the .htaccess file

Live Demo

Use SVG instead of Icon Fonts

• Icon fonts can be a large file size (you typically use only a few of the icons, but download the whole font)
• Icon fonts have limited styling with CSS (limited to one color)
• Icon fonts cannot be animated as much as SVG
• Icon fonts are not semantic, and can be difficult to use with screen readers (Google: Use icon fonts with caution)

Animating SVG

• CSS animations are fine for simple stuff
• JavaScript animations offer more power & control than CSS (especially when using GSAP: GreenSock Animation Platform)
• Inline the SVG (put SVG code into HTML)

Live Demo

Learn More

HTML5 Animation with GreenSock (GSAP)
Class or Book

Responsive CSS3 Scrolling Effects
Seminar or Book

Web Development Classes or Books