Vector Graphics

[MUSIC] 0:00 If you've ever looked closely at a computer screen or 0:04 tried to enlarge a digital photograph, 0:08 you've probably seen that the image is composed of squares called pixels. 0:10 Graphics that are composed of pixels are know as raster graphics. 0:16 In recent years, there's been a huge variety of new phones, tablets, 0:21 desktops and more that not only have different physical dimensions, but 0:25 also have different pixel densities. 0:30 In other words, 0:33 [SOUND] traditional screens have included about 72 pixels per inch, or 72 ppi. 0:34 Newer screens [SOUND] have far more pixels in the same amount of space, 0:41 pushing beyond 300 ppi. 0:46 This is great for the end user because it means images are rendered with 0:49 increased detail and clarity. 0:53 However, it can be a real problem for web designers. 0:56 Different screen sizes can be handled with responsive web design, but 0:59 what about different pixel densities? 1:04 If we don't [SOUND] deliver an image with [SOUND] enough resolution, 1:06 it will look blurry. 1:09 And if we deliver an [SOUND] image with too much resolution, 1:10 [SOUND] there will be wasted bandwidth and our websites will load slower. 1:14 So, what's the alternative? 1:18 This is where scalable vector graphics are a great solution. 1:21 These files are not composed of pixels like a JPEG or a PNG file. 1:25 Rather, they are composed of vectors. 1:30 In an SVG [SOUND] file, a vector is just a point in 2D space with an [SOUND] x and 1:33 a y coordinate. 1:37 When you [SOUND] make several of these points and 1:38 [SOUND] connect them together, you can make [SOUND] shapes and outlines. 1:41 When you zoom [SOUND] into an SVG, it appears to be infinitely detailed and 1:45 it won't become pixelated. 1:49 The vectorized imagery is automatically projected into 1:51 the [SOUND] rasterized pixel grid. 1:54 So, even though you're still looking at physical pixels on your screen, 1:56 the lines and colors still look sharp at all different scales. 2:01 So then, why not just use SVGs all the time? 2:06 Well, if an image needs an extraordinarily huge variance in 2:10 each pixel to render properly, 2:14 it would actually take more data to store it as an SVG than to just use pixel data. 2:17 That's why digital cameras don't take photographs as vector images and 2:23 probably why they will never need to either. 2:27 It's because even the highest resolution image sensors will still 2:31 capture images where every single pixel is almost always different from all of 2:36 the neighboring pixels. 2:41 For SVGs to work, 2:43 there needs to be an identifiable pattern that the computer can follow. 2:44 So, here's the general rule. 2:49 If you're trying to put a photograph or traditional artwork on a Web page, 2:51 you should almost always use a raster file format. 2:56 If [SOUND] it's an image that's more graphical in nature, such as a logo, 2:59 a [SOUND] comic strip, a map [SOUND] of the globe, a [SOUND] pie chart or 3:04 anything else that doesn't need extremely detailed color information like a photo, 3:08 then an SVG is probably the way to go. 3:14 That's not to say that SVGs are not capable of quite a lot of color. 3:16 They are capable of advanced gradients and 3:21 subtle blending, allowing SVGs to be used for intricate illustrations. 3:23 Now, that's enough theory. 3:28 Let's actually learn how to create scalable vector graphics. 3:30