Learning SVG

Learning SVG

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.

Topics include:

  • 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 SVG
  • 时长:2小时30分
  • 字幕:英语


  1. Welcome
  2. Using the exercise files
  3. What this course is, and is not
  4. What is SVG?
  5. SVG as graphics
  6. SVG in the browser
  7. SVG as code
  8. Add SVG to a web document
  9. Define the display size of an SVG
  10. Understand the viewBox
  11. SVG shape elements
  12. Group SVG shapes with
  13. Reuse SVG symbols with and
  14. Size used SVG symbols
  15. Apply CSS to individual symbol instances
  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
  28. Stroke
  29. Dashes
  30. Markers
  31. Gradients for fills and strokes
  32. Tiled patterns
  33. Turn complex graphics into usable SVG
  34. Make SVG accessible
  35. Clean SVG files for web publishing
  36. Next steps