Forum Tip #9: SVGs

Hey, everyone, Guil here with a new Treehouse forum tip. 0:00 So Ralph Collar, one of our Treehouse students, recently posted 0:03 a question regarding sizing and positioning SVGs as backgrounds with CSS. 0:07 He created an example in Codepen where he was having 0:12 a little trouble positioning and sizing those SVGs within their container. 0:16 Now his goal is to display SVGs that can scale to the 0:21 full width and height of their parent containers. 0:25 So Ralph, let's see if we can help you out with this. 0:28 So I brought some of Ralph's code from Codepen into our local demo here. 0:32 Now here is Ralph's Codepen example. 0:38 He built his with FAS but I've changed the 0:41 demo to pure CSS just to simplify things a bit. 0:44 So in our index file, we have a wrapper, div and three nested divs. 0:48 One has a class of header, the other two are columns and 0:55 they each have these heart-1, heart-2 and heart-3 spans nested inside. 0:58 And that's where we'll be adding our SVG backgrounds. 1:03 Now for those of you that haven't worked with SVGs yet, SVG or Scalable 1:07 Vector Graphics is an XML based file format for describing 2D vector graphics. 1:12 So it's all vector. 1:17 It's similar to how vector graphics are created in a tool like Illustrator. 1:19 It draws 1:23 graphics using math and geometry instead of pixels, which are 1:24 generally used in bitmap based files, like GIFs or JPGs. 1:28 Now because of this, there's no distortion or 1:31 loss of quality in the graphic, at any size. 1:34 And it has really good browser support, as we can see here. 1:38 It's supported in all the latest browsers, including IE 9. 1:41 And up. 1:45 So if we take a look at the Codepen example 1:47 in this CSS window and we scroll down to this hardy silent selector here we can see 1:49 that what Ralph did was he used a data URI to bring in the SVG as a background. 1:55 Now what data URIs do is they include all the image 2:02 data directly in the HTML or in this case the CSS. 2:06 So this whole string of code here is all the data used 2:10 to create that SVG and because of this, no 2:14 extra HTTP request is needed to render the SVG. 2:18 Now to create it, he either used a URI generator that 2:22 takes the SVG information used to create the graphics and encodes 2:26 it into what's called a base-64 format or he might have 2:30 done it with a command line or even JavaScript can do it. 2:35 So let us know how 2:38 you created this, Ralph, please share it with our students. 2:40 So for this forum tip, I will be going through two demonstrations 2:44 of how to position and size SVGs as backgrounds within parent containers. 2:48 So first, let's go into our first demo here in the index.html file. 2:54 And let's add some structure to this, with a little CSS. 2:59 As we can see, we're just seeing that 3:03 Hearty Heart text that's inside our span elements. 3:05 So, let's go into our style sheet and quickly add some CSS to the header. 3:09 We'll make the height eighty pixels, we'll give it a background 3:16 color let's say #485777. And 3:20 let's style some of those column elements, so we'll call 3:25 the column class and we'll float them left and let's give them a width 3:30 of 60%. And let's give them a height of 350 3:35 pixels, just so you can really see those columns 3:40 and a background color of #d8cebb and let's 3:45 add another column selector that will target 3:50 any column that is a last child element. That way 3:55 we can give it a width of 40%. And we'll give this one a 4:00 different background color. Let's say #BAAC98. 4:05 And if we save it and take a look at it in our browser. 4:11 We can see the structure is a little more prominent. 4:15 There's the header and there we 4:19 have our two columns. 4:20 Now we're gonna include those SVGs as background 4:21 images to the header and each of these columns. 4:24 Then we'll see how we can size and position them within those elements. 4:27 All right, so now let's add the SVGs as background, and 4:31 we'll want to add them to each of these heart elements. 4:35 So what we'll do is create a new selector, a sub-string matching attribute selector 4:38 actually, that will target any element that begins with a class heart. 4:46 So we'll say heart-. So now we can add a background property. 4:53 And the value for URL can be that data URI key added here as a background. 5:00 So I'll just go ahead and copy that. And we'll paste it into our URL 5:05 parameter here. 5:11 So I'll just go ahead and change these settings to word wrap. 5:13 So you can see it a little clearer. 5:16 And let's take a look. And there we see our SVGs, as backgrounds. 5:18 But we only want one heart to display. 5:24 So let's go back into our background property, 5:26 and add a background position value of no repeat. 5:28 And there we go. We just see one heart as the SVG graphic. 5:34 So now let's go back and give it a few more 5:38 CSS properties and values that will indent some of that text. 5:39 So we don't see it. 5:43 So position it off the page. So first, let's display it block 5:44 and let's give it a text indent of 100% 5:50 and we'll just say overflow hidden. 5:56 Cool. 6:02 And, we'll follow that with a white space no wrap. 6:03 Okay. 6:09 So now we're just seeing the graphic without the text, cool. 6:09 So now we can start positioning and sizing them. 6:12 Now, the first thing we'll do is we'll give each of those elements a height of 6:15 100%, which as we can see makes them span the full height of their 6:20 parent container. 6:27 Now if we want to position each 6:29 of these SVGs perfectly centered within their container. 6:31 Now we can add a background position property and give it the value center. 6:35 And now each SVG is perfectly positioned 6:43 in the center of their containing elements. 6:47 So next, let's go ahead and adjust the 6:50 sizes and positions of these heart-1 and heart-2 graphics. 6:52 So back in our CSS we'll select that heart-1 element. 6:58 And let's change the background positions. 7:04 So this time can give it a value of ten pixels and ten pixels. 7:07 And let's make it a little smaller so we will make the background size 90 pixels. 7:11 So now if we refresh it we see how 7:18 the heart-1 element, which is inside of that header. 7:22 Is now 90 pixels wide and it's positioned ten 7:25 pixels from the left and ten pixels from the top. 7:29 So let's see what happens when we re-size our next element here. 7:32 So, back in our style sheet let's select 7:36 heart-2 and this time we'll use a percentage 7:40 as the background size. So, we'll say background size 50%. 7:44 And let's make the background position 7:51 a little different from our previous example. 7:53 Let's say right bottom. 7:56 And let's take a look at it in the browser. 7:59 So now it's 50% wide and it's positioned in the bottom right corner. 8:02 Now if we give our span 8:08 element a background color, let's say crimson, 8:09 we can really see what's going on here. 8:14 So. 8:16 When we refresh it we can see how the span element 8:16 takes up the entire parent element but positions the SVG background accordingly. 8:18 So, positions it at the right bottom and the background size is 50%. 8:24 So now we can change any of those values to whatever we want. 8:29 For example, 8:33 right top will position it over 8:34 on the top right corner. And if we say something like left top, 8:39 then as we can imagine, it will position it in the left, in the top left corner. 8:44 Okay, so let's go into our second demo. 8:50 So what if we introduced another element in the header, for example a navigation? 8:54 So if we go over into our second demo here we can see the, the same SVG graphics. 8:59 As background images, but now we have this menu here. 9:03 So let's say this is a logo, and this is our navigation. 9:06 So how can we position this SVG logo next to our navigation. 9:10 Well, let's get into that. 9:16 So, I will close out our last demo and 9:17 I'll go into this demo two directory and I'll open 9:20 the index file and the CSS file. 9:24 So here we have the same elements, just this 9:26 unordered list of the class menu, with our nav links. 9:29 But let's give our classes, containing the heart graphics. 9:32 This time I've made them into divs. 9:37 So let's give them more meaningful names instead 9:39 of heart-1, heart-2, or heart-3, just for this demo. 9:41 So let's say heart-logo for the first one, and 9:44 we'll give the second one a class heart-main, and 9:47 this one will be heart-sidebar. So now we can 9:50 go into our style.css and start adding sizes and 9:54 positions to the background SVG. So the first thing we'll do is select that 9:59 heart-logo class, which is the div 10:03 containing that SVG in the header section. And let's start by giving it a width 10:09 of 80 pixels. We'll also give it a height of 55 pixels. 10:15 And let's float it left so that it floats nicely to the left side of our header. 10:22 And let's also give it a background color so we can really see what's going on. 10:29 So we'll say, background-color: crimson, and we'll follow that with some margins. 10:34 So let's say, 12 pixels 10:39 from the top, 25 on the right, 12 on the bottom, 12 on the left. 10:40 So let's take a look at it. 10:47 So in the browser there we see this heart 10:48 element with the SVG background floated nicely to the left 10:51 side of the header and we can see the amount 10:56 of space that's taken up by that bright crimson background. 10:59 So now let's add a background size to make 11:03 it a little smaller. So, let's say, 90%, so we'll give it 11:06 a background size property and we'll give it the value 90%. 11:11 And when we take a look at it in the browser we can see that it's now a 11:16 little smaller, but it's positioned in the top left corner of that element. 11:21 Well, let's take care of that, if we go back in to our heart-logo 11:26 rule, and we adjust the background position. 11:31 If we make it the value center, we can 11:36 see how it now sits perfectly centered within the element. 11:39 So now the SVG will always be sized 11:44 and positioned this way inside the parent container. 11:46 So next, let's go into our columns and 11:49 let's make the SVG here absolutely centered inside 11:52 this parent container. 11:57 This way it's always vertically aligned middle and horizontally aligned centered. 11:59 So first, we'll need to establish a new positioning context for our columns. 12:03 So, let's go into this call rule here and add a position property and we'll make the 12:08 value relative so anything that is absolutely positioned 12:15 inside the column will be relative to the column. 12:18 So now let's 12:22 target this heart-main div containing our next SVG and we'll select the class, 12:23 heart-main, and let's start by giving it a percentage-based width. 12:31 Let's say 55% and we'll also make the 12:38 height 55%, and now we can position it absolute. 12:42 And the cool thing is 12:47 that if we give every positioning offset the value zero, It will 12:48 be absolutely centered within the parent. So let's say top zero, right zero. 12:53 We'll also say bottom zero, and finally left zero. 12:59 Now if we take a look at it in the 13:05 browser, it's still positioned over on the top left corner. 13:07 Well that's because we're still missing 13:11 one important property and that is a margin of auto. 13:13 So let's say margin, auto. 13:19 And now when we refresh it, we can see how that element containing the 13:22 SVG is now perfectly aligned centered and 13:26 vertically positioned middle inside its parent column. 13:29 So finally let's add some position and background styles 13:35 to our third SVG here, in the heart-sidebar elements. 13:38 Let's say heart sidebar and let's give this one a height of 100%. 13:43 So the height will always span 100% of the parent containers max width. 13:49 And let's give this one a background size property, like we did with the others. 13:55 And we will make it 40%. 14:00 And let's give it a background position. This time we will make it 20% and 30%. 14:04 So it's 20% from the left, and 30% from 14:12 the top and we can see what that's looking like. 14:16 So now again we can use any of those position values 14:20 to change the position of our SVG, so we say 50%, 60%, 14:23 now it's 50% from the left and it's 60% from the top. 14:28 And if we give our element a 14:35 background color, let's once again say background-color, crimson. 14:37 We can really see what's going on here. 14:43 Once again it's spanning the full width and height of the parent column. 14:45 We're only sizing and positioning the svg background. 14:50 So we have complete control over where and how we want to position it. 14:54 So, as we just saw, positioning and sizing SVGs 14:59 is very similar to positioning regular images with CSS. 15:02 So Ralph, I hope we answered a lot of 15:06 your questions and helped you out with this tip. 15:09 If you or any of our students have any questions regarding our content 15:11 or anything web related go ahead and post it on the forum and 15:16 one of our students or a Treehouse staff member will answer your question 15:20 and help you out, or it might be answered with a video forum tip. 15:23

You need to sign up for Treehouse in order to set up Workspace

Sign up