(upbeat music) Welcome back to KnowledgeCity scores on cascading style sheets. I'm Cliff Brozo on your instructor and today's lesson, we're going to look at formatting scalable vector graphics. Let's take a look at what we're going to do. The first thing that we're going to explore is what happens when CSS battles itself. We're going to look at how our CSS formats different objects and battles itself because the names wind up being the same. Then we'll take a look at and explore scalable vector graphics. We'll explore what the view box is and how that lets us look into this image that we're creating. We'll look at not only a circle but some polygons and rectangles and paths and then we will embed our CSS right into a scalable vector graphics file. When we created the KnowledgeCity spinning circle, we created a scalable vector graphic image, and we formatted that by setting our font size and family, the weight, turning the text into uppercase, putting some letter spacing to keep the letters just a little bit more apart than normal and filling those letters with a color. That's all in the SVG file. The CSS file works the same way and what we were doing was trying to accomplish the same sort of formatting on a different object. What we wound up with was, when one changed, the other changed as well. So we needed to put the CSS on the left-hand side of the screen, right into the SVG file. And that kept it separate from what was in the CSS file. One of the things that we're going to do is something that might be some fun. First, we have to understand down at the bottom left-hand corner of the screen, that vector graphics is going to give us a clear sharp image, no matter how big we make it. Unlike raster graphics, the other file types which will distort as we make them bigger. Scalable vector graphics allows three types of graphic objects, shapes such as paths and outlines, and that'll be straight lines and curves, some bitmap images and text. Now, luckily all major web browsers have scalable vector graphics support. So we're in good shape here. What I've decided to do for some fun, is produce three common roadway signs. A stop sign, a one-way sign, and a roadway exit sign. Let's take a look. The stop sign here's really a polygon and the polygon has multiple points and the points are defined as a starting location, how far over and how far down. And then from that point, we move around the stop sign. So for example, 55 is 50 pixels over from the left and five pixels down from the top. From that point, we move over to 100, 5 that's 100 pixels over and five down from the top. Then we move to 125 over and 30 from the top, 125 over, 80 from the top, 100 over and 105 from the top, 50 over and 105 from the top, 25 over and 80 from the top, 25 over, and 30 from the top and that will complete our polygon. So if I have an eight sided object, what I'm going to do is draw out the points for all eight signs. Now, the reason why there are two polygons here is because one of them is going to be red and the other one is going to be white. The red one is the first one which I've declared as polyA and over in my CSS I've defined polyA to have a fill of red. Polygon B is the white border that goes inside of the red polygon and that has a stroke of white and a fill of red. And the stroke is the actual line. So when I'm drawing this, you'll notice that the beginning part the 50, 5 is really 52, 10. So this point right here is just a little bit over more towards the left and five pixels down. And each number is just a little bit over and a little bit more down. Let's take a look at some other signs. One way signs are a combination of rectangles and polygons. The black part of the one way sign I gave a curved edge and those are rectangles. The rx factor here is similar to the border radius. So 25 pixels is my border radius which is why I get a rounded corner. But drawing my white arrow is really a polygon. In this case, polygon C is my white arrow, that's filled with white and polygon C is down here in line seven and I start out with 175 over 25 down all the way out to 305 over 25 down. 305 over and five down. So I draw a line from the end here all the way up then a slanted line to 360 and 45. Another slanted line 305, 85 then go back up 305, 70 back to 175 and 70. And that is how you draw a polygon. The text fits into the proper spot, I fill the text with white but I gave it a location of coordinates of 38 and 70 which is where it's gonna start and I give it a font size of 36. What was the most fun was creating a roadway sign. Now I'm gonna leave this up just for a second and ask you to think which one is the real one and which one is the one that was created with CSS and SVG. Well, they look the same. They sure do look the same. One is a little clearer than the other and if you guessed that the original Morristown Mahwah sign which is on 287 in New Jersey, is the one on the left, you were right. The one on the right is the one that was created with CSS. Now, perhaps with a little bit more care and the proper font I would have been able to duplicate it exactly but I don't have the roadway font that the United States interstate highway system uses, so I try to get the font as close as possible. If you look carefully, you'll see that the haw in Morristown is slightly different than the haw in my version. The interstate 287 would have been a very very difficult scalable vector graphics to create because it'd be odd shape. It's not a rectangle, it's not a circle. And I would have had to create a path or an ellipse that draws this symbol for me. Luckily it's available on the web as a completed SVG file and all they needed was to import it into my document.
