1 00:00:00,000 --> 00:00:04,978 [MUSIC] 2 00:00:04,978 --> 00:00:08,388 If you've ever looked closely at a computer screen or 3 00:00:08,388 --> 00:00:10,965 tried to enlarge a digital photograph, 4 00:00:10,965 --> 00:00:16,380 you've probably seen that the image is composed of squares called pixels. 5 00:00:16,380 --> 00:00:21,180 Graphics that are composed of pixels are know as raster graphics. 6 00:00:21,180 --> 00:00:25,850 In recent years, there's been a huge variety of new phones, tablets, 7 00:00:25,850 --> 00:00:30,800 desktops and more that not only have different physical dimensions, but 8 00:00:30,800 --> 00:00:33,410 also have different pixel densities. 9 00:00:33,410 --> 00:00:34,680 In other words, 10 00:00:34,680 --> 00:00:41,049 [SOUND] traditional screens have included about 72 pixels per inch, or 72 ppi. 11 00:00:41,049 --> 00:00:46,917 Newer screens [SOUND] have far more pixels in the same amount of space, 12 00:00:46,917 --> 00:00:49,356 pushing beyond 300 ppi. 13 00:00:49,356 --> 00:00:53,807 This is great for the end user because it means images are rendered with 14 00:00:53,807 --> 00:00:56,420 increased detail and clarity. 15 00:00:56,420 --> 00:00:59,730 However, it can be a real problem for web designers. 16 00:00:59,730 --> 00:01:04,040 Different screen sizes can be handled with responsive web design, but 17 00:01:04,040 --> 00:01:06,520 what about different pixel densities? 18 00:01:06,520 --> 00:01:09,833 If we don't [SOUND] deliver an image with [SOUND] enough resolution, 19 00:01:09,833 --> 00:01:10,905 it will look blurry. 20 00:01:10,905 --> 00:01:14,321 And if we deliver an [SOUND] image with too much resolution, 21 00:01:14,321 --> 00:01:18,586 [SOUND] there will be wasted bandwidth and our websites will load slower. 22 00:01:18,586 --> 00:01:20,030 So, what's the alternative? 23 00:01:21,310 --> 00:01:25,530 This is where scalable vector graphics are a great solution. 24 00:01:25,530 --> 00:01:30,190 These files are not composed of pixels like a JPEG or a PNG file. 25 00:01:30,190 --> 00:01:33,116 Rather, they are composed of vectors. 26 00:01:33,116 --> 00:01:37,800 In an SVG [SOUND] file, a vector is just a point in 2D space with an [SOUND] x and 27 00:01:37,800 --> 00:01:38,870 a y coordinate. 28 00:01:38,870 --> 00:01:41,312 When you [SOUND] make several of these points and 29 00:01:41,312 --> 00:01:45,079 [SOUND] connect them together, you can make [SOUND] shapes and outlines. 30 00:01:45,079 --> 00:01:49,593 When you zoom [SOUND] into an SVG, it appears to be infinitely detailed and 31 00:01:49,593 --> 00:01:51,446 it won't become pixelated. 32 00:01:51,446 --> 00:01:54,689 The vectorized imagery is automatically projected into 33 00:01:54,689 --> 00:01:56,653 the [SOUND] rasterized pixel grid. 34 00:01:56,653 --> 00:02:01,238 So, even though you're still looking at physical pixels on your screen, 35 00:02:01,238 --> 00:02:05,110 the lines and colors still look sharp at all different scales. 36 00:02:06,270 --> 00:02:10,220 So then, why not just use SVGs all the time? 37 00:02:10,220 --> 00:02:14,750 Well, if an image needs an extraordinarily huge variance in 38 00:02:14,750 --> 00:02:17,250 each pixel to render properly, 39 00:02:17,250 --> 00:02:23,130 it would actually take more data to store it as an SVG than to just use pixel data. 40 00:02:23,130 --> 00:02:27,650 That's why digital cameras don't take photographs as vector images and 41 00:02:27,650 --> 00:02:31,370 probably why they will never need to either. 42 00:02:31,370 --> 00:02:36,220 It's because even the highest resolution image sensors will still 43 00:02:36,220 --> 00:02:41,320 capture images where every single pixel is almost always different from all of 44 00:02:41,320 --> 00:02:43,230 the neighboring pixels. 45 00:02:43,230 --> 00:02:44,720 For SVGs to work, 46 00:02:44,720 --> 00:02:49,520 there needs to be an identifiable pattern that the computer can follow. 47 00:02:49,520 --> 00:02:51,740 So, here's the general rule. 48 00:02:51,740 --> 00:02:56,430 If you're trying to put a photograph or traditional artwork on a Web page, 49 00:02:56,430 --> 00:02:59,912 you should almost always use a raster file format. 50 00:02:59,912 --> 00:03:04,663 If [SOUND] it's an image that's more graphical in nature, such as a logo, 51 00:03:04,663 --> 00:03:08,874 a [SOUND] comic strip, a map [SOUND] of the globe, a [SOUND] pie chart or 52 00:03:08,874 --> 00:03:14,473 anything else that doesn't need extremely detailed color information like a photo, 53 00:03:14,473 --> 00:03:16,878 then an SVG is probably the way to go. 54 00:03:16,878 --> 00:03:21,200 That's not to say that SVGs are not capable of quite a lot of color. 55 00:03:21,200 --> 00:03:23,760 They are capable of advanced gradients and 56 00:03:23,760 --> 00:03:28,810 subtle blending, allowing SVGs to be used for intricate illustrations. 57 00:03:28,810 --> 00:03:30,470 Now, that's enough theory. 58 00:03:30,470 --> 00:03:33,615 Let's actually learn how to create scalable vector graphics.