05 Scalable Vector Graphics

March 31, 2020 | Lesson

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

Teacher Activities

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!*


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