Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

What is SVG?

SVG stands for Scalable Vector Graphics. It is an XML language and file format, which allows you to code two-dimensional graphics that scale and can be manipulated via CSS or JavaScript.

From the W3C on SVG:

SVG is an XML language. This is important for at least three reasons. First, the code tends to adhere to agreed upon standards of how SVG should be written and how client software should respond. Second, like all XML, it is written in text, and can generally be read not only by machines but also by humans. Third, and perhaps most importantly, JavaScript can be used to manipulate both the objects and the Document Object Model, in ways quite similar to how JavaScript is used in conjunction with HTML. If you already know how to use JavaScript and HTML for web-programming, the learning curve will be pretty gentle, particularly in view of the benefits to be gained.

SVG can be a static image, like a logo or illustration, or a complex animation. In this course we’ll talk mostly about the static version of SVG but we will touch on animation later on in the course.

All SVG graphics are plotted on a coordinate system of at least an x and y axis. When authoring SVG, we give the browser instructions on where to plot points on the coordinate system and connect them. By connecting the plotted points we can create shapes, lines, or paths.

Because SVG is vector-based, there isn’t any degradation or loss of fidelity when the graphics are scaled up. They are simply redrawn to accomodate the larger size. This makes this perfect for multi-context scenarios, like Responsive Web Design.

Your exposure to SVG is most likely from the web design and front-end development communities. I wrote the course with that in mind. We are going to approach SVG from the perspective of a web designer or web developer, presumably like yourself. In the web design world SVG is most commonly used to handle assets that we would otherwise have used bitmap files like JPEGs, PNGs, or GIFs.

The goal of this course is to familiarize you with SVG as a technology, allow you to use it immediately in your web design and develop and projects, and give you a solid foundation onto which you can build.

Throughout the course, I will link to relevant resources that will help you learn even more about SVG. Additionally, at the end there is also a lengthy list of resources for you to access. These resources are not only great for you to read, but they also document research that I did in creating the course.

Let’s go ahead and jump in and get started learning about and creating SVGs.

Ready to learn more?

Get the Full Video Course