Take Vector Graphics to the Web (An Introduction to SVGs)

What you’re getting into: A detailed, but not too intimidating, guide on taking a vector graphic made through a GUI to a web page. In our case, we will take a koala made in a previous post and bring it into a Codepen project.

Announcements: We just launched a new email challenge called Daily SVG Images which will be a perfect way to practice the skills taught in this post.

(Update 3/27/17): I have begun the process of creating a video course for providing a very clear and detailed break down of SVGs. I will cover explaining SVGs “under the hood”, using Affinity Designer to create detailed vector graphics, animation with CSS, GreenSock, Mo.js, and Anime.js, as well as some practical applications of UX animations. You can book access here.

In my previous post, we walked through the creation of a cute koala vector graphic image using Affinity Designer.

With this foundation, we can push forward and learn how to take that vector graphic, export it as an SVG, and place it on a web page. Hopefully, you will see that this can be done with ease.