Search code examples
imagesvgfigma

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


I'm exporting svgs from figma and unite in svg stack to adress 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.

svg fill img problem

svg markup (deleted other svgs):

<?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 fill="none" viewBox="0 0 20 20" id="logo" xmlns="http://www.w3.org/2000/svg"><path d="M18.01 5.694a9.092 9.092 0 01-3.718 12.316 9.053 9.053 0 01-5.352 1.02A9.097 9.097 0 015.694 1.976a9.07 9.07 0 018.06-.266 9.055 9.055 0 014.256 3.984z" stroke="url(#hpaint0_linear_0_497)"/><defs><linearGradient id="hpaint0_linear_0_497" x1=".756" y1="8.723" x2="20.965" y2="9.992" gradientUnits="userSpaceOnUse"><stop offset=".288" stop-color="#555248"/><stop offset=".78" stop-color="#1B1A17" stop-opacity="0"/></linearGradient></defs></svg></svg>


Solution

  • It seems i found a solution. Gulp-svg-sprite possible has an error. It adds viewBox of first underlying svg and sets it to whole svg tag: <?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 fill="none" viewBox="0 0 354 519" id="ads-bg-ico"...</svg></svg> After deleting duplicating viewBox from parent svg element, all underlying svgs inside parent svg become to work properly and fill img element.

    UPD: with release of svg-sprite 2.0.0 rootviewbox: false option added