SVGs as Code: Interactive Icons and Easy Image Manipulation | Kevin Ball | Skillshare

SVGs as Code: Interactive Icons and Easy Image Manipulation

Kevin Ball, Web Development Consultant and Trainer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Videos (55m)
    • Dive In

      1:07
    • SVG as Code

      3:37
    • Manipulating Stroke and Fill with CSS

      2:27
    • SVG 'Use' and the Shadow DOM

      2:16
    • Inlining SVG

      1:36
    • Fontawesome 5 & svg-with-js

      1:33
    • Creating a Menu Bar

      2:41
    • Making Our Menu Bar Interactive

      4:14
    • Embedding Photos in SVGs

      2:20
    • Your First SVG Filter - Blur

      2:41
    • Color Transformation Filter

      3:09
    • Masks

      2:03
    • Programmatic Manipulation of SVG

      2:00
    • Combining Masks with Filters

      3:35
    • Applying Filters Programmatically

      3:58
    • Mouse Events and Coordinates in JavaScript

      5:51
    • Creating a Mask With Click and Drag

      2:43
    • Uploading Custom Image

      2:42
    • Saving Your SVG

      2:49
    • Final Step

      1:13

About This Class

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.

162

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Kevin Ball

Web Development Consultant and Trainer

Hi, I'm Kevin Ball (alias KBall) and I've been a software developer for over a decade. I run a web development consulting and training company called ZenDev.

Before starting ZenDev, I led development for the ZURB Foundation front-end framework. I also speak at conferences around the world like All Things Open, Web Unleashed, the CSS Summit, the SVG Summit, and the Accessibility Summit. I co-founded the San Diego Javascript meetup, and continue to orga...

See full profile

Report class