Join Chris Converse for an in-depth discussion in this video Adding classes and styles for symbols, part of Design the Web: Responsive SVG Images.
- Now that we've created a more simplified responsive SVG graphic, now we're gonna work on something a little more complicated. So in the exercise files, let's open up coffee_consumption.html up in a text editor. So here we have a file very similar to before with a heading area and a body area. We have a div with a class of container, and in here we have an inline CSS style. We have our container element, again with a width set to 100%, a height of 350, and a border. Now before I continue I want to open this up in a browser, or in a preview area if your text editor has a preview.
So here we can see the div container with the border. So now back in the HTML inside of the div container, let's add an image tag. SRC for source = "" and the tag, and for the source we're gonna type coffee_consumption.svg. Once that's in place in the browser, you'll see the SVG graphic show up. Now this does look like kind of a mess. What we have here is a whole series of graphics and symbols placed inside of groups that when they're separated will give us three different states of this infographic.
So to more visually represent what's going on, when we first see this graphic loaded into the page and none of our groups are hidden through media queries, we see all of the artwork contained in this 300 by 300 pixel SVG graphic. Now once we apply our media queries, we'll be able to separate out these individual groups. So on the left-hand side we have the artwork that will show on the largest screens which has smaller typography and more design elements. In the middle we have our medium screen size which has the fonts a little bit larger, a little bit less artwork.
And then finally we have our graphic that will show on the smallest screens. Now the artwork has been designed to exactly the same stage size for all three of these states. However, when the SVG graphic starts to scale, all of the content's gonna get smaller. So the large typography and design elements on the far right are gonna show up better on a mobile screen. Now one thing that I'll call your attention to when we get into the SVG file is that all of the artwork has been wrapped into symbols. So all of the text labels which have been converted to outlines, the values, the coffee cups, and the person icon are all wrapped in symbols and then reused in different groups to create different versions of our graphic.
So now that we know why the graphic looks like kind of a mess right now, the last thing we're gonna do inside of the HTML file is conform this graphic to the container. So just like we did in the last movie, we're going to copy the container class name, paste it on the next line, put a space, type img to target the image inside of the container, then a space, put in our brackets. We'll set a width of 100%; then we'll set height to 100% as well.
Once we put those in place, we'll now see that the SVG graphic conforms to its container. And then if we preview this in a browser, resize the window, we'll see that the SVG graphic will now scale within its container. So now with those settings in our HTML file, let's save that. Let's go back to the exercise files. Let's come over and open the coffee_consumption.svg up in our text editor. Now I'm going to open up the SVG graphic here, but still keep a preview of the HTML over on the right. And again, just like earlier we have a definitions area here with a style element, and then we have our CDATA inside of here with our /* css rules go here */.
Now inside of this SVG graphic, it does look kinda long and might look a little intimidating, but if we look at what's happening here, we can see that we basically have a whole series of symbols that are being defined. So here's the first symbol with an ID of art_coffecup. So this is the symbol that defines the coffee cup. If we make any change to the coffee cup code here, that will update all instances of the coffee cup in all three of these different groups. We can keep scrolling down. We can see art_person. That's the person pictogram over here.
Keep scrolling down. Next we have an ID of denmark. This is the artwork that says Denmark. And again, we're using this in three different states. And I've also come in here and added a class called country_name. Now IDs are only used on a web page once, or in an SVG only once. So in order to create a hook so that I could style all of the country names, I came in here and added a class called country_name. And if I scroll down, this is all of the type that's been converted to outlines.
Then we have an ID of denmark_value, and then a class of country_value. So I've added a country_name and a country_value for the name of the country and the value which is the number over here. Then we can keep scrolling through all of the individual symbols. Once we get to the bottom past all of the individual symbols, we'll see a background element here which defines the yellow-orange box in the background, and then we have our groups.
So we have a "g" tag which is a group, and then we have infographic_large, and then we have the use element here. The use element is using the xlink and targeting the individual symbol IDs. So here we're targeting #art_person. We have a width, and a height, and a transform setting, and an x and a y. So all of these properties are taking the artwork from art_person and positioning them in a specific place. And they're all being grouped inside of this tag with an ID of infographic_large.
Now if you'd like to learn more about using symbols inside of SVG, I do have another course here on the Lynda.com online training library called Using Symbols in SVG. And now back in our file if I continue to scroll down, we'll see another group with an ID of infographic_medium. And then finally at the bottom, infographic_small. So now let's scroll back to the top of the document. Let's go inside of our CSS area, and let's create a CSS rule to color the country names and the country values and the symbol of Heading B which says Biggest Coffee Drinkers.
So let's come in here and delete the CSS comment, and we'll start by creating a class called .country_name. Then we're gonna type a comma and a space. Then we're gonna type country_value and a space, put in our beginning and ending bracket. Then we're gonna fill all of these country names and numbers with the same brown color used in the headings. So in the CSS we're gonna type fill:#. Then we're gonna type 42 for red, 21 for green, and 0b for blue, then a semicolon.
Once that's in place we'll hit Save. come back over to our preview. Let's hit Reload, and now that might be a little subtle to see on a video, but the type did change from black to this brown color. Now next we're gonna change the heading that says Biggest Coffee Drinkers. And that's in a symbol that we called heading_b. So on the next line, I'll type .heading_b, beginning and ending bracket, fill:#, three fs for white then a semicolon.
I'll hit Save, come back to our preview and hit Reload. And now we'll see those headings showing up in white. So now that we've locked onto some custom classes that I've added inside of the SVG and took care of some styles of elements that were going to change based on different screen sizes, next we'll add some media queries in here and start to separate the different versions of our artwork based on those groups we looked at.