This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Use Cases: SVG" Lesson
[00:00:03]
>> Estelle Weyl: So another reason to use media queries, or interesting thing about media queries is SVG. Generally, when you say width screen and width, the width is the device width, if you're on a mobile device or tablet and the browser width, if you're on a device where you can just change the size of the browser.
[00:00:26] When it comes to an SVG, the screen is actually the width of the container of the SVG. So if I hit play with this and right now the background, I have a circle SVG. And,
>> Estelle Weyl: If I say background is 50%, it changed colors.
>> Estelle Weyl: And 20%, it changed colors again.
[00:00:56] Because it's the size of the SVG container. And the SVG container is 20% of the width of the parents. And so it's basically saying if the parent were a thousand pixels, which I know is more, but I'm just going to use a thousand because then I can do math.
[00:01:13] So if it was a thousand pixels wide that would mean when it's 200 pixels wide, it should be green. When it's 300 pixels wide it should be blue. When it's 400 pixels wide it should be whatever color that is, whatever color that is, whatever color that is, and orange.
[00:01:35] And 9 and 100, okay. So let's take a look at circle.svg.
>> Estelle Weyl: Okay, and then do a View Source.
>> Estelle Weyl: So here, I basically said if it's under 100 pixels, make the color bada55. If it's under 300 pixels, I did 300 pixels twice, this was supposed to be 200 pixels.
[00:02:20] 500, sho he's had these different breakpoints and they're not breakpoints decided on any tablet that I know of. It's just breakpoints that I picked because it made sense, and then a
>> Estelle Weyl: It basically says the width and the height of this SVG is by default 400 pixels. But that's not what my HTML is saying.
[00:02:50] My HTML is saying make it 70%. So basically I'm saying the background size is the container of that SVG. And I'm making it 70% of the width. 60% of the width, 100% of the width. So it's not taking the size of the screen, which is what 99.9% of the time happens when it's in SVG, the size, or the min width and the max width is actually the size of the SVG container.