在 HTML 中调整 SVG 大小

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).

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

Answer 1

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>