svg stack doesn't fill all available width and height of img

[George]

I'm exporting svgs from figma and unite in svg stack with gulp-svg-sprite to address later using icons.svg#ID. Html code is: <img src="icons.svg#logo" class="svg-logo-dims"/> Class "svg-logo-dims" sets width and height, for example: width: 20px; height: 20px for img.

Why my svg doesn't cover 20x20? It's centered in img element with a lot of free space. I have to object-fit: cover to make it look like in figma layout. On the other hand if i insert raw svg in my html, specifying same width and height it would be really 20x20 without free space.

I managed to find a solution. If you delete viewBox of parent svg (viewBox="0 0 354 519") in generated icons.svg, child svgs would cover img element properly:

<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 354 519" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>:root>svg{display:none}:root>svg:target{display:block}</style><svg>...</svg><svg>...</svg></svg>

Why does parent svg has viewBox? Is it supposed?

My svg-sprite settings:

 mode: {
  stack: {
    sprite: "../icons.svg",
    example: {
      dest: "../html-example.html",
    },
  },
},

[Andrew]

@jetzeny hi!
I've added tests for stack mode, and it seems they all good. Please provide svg references which are causing the problem, I will add them to tests.

[George]

Icons:

And result after gulp-svg-sprite:

As you can see, it took viewBox of third icon and set it to parent svg. For what reason? Because, If you delete 'viewBox="0 0 104 26" ' from parent svg, child svg would have proper sizes.
html:

<img src="./img/svg/icons.svg#logo" class="svg-logo-ico-dims" alt="logo" />
<img src="./img/svg/icons.svg#search-ico" class="svg-search-ico-dims" alt="search-ico"/>
<img src="./img/svg/icons.svg#heart-ico" class="svg-heart-ico-dims" alt="heart-ico" />
<img src="./img/svg/icons.svg#cart-ico" class="svg-cart-ico-dims" alt="cart-ico" />

CSS:

.svg-logo-ico-dims { width: 104px;  height: 26px; }
.svg-search-ico-dims { width: 16px; height: 16px; }
.svg-heart-ico-dims { width: 21px; height: 18px; }
.svg-cart-ico-dims { width: 18px; height: 16px; }

[Andrew]

@jetzeny hey can you check if this problem is still exist in branch pr-657 (mentioned in #657)

[George]

@jetzeny hey can you check if this problem is still exist in branch pr-657 (mentioned in #657)

How do i check it? I'm not very familiar with Git... What i did: git clone svg-sprite in separate folder, git checkout to pr 657, copy resulting content to node_modules->svg-sprite with replacement. Now when i'm running my svg gulp task (which requiring gulp-svg-sprite) i got the error: Optimizing "%s" with SVGO failed with error "%s"
UPDATE: okay, i managed to make it work, and after adding rootviewbox: false to my svg sprite settings the problem is solved

[Andrew]

@jetzeny thank you! Cool!