/beginning-svg

Coursework for textbook "Beginning SVG"

Primary LanguageHTML

Beginning SVG

Coursework for textbook "Beginning SVG"

Metadata

Title Beginning SVG: A Practical Introduction to SVG using Real-World Examples
Author Alex Libby
Publisher Apress
Year 2018
Level (/5)
Rating (/5)

Config

Project beginning_svg
NodeJS version

Section Checklist

Part I: Getting Started

  • Chapter 1: Introducing SVG
  • Chapter 2: Adding SVG Content to a Page
    • Implementing SVG Shapes
      • Creating Squares and Rectangles
      • Drawing Circles and Ellipses
      • Drawing Lines, Polylines, and Polygons
      • Constructing Paths and Markers
    • Creating More Advanced Shapes
      • Dissecting Our Gauge Code
    • Creating Unusual Shapes with Clip-Paths
    • Painting Elements
    • Creating Gradients and Patterns
      • Constructing Gradients
      • Using Radial Gradients
      • Taking It Further
      • Applying Pattern Effects to CSS Backgrounds
    • Setting Advanced Configuration Options
    • Summary

Part II: In More Detail

  • Chapter 3: Working with Images and Text
    • Inserting Images
    • Exporting Images
    • Using SVGs as Data URIs
    • Applying Image Masks
    • Working with Icons
      • Creating Image Sprites with Icons
      • Using the <symbol> Element
      • Automating the Process
    • Adding Text with the <text> Element
      • Applying Different Effects to Text
      • Exploring How the Code Works
    • Embedding Other Content
    • Adding Videos
    • Implementing a Real-World Example
    • Summary
  • Chapter 4: Sizing in SVG
    • Understanding Scalability
    • Getting to Grips with SVG Coordinates
    • Introducing the SVG Scaling Toolbox
      • Setting Height and Width Attributes
      • Implementing a viewBox
      • Preserving the Aspect Ratio
    • Putting the Toolbox to Use
    • Making SVG Content Responsive
      • Introducing the Golden Rules
      • Updating SVG Images
      • Using Media Queries with SVG Content
      • Understanding the Pitfalls
      • Making SVG Images Adaptive or Responsive?
    • Summary
  • Chapter 5: Creating Filters
    • Introduction
    • The Benefits of Using SVG Filters
    • Exploring Existing Filters
    • Introducing SVG Primitives for Filters
    • Manipulating Content with Filters
    • Creating and Applying Filters
      • Changing Color with Filters
      • Understanding Our Code
      • Calculating Colors to Use
    • Re-creating Filters a la Instagram
    • Blending and Merging SVG Filters
      • Taking It Further in Watercolors
      • Creating Our Filter - An Epilogue
    • Animating Filter Effects
    • Creating a Practical Example
    • Summary
  • Chapter 6: Animating Content
    • Animating with CSS
    • Transforming SVG Elements Using CSS
    • Moving Content with <animate>
      • Creating a Clock Using <animate>
      • Dissecting Our Code
      • Creating Animated SVG Loaders
      • Understanding How the Code Works
    • Managing Multiple Animations
    • Working with Third-Party Libraries
      • Introducing Snap.svg
    • Applying Easing Effects to Elements
      • Getting Prepared
      • Exploring the Code in Detail
    • Choosing Our Route - an Epilogue
    • Summary
  • Chapter 7: Optimizing SVG
    • Exporting SVG Images for Use
    • Understanding the Importance of Optimization
    • Assessing Performance
    • Taking Care of Accessibility
    • Shrinking Images with SVGO
    • Learning How to Micro-optimize Content
    • Paying Attention to Data URIs
    • Summary

Part 3: Putting SVG to Use

  • Chapter 8: Creating SVG Charts
    • Understanding the Benefits of SVG for Charts
    • Designing Individual Charts Using SVG
      • Creating Donuts
      • Eating Pie
      • Raising the Bar
      • Connecting the Dots
      • Sparking Lines to Life
    • Making Charts Interactive
    • Animating Chart Content
      • Animating Charts Using CSS
      • Animating Charts with Snap.svg
      • Breaking Down Our Code
    • Making Charts Interactive: A Postscript
      • Exploring Other Library Options
    • Creating Charts Online Using amcharts.js
    • Summary
  • Chapter 9: Incorporating SVG Libraries
    • Why Use a Library?
    • Choosing the Right Library
    • Using Vivus to Draw SVG Images
    • Creating Bubble Charts with D3
    • Getting Creative with Anime.js
    • Taking a Different Look at Filters
    • Summary
  • Chapter 10: Taking It Further
    • Manipulating SVG with JavaScript
    • Animating Borders Using SVG
    • Creating Menus Using GSAP and SVG
    • Lazy Loading with SVG
    • Creating Template-Based Charts
    • A Parting Shot
      • Tilting UI Effect
      • Panning and Zooming Images
      • Tracking Progress
    • Summary

Links