"Illustrator Foundations" was retired on January 6, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed SVG Workflow and Tools !
You have completed SVG Workflow and Tools !
Preview
The viewBox attribute of SVGs can be used to scale and control the position of an image within its viewport. This gives developers more power to customize how images appear.
Demo of footer navigation
Resources
Articles
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Because SVG can scale to any size,
their default behavior is different from
0:00
other raster graphic or
bitmap image types.
0:05
If width and height values
are not given for an inline SVG,
0:09
it will default to either 300
pixels wide by 150 pixels tall.
0:13
Or the SVG will take up the entire
width and height available,
0:18
depending on the browser.
0:22
You've learned that a viewport is
the user's visible area of a web page
0:27
in the browser.
0:31
SVG also has a viewport.
0:33
It's similar to the viewport
of the browser.
0:35
By giving an SVG width and height values,
we can define its viewport.
0:38
In terms of the SVG, the viewport is
a space that it takes up on the page.
0:43
You can think of the viewport as a window.
0:48
We can see the SVG through the window,
but the SVG itself may be larger or
0:50
smaller than the size of the window.
0:55
We can control the view we get inside that
window with a special attribute called
0:58
viewBox.
1:02
viewBox allows you to define how
an image is displayed by zooming in and
1:04
out and panning along an x and y axis.
1:09
The viewBox attribute takes
four numbers as values and
1:12
they can be separated by space or commas.
1:15
The first two values, min-x and
min-y, are coordinates for
1:19
the origin or
top left corner of the viewBox.
1:23
The viewBox can be compared to
looking through the view of a camera.
1:27
Just like panning with a camera,
you can move the viewBox left to right or
1:30
up and down to change the viewable area.
1:34
Increasing the min-x value moves
the camera to the right and
1:37
increasing the min-y value
moves the camera down.
1:41
The second set of values,
width and height,
1:44
define the amount of user coordinates
available for an image to fill.
1:47
If the values of the coordinates are
greater than the width and height set for
1:52
the viewport, then the image
will appear as if we zoomed out.
1:56
If we want to zoom in,
2:00
we need to decrease the number of
units available in the viewBox.
2:01
We can do this by decreasing the value
of the height and width in the viewBox.
2:05
This blog post on scaling SVG elements
contains a useful demo to help visualize
2:10
how changing values controls
the viewBox attribute.
2:15
As you can see,
when we change the min-x value to 50,
2:19
we're moved over to
the right side of the image.
2:23
And when we increase
the min-y value to 25,
2:28
we're moved over to the bottom
right corner of the image.
2:31
Now adjusting the width and height both
to 200, we'll see that we have double
2:37
the amount of user coordinates, which
makes our image half of its original size.
2:43
With viewBox, we can effectively crop or
zoom images and
2:50
have more power to customize
how images appear on web pages.
2:53
I encourage you to try setting
different viewBox values for
2:57
the SVG in the project files.
3:00
Next, we're going to scale
a navigation icon using viewBox.
3:04
To follow along, open the project
files associated with this video.
3:09
We want to create a social media
icon with a circular background to
3:14
use in the footer section of
a website we're building.
3:18
One of these SVG has a default
view box settings of 0 0 100 100.
3:21
Let's try changing the width and
height to 75 75.
3:29
When we refresh in the browser,
it still doesn't quite fill the viewport.
3:42
Let's change the width and
height values to 50.
3:48
Now let's refresh the browser.
3:55
Perfect, you've learned some great
new ways to improve your SVG.
3:58
Now, you can put them into
practice in all your projects.
4:04
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up