SVGs as Code: Interactive Icons and Easy Image Manipulation

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.

• Dive In
• SVG as Code
• Manipulating Stroke and Fill with CSS
• SVG 'Use' and the Shadow DOM
• Inlining SVG
• Fontawesome 5 & svg-with-js
• Creating a Menu Bar
• Making Our Menu Bar Interactive
• Embedding Photos in SVGs
• Your First SVG Filter - Blur
• Color Transformation Filter
• Masks
• Programmatic Manipulation of SVG
• Combining Masks with Filters
• Applying Filters Programmatically
• Mouse Events and Coordinates in JavaScript
• Creating a Mask With Click and Drag
• Uploading Custom Image
• Saving Your SVG
• Final Step