SVGs are an increasingly popular image format for the web, especially for icons, largely because they're small compared to other image formats and perfectly responsive for different screen sizes. However, another often overlooked part of their appeal and power is that just like HTML, SVGs are code and can be styled with CSS and manipulated with JavaScript.
In this course we will dive into the details of how to manipulate SVGs as code. It is accessible to anyone who has some familiarity with HTML, CSS, and JavaScript. You will learn:
- How to make your SVG icons change color as a user hovers and clicks on them
- How to use SVGs to highlight, blur, and manipulate different parts of photos, drawing attention exactly where you intend
- How to manipulate your SVG images with JavaScript, animating them in response to user action.
As your class project you will build a simple photo filtering and manipulation webpage, one that will allow you to manipulate a photo and create a custom SVG-based filter for it that adds effects and highlights.
You’ll be provided links to code examples throughout the course and for the project.
