8. Responsive images and SVG

• VS Code extension: SVG by Jock

• A Practical Guide to SVGs on the Web - good introductory guide to SVGs

• SVG Tutorial | MDN Web Docs - lots of code samples

• Turtle graphics - old school programming that can help visualize how SVG paths work

• List of SVG filters from MDN Web Docs

• Finessing `feColorMatrix` - a good resource for understanding how to create color filters

• SVGOMG - SVGO’s Missing GUI. An online version of SVGO , tool for optimizing SVGs, particularly those created by graphics programs such as Adobe Illustrator

• How to code SVG icons by hand - pro tip: set the viewbox to 120,120 so you can use whole numbers instead of decimals like in the tutorial

Free SVG images / illustrations

• Iconfinder

• unDraw

• Lucasz Adam’s Free Illustrations

• Public Domain Vectors

• Flaticon

Sample past links and images assignment

• live site

• Github repo

• VIDEO: the <picture> element [33 min] from online class last year. I walk through finding, cropping and sizing images for . I show how to use Emmet to generate the picture markup and explain how picture works.

CodePen demos:

• Basic cubic Bezier curve

• How cubic Bezier curves are created with de Casteljau’s algorithm

• viewBox visualization

• SVG image filters

• Color change on hover using SVG filters

• using a webp image in your web page

• Art direction with <picture>

• <picture> HTML skeleton

<picture> element demos:

• image widths displayed

• fullscreen images (CSS)