5

I have this fiddle : https://jsfiddle.net/thatOneGuy/akcp8z7w/

Where I have an SVG icon with the following attributes : 

x="0px" y="0px" viewBox="0 0 24 24"

This icon is central on the page. However when I make the viewbox smaller like so : 

viewBox="0 0 12 12"

Corresponding fiddle : https://jsfiddle.net/thatOneGuy/akcp8z7w/1/

It makes the icon bigger. Why is this :

thatOneGuy
  • 9,977
  • 7
  • 48
  • 90

1 Answers1

6

Totally normal. I would try to illustrate it (using only width)

let's imagine you have (viewBox 0-24, width = 100)

| - A B - | - C D - | - E F - | - G H - |
0         6        12        18        24

When you limit (viewBox 0-12, width : 100 (unchanged)), it looks bigger, you get :

|   -   A   B   -   |   -   C   D   -   |
0                   6                  12

When you limit (viewBox : 0-12, width : 50), you get :

| - A B - | - C D - |
0         6        12

This could be see as Clipping : enter image description here

If you did not want it looks bigger, you should indicate the width of your box. And if you want to display 2 times less content, you should indicate a width 2 times smaller.

Finally what you need to understand is :

  • a SVG is a set of points in a 2D space
  • viewBox attribute is the coordinates of the min/max displayed coordinates

On the other hand :

  • you can give this rectangle (the viewBox) the size you want when you specify width/height.

Without specifying anything, you get a default width and the less you display, the bigger it is (to fill all available space).

yunandtidus
  • 3,847
  • 3
  • 29
  • 42
  • thanks for the response. How come if i set the width and height to 24, and a viewbox of "0 0 24 24" it works fine, scales okay, where as if i replace 24 by 12, i.e width & height = 12 and viewbox ="0 0 12 12", the icon doesnt get scaled properly ? See https://jsfiddle.net/thatOneGuy/akcp8z7w/3/ – thatOneGuy Nov 14 '16 at 13:16
  • Do you want to display less content ? Or to display all the content in a smaller box ? – yunandtidus Nov 14 '16 at 13:21
  • Im just trying to understand what is happening. I gathered, if i have a width and height of, say 12, and a viewbox with a width and height of 12, it would resize to be half over the original, 24 width and height, but it doesnt seem to – thatOneGuy Nov 14 '16 at 13:23
  • Does my last edit help you to understand it ? – yunandtidus Nov 14 '16 at 14:29