Scalable Vector Graphics (SVG): Definition & Examples

Instructor: David Gloag

David has over 40 years of industry experience in software development and information technology and a bachelor of computer science

In this lesson, we'll take a look at scalable vector graphics, what they are, why we use them, and some examples of its use. At the end, you should have a good understanding of this significant technology.

The Need-for-Speed

The world is not enough, as the saying goes. We convince ourselves regularly that we want something new. And not only do we want more, but we want it yesterday. If you don't agree, consider the last time you wanted some information on your cell phone, or tablet. Could you stop at only one search? Did it happen quickly enough? For most of us, the answers are 'no' and 'no'. It turns out that much of the information we want is graphical in nature. To satisfy our constant need-for-speed, an efficient method for gathering this information must be used. One way is through the use of Scalable Vector Graphics.

What Are Scalable Vector Graphics?

Scalable Vector Graphics (SVG) is a tool for working with two-dimensional images. There are two kinds of information that make up an SVG. The first is a file format specification that describes how an image is represented when stored electronically (denoted with a '.SVG' file extension). Elements of the specification include:

  • Shapes - primitives such as lines, rectangles, and circles which can be represented mathematically.
  • Characters - number and alphabetical symbols that can also be represented mathematically.
  • Raster Graphics - images that are described using picture elements (pixels).
  • Color Maps - lists that describe the color values used.

The second part of the SVG tool is an application programming interface (API) that describes how an image can be manipulated programmatically. Taken together, these capabilities provide an effective means to store and process images.

Why Do We Use Scalable Vector Graphics?

SVG was developed back in a time when computing resources were at a premium. As a result, SVG has the following characteristics:

  • Space - SVG uses space efficiently, the file format holds only the information that describes how an image is constructed, not all of the information itself.
  • Processing Speed - SVG files can be processed faster, there is less information to process which increases processing speed.
  • Transmission Speed - SVG files can be transmitted faster, there is less information to transfer which increases the transfer speed.
  • Scalability - SVG file can be rendered at any size without loss of information or fidelity. This is directly related to the elements that make up its file format.

Today, these aspects of SVG are less important in traditional computers because they have more resources to play with. But as you will see, SVG has found a new home in the various handheld devices and specific applications that we use heavily today. We'll talk more about them in the next section.

To unlock this lesson you must be a Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use

Become a member and start learning now.
Become a Member  Back
What teachers are saying about
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account