Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Vector Graphics

3:34 with Nick Pettit

Graphics that are composed of pixels are known as raster graphics. However, an SVG is a series of interconnected points called vectors. These points and lines form shapes that are automatically projected into the pixel grid of a computer screen. The end result is a graphic that has infinite resolution, regardless of how the image is resized.

Resources

Browser Compatibility

Browser support for SVGs is generally good. However, there are a few issues to be aware of in Internet Explorer, particularly that SVGs are only supported in IE 9+. Read more about SVG browser support at caniuse.com.

SVG and Illustrator Files

Here are the SVG and Adobe Illustrator files used in this course. If you're using Workspaces with this course, there is no need to download these files; they are just listed here in case you prefer to use another text editor.

Free Vector Drawing Tools

If you're looking for an alternative to Adobe Illustrator, here are some free vector drawing tools that work in a web browser. All of them should be able to export to the SVG format.

  • 0:00

    [MUSIC]

  • 0:04

    If you've ever looked closely at a computer screen or

  • 0:08

    tried to enlarge a digital photograph,

  • 0:10

    you've probably seen that the image is composed of squares called pixels.

  • 0:16

    Graphics that are composed of pixels are know as raster graphics.

  • 0:21

    In recent years, there's been a huge variety of new phones, tablets,

  • 0:25

    desktops and more that not only have different physical dimensions, but

  • 0:30

    also have different pixel densities.

  • 0:33

    In other words,

  • 0:34

    [SOUND] traditional screens have included about 72 pixels per inch, or 72 ppi.

  • 0:41

    Newer screens [SOUND] have far more pixels in the same amount of space,

  • 0:46

    pushing beyond 300 ppi.

  • 0:49

    This is great for the end user because it means images are rendered with

  • 0:53

    increased detail and clarity.

  • 0:56

    However, it can be a real problem for web designers.

  • 0:59

    Different screen sizes can be handled with responsive web design, but

  • 1:04

    what about different pixel densities?

  • 1:06

    If we don't [SOUND] deliver an image with [SOUND] enough resolution,

  • 1:09

    it will look blurry.

  • 1:10

    And if we deliver an [SOUND] image with too much resolution,

  • 1:14

    [SOUND] there will be wasted bandwidth and our websites will load slower.

  • 1:18

    So, what's the alternative?

  • 1:21

    This is where scalable vector graphics are a great solution.

  • 1:25

    These files are not composed of pixels like a JPEG or a PNG file.

  • 1:30

    Rather, they are composed of vectors.

  • 1:33

    In an SVG [SOUND] file, a vector is just a point in 2D space with an [SOUND] x and

  • 1:37

    a y coordinate.

  • 1:38

    When you [SOUND] make several of these points and

  • 1:41

    [SOUND] connect them together, you can make [SOUND] shapes and outlines.

  • 1:45

    When you zoom [SOUND] into an SVG, it appears to be infinitely detailed and

  • 1:49

    it won't become pixelated.

  • 1:51

    The vectorized imagery is automatically projected into

  • 1:54

    the [SOUND] rasterized pixel grid.

  • 1:56

    So, even though you're still looking at physical pixels on your screen,

  • 2:01

    the lines and colors still look sharp at all different scales.

  • 2:06

    So then, why not just use SVGs all the time?

  • 2:10

    Well, if an image needs an extraordinarily huge variance in

  • 2:14

    each pixel to render properly,

  • 2:17

    it would actually take more data to store it as an SVG than to just use pixel data.

  • 2:23

    That's why digital cameras don't take photographs as vector images and

  • 2:27

    probably why they will never need to either.

  • 2:31

    It's because even the highest resolution image sensors will still

  • 2:36

    capture images where every single pixel is almost always different from all of

  • 2:41

    the neighboring pixels.

  • 2:43

    For SVGs to work,

  • 2:44

    there needs to be an identifiable pattern that the computer can follow.

  • 2:49

    So, here's the general rule.

  • 2:51

    If you're trying to put a photograph or traditional artwork on a Web page,

  • 2:56

    you should almost always use a raster file format.

  • 2:59

    If [SOUND] it's an image that's more graphical in nature, such as a logo,

  • 3:04

    a [SOUND] comic strip, a map [SOUND] of the globe, a [SOUND] pie chart or

  • 3:08

    anything else that doesn't need extremely detailed color information like a photo,

  • 3:14

    then an SVG is probably the way to go.

  • 3:16

    That's not to say that SVGs are not capable of quite a lot of color.

  • 3:21

    They are capable of advanced gradients and

  • 3:23

    subtle blending, allowing SVGs to be used for intricate illustrations.

  • 3:28

    Now, that's enough theory.

  • 3:30

    Let's actually learn how to create scalable vector graphics.

You need to sign up for Treehouse in order to download course files.

Sign up