Learning SVG
2h 31mBeginner2017-09-21
Authors
Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
The Scalable Vector Graphics (SVG) format is spreading rapidly across the web. Naturally responsive, SVG can scale from very big to very small, and graphics can be manipulated with code after they've been downloaded to a browser. Join LinkedIn staff instructor Morten Rand-Hendriksen as he covers the basics of learning SVG. He covers the anatomy of SVG, including the internal structure that makes your SVG easy to ship over the web while maintaining maximum flexibility. He shows how to draw and manipulate SVG shapes, work with lines and text, and use strokes, fills, and patterns to make your SVGs look just right. Plus, find out how to convert an existing graphic design into SVG—maximizing accessibility while optimizing it for the web.
Learning objectives
What is SVG?
Adding SVG to the web
Drawing shapes
Grouping shapes
Styling SVG with CSS
Adding text
Designing with strokes, fills, gradients, and patterns
Learning objectives
What is SVG?
Adding SVG to the web
Drawing shapes
Grouping shapes
Styling SVG with CSS
Adding text
Designing with strokes, fills, gradients, and patterns
Skills covered
SVGW3CWeb GraphicsWeb DesignLearningProgramming LanguagesSoftware Development
Concepts
0. Introduction
- 01 - Welcome
- 02 - Using the exercise files
- 03 - What this course is, and is not
1. SVG - Core Principles
- 04 - What is SVG
- 05 - SVG as graphics
- 06 - SVG in the browser
- 07 - SVG as code
2. Anatomy of an SVG
- 08 - Add SVG to a web document
- 09 - Define the display size of an SVG
- 10 - Understand the viewBox
- 11 - SVG shape elements
- 12 - Group SVG shapes with g
- 13 - Reuse SVG symbols with symbol and use
- 14 - Size used SVG symbols
- 15 - Apply CSS to individual symbol instances
3. Creating SVGs in Code
- 16 - SVG shapes overview
- 17 - Draw a line
- 18 - Draw a rectangle
- 19 - Draw a circle
- 20 - Draw an ellipse
- 21 - Draw a polyline
- 22 - Draw a polygon
- 23 - Draw a path
- 24 - Add text to an SVG
- 25 - Convert text to outlines
- 26 - Add an external image to an SVG
- 27 - Rotate SVG shapes
4. Strokes, Markers, Gradients, and Patterns
- 28 - Stroke
- 29 - Dashes
- 30 - Markers
- 31 - Gradients for fills and strokes
- 32 - Tiled patterns
5. Practical SVG
- 33 - Turn complex graphics into usable SVG
- 34 - Make SVG accessible
- 35 - Clean SVG files for web publishing
Conclusion
- 36 - Next steps