Resizing SVG in HTML

Question

I found this question Resizing SVG in HTML but the answer (removing the <svg> width and height attributes and resizing the viewBox attribute) doesn't correctly rescale my SVG file.

It's a logo file that I purchased from Looka and I'd like to begin using it but I'm stumped as to how to rescale|resize it.

<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.1"
  width="3171.4285714285716"
  height="2645.5238095238096"
  viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
   <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
   <g transform="scale(8.571428571428571) translate(10, 10)">
      <defs id="SvgjsDefs2369" />
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
   </g>
</svg>

If I remove the <svg> width and height, the viewBox retains the size.

If I also then reduce the viewBox, the image retains the same size, I assume (!?) because the child <rect> contains width and height attributes too.

But, if I remove the <rect> width and height attributes, the result is similarly-sized whitespace (and no logo).

How should I approach arbitrarily rescaling|resizing the image?
Should I preserve the width:height ratio when I adjust the viewBox?
Should the viewBox have a positive y-position (currently -25.714...)?

How do you want it to appear? Note that if you want to preserve the aspect ratio you need a viewBox. — Robert Longson, Jul 12 '22 at 20:30
@Sysix I had it inlined (not wrapped by an `img` tag). @robert-longson thank you! — DazWilkin, Jul 12 '22 at 22:10
You are throwing spaghetti against the wall and hoping something sticks. You need to learn how svg works instead. — Rob, Jul 13 '22 at 09:55

score 1 · Accepted Answer · answered Jul 12 '22 at 21:30

How about this as a useful snippet. Without editing the <svg> code at all I've set it up so that you can wrap any <svg> in a div with class of svgSize like this:

<div class="svgSize"><svg>...</svg></div>

Then using an inline style you can pass either --svgHeight or --svgWidth using whatever value you wish, so for example --svgHeight: 100px and the SVG will resize to the value given while keeping it's aspect ratio. If you don't pass either value it will default to auto which will resize to fill the parent

Gotta love CSS Custom Properties

.svgSize {
  display: inline-flex;
  height: var(--svgHeight, auto);
  width: var(--svgWidth, auto);
}
.svgSize svg {
  height: auto; width: auto;
  max-height: 100%; max-width: 100%;
}

<div class="svgSize" style="--svgWidth: 5rem">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

<div class="svgSize" style="--svgHeight: 15rem">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

<div class="svgSize" style="">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

Thank you! I'll try this in the morning. – DazWilkin Jul 12 '22 at 22:11 — DazWilkin, Jul 12 '22 at 22:11
Apologies for not having marked this as the answer sooner. – DazWilkin Sep 09 '22 at 19:47 — DazWilkin, Sep 09 '22 at 19:47

Resizing SVG in HTML

1 Answers1