Design the Web: CSS-Controlled SVG with PHP

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