CODEWITHSUNDEEP
svg
Joerg
Joerg

Reputation: 3813

Why isn't my SVG scaling when I change the viewBox attribute

When I change the viewBox to

0 0 500 500

as in the example below, the SVG still renders at it's "original" size of 129x129 (inside a 500x500 space)

Why aren't the paths inside the SVG scaling up in relation to the viewBox?

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <defs>
        <style>
          .cls-1{fill:#d9d9d9;}.cls-2{fill:#fff;}.cls-3{fill:#222221;}
        </style>
      </defs>
      <path class="cls-1" d="M420.94,366.76a62.55,62.55,0,1,0-62.54-62.55,62.55,62.55,0,0,0,62.54,62.55" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="36.49 32.43 20.89 48.48 20.89 88.25 62.2 88.25 62.2 32.16 36.49 32.43" />
      <path class="cls-3" d="M394.31,271.33l-17.16,17.16v38.72a5.23,5.23,0,0,0,5.23,5.23h40.51V271.33Zm-.16,5.65v9a2.33,2.33,0,0,1-2.33,2.33h-9ZM419,328.57H382.38a1.37,1.37,0,0,1-1.36-1.36V290.27h10.8a4.27,4.27,0,0,0,4.26-4.27V275.21H419Z" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="88.3 32.43 103.9 48.48 103.9 88.25 62.59 88.25 62.59 32.16 88.3 32.43" />
      <path class="cls-3" d="M447.58,271.33H419v61.11h40.51a5.23,5.23,0,0,0,5.23-5.23V288.49Zm.16,5.65,11.35,11.35h-9a2.33,2.33,0,0,1-2.33-2.33Zm11.77,51.59H422.88V275.21h22.93V286a4.27,4.27,0,0,0,4.26,4.27h10.79v36.94a1.35,1.35,0,0,1-1.35,1.36" transform="translate(-358.4 -241.67)" />
      <rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />
    </svg>

Upvotes: 1

Views: 67

Answers (2)

tgiachetti
tgiachetti

Reputation: 364

Smaller viewbox values will yield a larger "zoom" because the units within the SVG will be a larger proportion of the viewbox. For example, let's look at the y value from the rectangle in the SVG compare using two different viewbox values:

<rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />

viewbox="0 0 500 500": The proportion of rectangle y to viewbox height is 20.66/500

viewbox="0 0 250 250": The proportion of rectangle y to viewbox height is 20.66/250

In the second example, y is a larger proportion of viewbox height. This is an indication that the image will appear bigger.

Upvotes: 0

enxaneta
enxaneta

Reputation: 33044

By changing the viewBox you change the bounding box i.e. the space available inside the svg element. If you need to change the size of the icon add a width.

//console.log(box.getBBox())
svg{border:solid; width:100px;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 125">
      <defs>
        <style>
          .cls-1{fill:#d9d9d9;}.cls-2{fill:#fff;}.cls-3{fill:#222221;}
        </style>
      </defs>
      <g id="box">
      <path class="cls-1" d="M420.94,366.76a62.55,62.55,0,1,0-62.54-62.55,62.55,62.55,0,0,0,62.54,62.55" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="36.49 32.43 20.89 48.48 20.89 88.25 62.2 88.25 62.2 32.16 36.49 32.43" />
      <path class="cls-3" d="M394.31,271.33l-17.16,17.16v38.72a5.23,5.23,0,0,0,5.23,5.23h40.51V271.33Zm-.16,5.65v9a2.33,2.33,0,0,1-2.33,2.33h-9ZM419,328.57H382.38a1.37,1.37,0,0,1-1.36-1.36V290.27h10.8a4.27,4.27,0,0,0,4.26-4.27V275.21H419Z" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="88.3 32.43 103.9 48.48 103.9 88.25 62.59 88.25 62.59 32.16 88.3 32.43" />
      <path class="cls-3" d="M447.58,271.33H419v61.11h40.51a5.23,5.23,0,0,0,5.23-5.23V288.49Zm.16,5.65,11.35,11.35h-9a2.33,2.33,0,0,1-2.33-2.33Zm11.77,51.59H422.88V275.21h22.93V286a4.27,4.27,0,0,0,4.26,4.27h10.79v36.94a1.35,1.35,0,0,1-1.35,1.36" transform="translate(-358.4 -241.67)" />
      <rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />
      </g>
    </svg>

Upvotes: 1

Related Questions