In this lesson we explore the SVG format in all its glory.

• Web Design Syllabus

Teacher Activities

• Check Learning Journals
• Discuss SVG images
  • What are they?
  • How do you make them?
  • Usage: Pros and Cons
  • Fallbacks: https://css-tricks.com/svg-fallbacks/
• Pre-teach vocab (vector / scale / svg)

Student Activities

• Participate in class discussion
• Read Adding vector graphics to the Web and take Outline Notes
• Go to the Noun Project and download two SVGs images to add to your summer story narrative.
• Open your summer story document in VS Code.
  1. Embed one of the SVG’s to your document using the <img> element.
  2. Embed the other SVG as inline code in your document.
  3. Show me your web page!*

Extend

Use a vector drawing tool to create your own SVG images (Adobe Illustrator or Sketch). Explore SVG animation techniques.