SVG image is not stretching to the size specified

Question

I am using an SVG image in my application. I want to stretch the image to fit the viewport by specifying the width and height to it. But, it is not stretching. Please look at the SVG code below.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="1009" height="577" viewBox="0 0 1009 577">
  <defs>
    <path id="login-background-b" d="M30,55.176624 L608,55.176624 C624.568542,55.176624 638,68.6080815 638,85.176624 L638,498.176624 C638,514.745167 624.568542,528.176624 608,528.176624 L30,528.176624 C13.4314575,528.176624 0,514.745167 0,498.176624 L0,85.176624 C0,68.6080815 13.4314575,55.176624 30,55.176624 Z"/>
    <filter id="login-background-a" width="104.2%" height="105.7%" x="-2.1%" y="-2.9%" filterUnits="objectBoundingBox">
      <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/>
      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3.5"/>
      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.178895323 0"/>
    </filter>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(9 .823)">
    <path fill="#F0EEEF" d="M155.84305,574.219674 C154.077319,574.494565 152.304536,574.722075 150.526612,574.901961 C95.5786682,580.461447 46.5277046,540.42419 40.9682188,485.476246 L-3.41060513e-13,80.5612139 L511.937215,0.86245338 C513.208541,0.664532341 514.484945,0.50072478 515.76505,0.371207178 C555.327569,-3.63162264 590.644263,25.1952017 594.647093,64.7577215 L638.589181,499.065403 L155.84305,574.219674 Z"/>
    <use fill="#000" filter="url(#login-background-a)" xlink:href="#login-background-b"/>
    <use fill="#FFF" xlink:href="#login-background-b"/>
  </g>
</svg>

I have tried so many ways to solve this issue by adding preserveAspectRatio to none and removing view box etc.. Still no luck.

Please help me solve this. Thank you...

You may use this viewBox="-10 0 660 577" and remove both width and height attributes. Also remove the transform="translate(9 .823)" from the group. In order to get the size of the group you may use the_group.getBBox() where the_group represents the group. This is returning the position (x,y) and the size (width,height) of the group and you may use it to define the value for the viewBox — enxaneta

AvcS AvcS · Accepted Answer · 2019-08-13T06:27:04

You can achieve what you want from viewBox (reference).

The viewBox specifies which part of your SVG should be shown in the view, it scales the SVG accordingly so that the viewBox specified is the only part visible in the box determined by SVG element (specified by width and height)

In your case when you say width=1009 height=577 viewBox="0 0 1009 577" whats happening is the view inside rectangle with vertices 0,0, 0,577, 1009,577, 1009,0 is scaled to fit the width 1009 and height 577. Which doesn't change anything as you are giving exact dimensions.

So the part of the SVG you actually want to scale is (from observation) 0,0 to 638.59, 575.42. So if you want that part to scale and fit the view port you should mention the viewBox as viewBox="0 0 638.59 575.42"

PS: The dimensions 638.59 and 575.42 are just based on the outline observation, I didnt go deeper into path, you will know which dimensions to use as you have better understanding of the path

SVG image is not stretching to the size specified

3 Answers