05 Scalable Vector Graphics
March 31, 2020 | LessonIn this lesson we explore the SVG format in all its glory.
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.
- Embed one of the SVG’s to your document using the
<img>
element. - Embed the other SVG as inline code in your document.
- Show me your web page!*
- Embed one of the SVG’s to your document using the
Extend
Use a vector drawing tool to create your own SVG images (Adobe Illustrator or Sketch). Explore SVG animation techniques.