SVGs as Code: Interactive Icons and Easy Image Manipulation

Focused View

Kevin Ball

54:37

42 View

01 - dive-in.mp4

01:08

02 - svg-as-code.mp4

03:37

03 - manipulating-stroke-and-fill-with-css.mp4

02:27

04 - svg-use-and-the-shadow-dom.mp4

02:16

05 - inlining-svg.mp4

01:36

06 - fontawesome-5-svg-with-js.mp4

01:33

07 - creating-a-menu-bar.mp4

02:41

08 - making-our-menu-bar-interactive.mp4

04:14

09 - embedding-photos-in-svgs.mp4

02:20

10 - your-first-svg-filter-blur.mp4

02:41

11 - color-transformation-filter.mp4

03:09

12 - masks.mp4

02:03

13 - programmatic-manipulation-of-svg.mp4

02:00

14 - combining-masks-with-filters.mp4

03:35

15 - applying-filters-programmatically.mp4

03:58

16 - mouse-events-and-coordinates-in-javascript.mp4

05:51

17 - creating-a-mask-with-click-and-drag.mp4

02:43

18 - uploading-custom-image.mp4

02:42

19 - saving-your-svg.mp4

02:49

20 - final-step.mp4

01:14

Description

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.

What You'll Learn?

Technology
Web Development
HTML
CSS
Icon Design
Javascript
Photo Manipulation

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Graphic Design

Vector Graphics

Kevin Ball

Instructor's Courses

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 organize Foundation and JavaScript meetups.

I love writing code, but I also love teaching and helping people reach their full potential. In addition to my courses on Skillshare, I publish a newsletter on frontend development called the Friday Frontend.

SkillShare

View courses SkillShare

Skillshare is an online learning community based in the United States for people who want to learn from educational videos. The courses, which are not accredited, are only available through paid subscription.