1

I have an SVG that I expect to scale to the size of it's parent container. Let's say for argument sake the parent container is width: 10rem; height: 10rem; What I expect is that the following:

preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100"

on the SVG would size the SVG to its parent container, and center it on the X- and Y- axis. That's not working, and I'm still trying to grok the magical workings of viewBox. For example, the smaller I make the numbers (the 2nd set of numbers), the larger the SVG is within the viewBox.

Here is a codepen: https://codepen.io/mearleycf/pen/VxGyPZ

In the codepen I want the SVG to be centered vertically and horizontally and fill the available gray space.

Mike Earley
  • 1,223
  • 4
  • 20
  • 47

2 Answers2

5

Your image is half the size of the custom view window viewBox.

In order to enlarge the image in half, it is necessary to reduce the viewBox twice viewBox="0 0 50 50"

1#

.viewport {
  width: 10rem;
  height: 10rem;
  background-color: rgba(0,0,0,.2);
<div class="viewport">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="-3 0 50 50">
  <path d="M27.38 38.45c.3676376.0432512.6447064.3548269.6447064.725s-.2770688.6817488-.6447064.725H16.62c-.2793485.0328643-.5527292-.0976886-.702766-.3356058-.1500368-.2379172-.1500368-.5408712 0-.7787884.1500368-.2379172.4234175-.3684701.702766-.3356058h10.76z"/>
  <path d="M22 20.32l7-8.08H15l7 8.08zm5.77 2.59l4.17-7.76-1.44-2.41-7.28 8.38 4.55 1.79zM40 30.48c1.1964325-3.1635471 1.8718678-6.5001977 2-9.88l-4.4-2.22v8.27c.222793 1.5584681 1.0946906 2.9498712 2.4 3.83zm-11.26-6.31c-.1278873.2340796-.3732635.3797717-.64.38-.0856249.0190035-.1743751.0190035-.26 0L22 22.2l-5.84 2.3c-.0855499.0196756-.1744501.0196756-.26 0-.2643693.0005027-.5071244-.145921-.63-.38l-1.67-3.04v8.12h16.79v-8.1l-1.65 3.07zM6.39 26.59v-8.2L2 20.6c.13283876 3.3792388.80812272 6.7151415 2 9.88 1.31972827-.8919415 2.19075519-2.3096381 2.39-3.89zM42.06 19V2.08c.000044-.33854901-.271495-.61453953-.61-.62H2.57c-.16352967-.00002198-.32022048.06561659-.43490953.18218579C2.02040143 1.75875498 1.95731918 1.9164923 1.96 2.08L1.95991792 19 10.74 14.58l2.05-3.45v-.05a.6199991.6199991 0 0 1 .14-.14l.09-.06c.0606197-.0379407.1289512-.0618568.2-.07h17.53c.0710488.0081432.1393803.0320593.2.07l.09.06a.6199991.6199991 0 0 1 .14.14v.05l2.05 3.45L42.06 19zm-30-3.85l4.17 7.76 4.55-1.79-7.28-8.38-1.44 2.41zm.1 14.78V18.66a.57999937.57999937 0 0 1 0-.19l-1.23-2.37-3.09 1.56v9c-.23358787 2.140913-1.43965798 4.0551344-3.27 5.19 3.28318525 7.6277175 9.4797039 13.6262068 17.21 16.66.147458.0600295.312542.0600295.46 0 7.7209585-3.0462892 13.9080563-9.0462264 17.19-16.67-1.8174849-1.1243263-3.0217854-3.0173247-3.27-5.14v-9l-3.09-1.6-1.24 2.31v11.52c.0000375.3992947-.3207428.7245302-.72.73H12.88c-.3992572-.0054698-.7200375-.3307053-.72-.73zm9.12 19.95C9.07046721 45.052873.91252114 33.4138361.54 20.29a1.00000007 1.00000007 0 0 1 0-.17V2.08C.52887155.94612822 1.43619307.01645888 2.57 0h38.88c1.1181022.03256431 2.0059041.95143932 2 2.07v18.05a.99999966.99999966 0 0 1 0 .17c-.3740569 13.1119454-8.517206 24.7427688-20.71 29.58-.2373877.0854445-.4877039.129419-.74.13-.244887-.0010737-.4880019-.0415928-.72-.12z"/>
</svg>
  </div>

2#

The first variant of the solution fulfills the conditions of the question, but is not adaptive.

In order for svg to change its size along with changing the size of the parent container, you must specify its width and height in percent 

.viewport {
 width:25%;
 height:25%;
 }

#rect {
 fill: rgba(0,0,0,.2);
}
<div class="viewport">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="-6 0 50 50">
 <rect  id="rect" width="100%" height="100%" />
 <path d="M27.38 38.45c.3676376.0432512.6447064.3548269.6447064.725s-.2770688.6817488-.6447064.725H16.62c-.2793485.0328643-.5527292-.0976886-.702766-.3356058-.1500368-.2379172-.1500368-.5408712 0-.7787884.1500368-.2379172.4234175-.3684701.702766-.3356058h10.76z"/>
  <path d="M22 20.32l7-8.08H15l7 8.08zm5.77 2.59l4.17-7.76-1.44-2.41-7.28 8.38 4.55 1.79zM40 30.48c1.1964325-3.1635471 1.8718678-6.5001977 2-9.88l-4.4-2.22v8.27c.222793 1.5584681 1.0946906 2.9498712 2.4 3.83zm-11.26-6.31c-.1278873.2340796-.3732635.3797717-.64.38-.0856249.0190035-.1743751.0190035-.26 0L22 22.2l-5.84 2.3c-.0855499.0196756-.1744501.0196756-.26 0-.2643693.0005027-.5071244-.145921-.63-.38l-1.67-3.04v8.12h16.79v-8.1l-1.65 3.07zM6.39 26.59v-8.2L2 20.6c.13283876 3.3792388.80812272 6.7151415 2 9.88 1.31972827-.8919415 2.19075519-2.3096381 2.39-3.89zM42.06 19V2.08c.000044-.33854901-.271495-.61453953-.61-.62H2.57c-.16352967-.00002198-.32022048.06561659-.43490953.18218579C2.02040143 1.75875498 1.95731918 1.9164923 1.96 2.08L1.95991792 19 10.74 14.58l2.05-3.45v-.05a.6199991.6199991 0 0 1 .14-.14l.09-.06c.0606197-.0379407.1289512-.0618568.2-.07h17.53c.0710488.0081432.1393803.0320593.2.07l.09.06a.6199991.6199991 0 0 1 .14.14v.05l2.05 3.45L42.06 19zm-30-3.85l4.17 7.76 4.55-1.79-7.28-8.38-1.44 2.41zm.1 14.78V18.66a.57999937.57999937 0 0 1 0-.19l-1.23-2.37-3.09 1.56v9c-.23358787 2.140913-1.43965798 4.0551344-3.27 5.19 3.28318525 7.6277175 9.4797039 13.6262068 17.21 16.66.147458.0600295.312542.0600295.46 0 7.7209585-3.0462892 13.9080563-9.0462264 17.19-16.67-1.8174849-1.1243263-3.0217854-3.0173247-3.27-5.14v-9l-3.09-1.6-1.24 2.31v11.52c.0000375.3992947-.3207428.7245302-.72.73H12.88c-.3992572-.0054698-.7200375-.3307053-.72-.73zm9.12 19.95C9.07046721 45.052873.91252114 33.4138361.54 20.29a1.00000007 1.00000007 0 0 1 0-.17V2.08C.52887155.94612822 1.43619307.01645888 2.57 0h38.88c1.1181022.03256431 2.0059041.95143932 2 2.07v18.05a.99999966.99999966 0 0 1 0 .17c-.3740569 13.1119454-8.517206 24.7427688-20.71 29.58-.2373877.0854445-.4877039.129419-.74.13-.244887-.0010737-.4880019-.0415928-.72-.12z"/>
</svg>
  </div>

Now increasing, decreasing the percentage of width and height of the parent container .viewport will also exactly change the size ofSVG

Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
0

Changing viewBox to viewBox="-3 0 50 50" fix it. I think you can not get equal width and height to fit svg to square div because it needs to keep proportions.

IP_
  • 676
  • 5
  • 18