SVG can do that?! - talk by Sarah Drasner

Introduction

In this tutorial, we will explore the powerful capabilities of SVG (Scalable Vector Graphics) as presented by Sarah Drasner in her talk at Full Stack Fest 2017. SVGs are not just for simple icons; they can be transformed into interactive and dynamic graphics suitable for modern web applications. This guide will cover practical uses of SVG, including styling, interaction, animation, and integration with front-end frameworks.

Step 1: Understanding SVG Basics

• What is SVG?
  • SVG is an XML-based format for vector graphics that allows for high-quality images that scale without losing quality.
• Common Uses
  • Icons and logos
  • Illustrations
  • Backgrounds and patterns

Step 2: Styling SVGs Like Typography

• Use CSS for Styling
  • Treat SVGs like text elements by applying CSS styles.
  • Example: Change the color, size, and typography of SVG text elements.

svg text {
  fill: #3498db; /* Change text color */
  font-size: 24px; /* Font size */
  font-family: 'Arial', sans-serif; /* Font family */
}

Step 3: Making SVGs Interactive

• Add Interactivity with JavaScript
  • Use event listeners to create responsive SVGs.
  • Example: Change the color of an SVG element on hover.

document.querySelector('svg').addEventListener('mouseover', function() {
  this.style.fill = '#e74c3c'; // Change color on hover
});

Step 4: Animating SVGs

• Use CSS Transitions and Animations
  • Apply animations to SVG properties like transform, opacity, and fill.
  • Example: Smooth transitions on hover.

svg circle {
  transition: fill 0.3s;
}

svg circle:hover {
  fill: #f1c40f; /* Change fill color on hover */
}

Step 5: Integrating SVG with Front-End Frameworks

• Using SVG in React and Vue.js
  • Import SVGs as components in React.
  • Use inline SVG in Vue templates for easy manipulation.

React Example

import React from 'react';
import { ReactComponent as MySVG } from './mySVG.svg';

function App() {
  return <MySVG />;
}

Vue Example

<template>
  <svg xmlns="http://www.w3.org/2000/svg">...</svg>
</template>

Step 6: Adding Physics and Snap Effects

• Incorporate Libraries
  • Use libraries like GSAP or Matter.js to add physics to SVG elements.
  • Example: Create bouncing effects or snap animations.

gsap.to("#mySVGElement", {
  y: 100, // Move down
  bounce: 1,
  duration: 1
});

Step 7: Ensuring Cross-Browser Compatibility

• Test in Different Browsers
  • Regularly test your SVG implementations across various browsers to ensure consistent performance.
• Use Fallbacks
  • Provide raster images or alternative content for browsers that do not support SVG.

Conclusion

SVGs offer endless possibilities for creating interactive and visually appealing web applications. By understanding how to style, animate, and integrate SVGs with front-end frameworks, developers can significantly enhance user experiences. Start experimenting with SVGs in your projects, and explore libraries that can help you push the boundaries even further. Happy coding!