1
00:00:00,730 --> 00:00:05,372
Because SVG can scale to any size,
their default behavior is different from

2
00:00:05,372 --> 00:00:09,000
other raster graphic or
bitmap image types.

3
00:00:09,000 --> 00:00:13,049
If width and height values
are not given for an inline SVG,

4
00:00:13,049 --> 00:00:18,460
it will default to either 300
pixels wide by 150 pixels tall.

5
00:00:18,460 --> 00:00:22,152
Or the SVG will take up the entire
width and height available,

6
00:00:22,152 --> 00:00:23,790
depending on the browser.

7
00:00:27,430 --> 00:00:31,275
You've learned that a viewport is
the user's visible area of a web page

8
00:00:31,275 --> 00:00:32,180
in the browser.

9
00:00:33,350 --> 00:00:35,710
SVG also has a viewport.

10
00:00:35,710 --> 00:00:38,070
It's similar to the viewport
of the browser.

11
00:00:38,070 --> 00:00:43,100
By giving an SVG width and height values,
we can define its viewport.

12
00:00:43,100 --> 00:00:48,120
In terms of the SVG, the viewport is
a space that it takes up on the page.

13
00:00:48,120 --> 00:00:50,830
You can think of the viewport as a window.

14
00:00:50,830 --> 00:00:55,155
We can see the SVG through the window,
but the SVG itself may be larger or

15
00:00:55,155 --> 00:00:57,410
smaller than the size of the window.

16
00:00:58,450 --> 00:01:02,321
We can control the view we get inside that
window with a special attribute called

17
00:01:02,321 --> 00:01:02,850
viewBox.

18
00:01:04,090 --> 00:01:09,489
viewBox allows you to define how
an image is displayed by zooming in and

19
00:01:09,489 --> 00:01:12,336
out and panning along an x and y axis.

20
00:01:12,336 --> 00:01:15,609
The viewBox attribute takes
four numbers as values and

21
00:01:15,609 --> 00:01:19,010
they can be separated by space or commas.

22
00:01:19,010 --> 00:01:23,231
The first two values, min-x and
min-y, are coordinates for

23
00:01:23,231 --> 00:01:27,140
the origin or
top left corner of the viewBox.

24
00:01:27,140 --> 00:01:30,800
The viewBox can be compared to
looking through the view of a camera.

25
00:01:30,800 --> 00:01:34,464
Just like panning with a camera,
you can move the viewBox left to right or

26
00:01:34,464 --> 00:01:37,260
up and down to change the viewable area.

27
00:01:37,260 --> 00:01:41,009
Increasing the min-x value moves
the camera to the right and

28
00:01:41,009 --> 00:01:44,254
increasing the min-y value
moves the camera down.

29
00:01:44,254 --> 00:01:47,142
The second set of values,
width and height,

30
00:01:47,142 --> 00:01:52,510
define the amount of user coordinates
available for an image to fill.

31
00:01:52,510 --> 00:01:56,227
If the values of the coordinates are
greater than the width and height set for

32
00:01:56,227 --> 00:01:59,260
the viewport, then the image
will appear as if we zoomed out.

33
00:02:00,340 --> 00:02:01,393
If we want to zoom in,

34
00:02:01,393 --> 00:02:05,500
we need to decrease the number of
units available in the viewBox.

35
00:02:05,500 --> 00:02:09,060
We can do this by decreasing the value
of the height and width in the viewBox.

36
00:02:10,540 --> 00:02:15,344
This blog post on scaling SVG elements
contains a useful demo to help visualize

37
00:02:15,344 --> 00:02:18,710
how changing values controls
the viewBox attribute.

38
00:02:19,840 --> 00:02:23,716
As you can see,
when we change the min-x value to 50,

39
00:02:23,716 --> 00:02:27,110
we're moved over to
the right side of the image.

40
00:02:28,290 --> 00:02:31,553
And when we increase
the min-y value to 25,

41
00:02:31,553 --> 00:02:35,660
we're moved over to the bottom
right corner of the image.

42
00:02:37,800 --> 00:02:43,282
Now adjusting the width and height both
to 200, we'll see that we have double

43
00:02:43,282 --> 00:02:48,860
the amount of user coordinates, which
makes our image half of its original size.

44
00:02:50,710 --> 00:02:53,975
With viewBox, we can effectively crop or
zoom images and

45
00:02:53,975 --> 00:02:57,455
have more power to customize
how images appear on web pages.

46
00:02:57,455 --> 00:03:00,905
I encourage you to try setting
different viewBox values for

47
00:03:00,905 --> 00:03:02,630
the SVG in the project files.

48
00:03:04,370 --> 00:03:08,510
Next, we're going to scale
a navigation icon using viewBox.

49
00:03:09,590 --> 00:03:13,430
To follow along, open the project
files associated with this video.

50
00:03:14,440 --> 00:03:18,056
We want to create a social media
icon with a circular background to

51
00:03:18,056 --> 00:03:21,160
use in the footer section of
a website we're building.

52
00:03:21,160 --> 00:03:27,739
One of these SVG has a default
view box settings of 0 0 100 100.

53
00:03:29,921 --> 00:03:34,282
Let's try changing the width and
height to 75 75.

54
00:03:42,833 --> 00:03:48,905
When we refresh in the browser,
it still doesn't quite fill the viewport.

55
00:03:48,905 --> 00:03:51,906
Let's change the width and
height values to 50.

56
00:03:55,802 --> 00:03:57,530
Now let's refresh the browser.

57
00:03:58,840 --> 00:04:04,043
Perfect, you've learned some great
new ways to improve your SVG.

58
00:04:04,043 --> 00:04:06,790
Now, you can put them into
practice in all your projects.