Scalable vector graphics (SVG) can easily be edited to change colors as well as to create symbols that can be reused in different places in your layouts.
- [Narrator] In order to prepare our phones for video we have to make some changes to how we're creating or working with our SVGs. SVG stands for scalable vector graphics and it's really no more than a simple text file with some definitions of paths like this. One of the things that we can do with this text file is actually edit what's in them with regular sort of commands we can actually add a style sheet and then target some of these elements so both this cat foreground and this dog background ID have the class of st0.
This was automatically created by illustrator and if you were to look at this document in Adobe Illustrator you would notice that these are actually the names of the layers. This also means that we can use almost regular style sheet sort of properties so we can target this st0 and then change the color of an element and the names for the colors in SVG are a little bit different so a color it's not going to be color or background it's going to be fill and then you would put in here the name of the color that you would want so here you would do D14348 that's going to be this red color.
Once this reloads this is going to look red and the one at the bottom is also going to look red because we're actually editing the original SVG file. There is another cool thing you can do with this and let's go ahead and take a look at this Android phone you'll notice that it's pretty much the same thing it's just maybe a little bit more complicated. It has all these other layers. I've collapsed all of them so you can see them all at once. We can in the same way sort of grab all these SVG so this is just a text file so you can grab all this SVG and actually insert it in your index that html instead of this image tag but that would be cumbersome because if we pasted that say everywhere where we have a photo so everywhere we have one of these it's going to be very repetitive and sort of make you include code a bunch of times but one of the things that we can do is create symbols within our page and then call those symbols as many times as we need.
Let's go ahead and show you how you can do that. We're going to start at the very top here of the body and we'll create an SVG and this SVG is going to have a class of defs only. These are just going to be definitions of a few symbols. I don't want this to show so I'm going to give it a height of zero and a width of zero as well and then I'm going to add a style definition here that's just again going to allow me to hide this so it's going to be shown as a block element.
Then I need to have a reference to the definition for SVGs and this is something we have to do with this version of xml, xmlns and this gets a link. Then in here we can actually define a symbol that we want to use over and over in the same page so we can just say symbol and then give this an ID and for this ID I'll do Android phone.
Then in here actually inside the symbol what I want to do is paste my Android phone definition. Now I don't need this SVG part right here I will in just a minute so I'm just going to grab all of the groups so if you don't have these collapsed if you have the right editor you can collapse these otherwise just sort of copy and paste everything including the styles all the way until right before the closing SVGs so yours might look a little bit all expanded like this but it's the same.
Sort of grab everything and we do need the beginning of the style sheet and then just select all the way down don't choose this closing SVG. I'm going to copy that going to go back into my index that html and I'm going to paste this as a symbol here. Let's go ahead and make sure that we indent this because then it'll be easier to collapse this. A lot of editors have this feature that if things are indented properly it's going to give you these little sort of closing symbols so we want to indent this so that they're at least like this and that way now it's easier for us to hide these and not have to see all that code.
Once we have this defined as a symbol then instead of calling these as images we can actually use them as a reference to this symbol. Let me show how you do that. First we're going to go back into the Android Phone and this time we're going to grab this SVG definition here because it has the width and height and some additional code that you would have to type in manually which would be a pain in here so I'm going to copy this SVG part and then I'm going to go here and look for the first phone.
The first phone is this create a detailed profile for each pet so it's not this logo. This logo is just a regular logo SVG so it would be right in here where we're calling this image and what I'm going to do is just paste that SVG make sure that I close it and I'll go ahead an indent it. Then in here what I'm going to do is create a reference.
I'm going to say use xlink;href= and then I will target the ID of Android phone. This is a stand alone tag so I need to close it like this. This is because SVGs aren't html they're xhtml so you should close them if they're single tags say like an image tag is a tag that doesn't have a beginning and an end. In that case you have to use this little notation something a little weird about SVGs.
The only other thing we have to do here is give this thing a width and a height otherwise it's not going to show so we could do that and we'll just do it right after the SVG and say style=width 452px, height 920px and let's go ahead and save this. Now you can see that the phone appears here. It's a little bit bigger so you can rescale this if you need to and we'll probably have to do this for the smaller sizes but this way we can sort of create a reference to a symbol which makes this a lot easier to use over and over and over.
If I look for let's see feature phone right I can kind of look and see where I need to paste these so I'm just going to paste that over and over whenever I have those images. That's actually going to save us a lot of calls to the server. I don't want to replace this one this is actually just the logo.
The phones are going to come in several times and I've sort of eliminated all the calls to those SVGs in the server and was able to use a symbol to call all these phones . Now the only thing you may have to watch out for is that they are going to be coming in a little bigger than they were so on a mobile device this might be a little too big. The way that we can fix that is by going back into our features and whenever I'm doing this feature phone I'm going to do a transform of the phone and I'll scale it by point seven here.
That should work for small mobile devices pretty well. Then at the bigger size it's going to work just like before except it's going to be a a little bit bigger which is fine because what you'll notice later on is that the videos are actually sized properly to these dimensions that I've included in here. Creating an SVG symbol is going to give us the ability to use a piece of code one time and then refer to it, I do have to note that some browsers have a little bit of a problem rendering some of the things that have gradients and colors I noticed that in Firefox what you're going to get is a phone that doesn't have any fills in it.
I do think that this is a superior sort of way of working with SVGs so I'm going to leave it like this even though you may encounter some inconsistencies until Firefox catches up with the way that link references work.
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos