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
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.