Scalable vector graphics (SVG) offers a way to draw your own shapes using an XML markup language. SVG works within a vector environment. This means, it uses geometrical primitives to create an image. In simple terms, you use a variety of shapes to build your picture instead of pixels. Before tackling the nitty-gritty steps in the design process, spend some time getting to know SVG.
What is SVG?
This first section offers you a basic definition and some background. As with all computer languages, there is a history to scalable vector languages. Understanding where the concept of SVG comes from will help you understand why it is necessary and how you might apply it to your design projects. SVG is unquestionably just now coming of age. This language applies your XML skills to creating vector images.
Why Use SVG—What are the Advantages?
With all the options out there for building images for a website, you might be asking yourself why SVG? This article walks you through some of the advantages of learning scalable vector graphics and gives you insight on what the future holds. SVG is not a new language. In the past, there were compatibility issues. Those days are over and now is the time to make use of this functional XML based language.
SVG Graphs—The Mystery of Coordinates
SVG is going to answer the question “When will I ever use geometry in real life?” This language works on a graphing system similar to what you learned in geometry, but there are a few differences. You will need to understand graphs and, specifically, the SVG graph before you move on to building shapes. As you go further down the SVG path, you will see that graphing coordinate points is the heart of building successful images.
HOMEWORK DAY 1: Make a list of three ways you can use SVG in your designs and how you benefit. Draw a rough SVG graph and practice setting coordinates on the page. Focus on what happens to a line when you change the X and then the Y coordinate.