Learning SVG

Learn to draw with code! Use the Scalable Vector Graphics (SVG) format to create attractive and responsive web graphics that you can manipulate easily with code.

Introduction

• Welcome
• Using the exercise files
• What this course is, and is not

1. SVG: Core Principles

• What is SVG?
• SVG as graphics
• SVG in the browser
• SVG as code

2. Anatomy of an SVG

• Add SVG to a web document
• Define the display size of an SVG
• Understand the viewBox
• SVG shape elements
• Group SVG shapes with
• Reuse SVG symbols with and
• Size used SVG symbols
• Apply CSS to individual symbol instances

3. Creating SVGs in Code

• SVG shapes overview
• Draw a line
• Draw a rectangle
• Draw a circle
• Draw an ellipse
• Draw a polyline
• Draw a polygon
• Draw a path
• Add text to an SVG
• Convert text to outlines
• Add an external image to an SVG
• Rotate SVG shapes

4. Strokes, Markers, Gradients, and Patterns

• Stroke
• Dashes
• Markers
• Gradients for fills and strokes
• Tiled patterns

5. Practical SVG

• Turn complex graphics into usable SVG
• Make SVG accessible
• Clean SVG files for web publishing

Conclusion

• Next steps