Resize or Scaling SVG like normal JPG or PNG images

/ February 12, 2018/ Frontend General

(Last Updated On: February 12, 2018) SVGs are not regular images even when we use them as so. I had found me a lot of times working on the layout of a website using a SVG as logo and after I wrote my css classes the logo was just TOO big for mobile. The answer to “How can I resize an SVG file” or “Why my SVG file does not resize” is the preserveAspectRatio.

preserveAspectRatio property on SVG

The official documentation states:

In some cases, typically when using the viewBox attribute, it is desirable that the graphics stretch to fit non-uniformly to take up the entire viewport. In other cases, it is desirable that uniform scaling be used for the purposes of preserving the aspect ratio of the graphics.

Attribute preserveAspectRatio indicates whether or not to force uniform scaling.

That is what we need to change. Open your SGV file in a code editor and you will find something like:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="171 -542 363.596 65.23">
  <g data-name="Gruppe 380" transform="translate(-189 -558)">
    <path data-name="Pfad 731" d="M552.346 24.841a8.856 ..  ...  212-1.512a10.125 10.125 0 0 0-1.263-1.225v5.75h-3.725v-18.8l3.725-.6z" fill="#fff"/>
  </g>
</svg>

add there, in the <svg> tag the preserveAspectRatio="none" attribute.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="171 -542 363.596 65.23" preserveAspectRatio="none">
  <g data-name="Gruppe 380" transform="translate(-189 -558)">
    <path data-name="Pfad 731" d="M552.346 24.841a8.856 ..  ...  212-1.512a10.125 10.125 0 0 0-1.263-1.225v5.75h-3.725v-18.8l3.725-.6z" fill="#fff"/>
  </g>
</svg>

Now you will be able to resize your SVG file.