HTML/CSS

You, Me & SVG

Learn how to create and use scalable vector graphics online. Whether your icons, shapes, and assets are on small or large screens, SVGs have you covered!

Enroll Now to Play

Course Overview

  1. Level 1 You, Me & SVG Badge

    Level 1 Free Level 1 Video | 6 Challenges
    Oh, the Shapes You Can Make

    Learn the difference between raster and vector, as well as how to create vectors and when they come in handy.

  2. Level 2 You, Me & SVG Badge

    Level 2 2 Videos | 10 Challenges
    Would You, Could You With a Badge?

    Shape up your SVG knowledge with the circle, text, polygon, and line elements.

  3. Level 3 You, Me & SVG Badge

    Level 3 3 Videos | 7 Challenges
    Group de Loop​​

    Circle around three important topics: grouping, transforming, and the viewBox coordinate system.

  4. Level 4 You, Me & SVG Badge

    Level 4 2 Videos | 3 Challenges
    SVG Encore!

    ​​Wander through paths (the most commonly used SVG element), and discover how to reuse elements with symbol, as well as create screen reader-accessible SVGs with title and description tags.

You, Me & SVG Achievement Badge

Complete these levels to unlock

Course Completion Badge

Learn how to create and use scalable vector graphics online. Whether your icons, shapes, and assets are on small or large screens, SVGs have you covered!

Supplemental Learning

About The Professor

I am passionate about the interwebs and teaching its various languages to the world. I fell in love with Angular at an earlier development age and never looked back!

View Full Credits

Course Notes

  • Estimated Course Length: 4 - 5 hours

Course Reviews (28)

Raghav S

I used to be intimidated by SVGs before. Not anymore!

Desmond132518

Simple and easy tasks for learning SVG creation. Looking for an advanced course for SVG learning !

ceetaylor09

This is by far the most fun course I've taken here at Code School. I've learned a lot about svg for the past few months on my own and I still found helpful tips (making svgs responsive was the most helpful). I encourage Code School to consider making a follow up course that includes animating svgs.

alita42

I had been looking for ages for an svg tutorial that said anything more than "Here's a circle. Now you have an svg. You're done!" This is so much more detailed and informative than I was able to get anywhere else. This was a great course! I feel much more confident about working with svgs in my projects now. Thanks!