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:
<ul><li>How to make your SVG icons change color as a user hovers and clicks on them</li>
<li>How to use SVGs to highlight, blur, and manipulate different parts of photos, drawing attention exactly where you intend</li>
<li>How to manipulate your SVG images with JavaScript, animating them in response to user action.</li>
</ul>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

SVGs as Code: Interactive Icons and Easy Image Manipulation

Kevin Ball gave you 1 free month of Skillshare

Get 1 free month of Skillshare

SVGs as Code: Interactive Icons and Easy Image Manipulation

Creative Learning Made Easy

Company

Community

Teaching

Mobile

English

English