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 <g>
()
Reuse SVG symbols with <symbol> and <use>
()
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
()
Ex_Files_Learning_SVG.zip
(533 KB)