When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
SVGs as Code: Interactive Icons and Easy Image Manipulation
Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.
Free
This Course Includes
skillshare
0 (0 reviews )
54 minutes 
english
Online - Self Paced
course
SkillShare
About SVGs as Code: Interactive Icons and Easy Image Manipulation
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
What You Will Learn?
- 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:.
- 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..