SVG is larger than path in it, how to equalize their sizes?

Question

css

https://jsfiddle.net/WEB_DIMITRIY/7dbgjf4u/1/
I copied the SVG button from figma and after removing the shadows I noticed that the size of the svg is larger than its content (path). Is it possible to equalize their sizes in order to use hover normally?

Answer 1

The size of an SVG can be set using the viewBox. For example, this picture is 160x90:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
</svg>

In addition to manipulating the size of the SVG itself, you can change the size of the path without editing the path itself. This is done using the attribute transform. For example, in the following picture, all 3 paths are written to fit the SVG size, but due to the scaling applied, the red area is 80%, the green is 40%, and the blue is 20%.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
    <path d="M0 0L160 0L160 90L0 90L0 0" fill="#ff0000" transform="scale(0.8)"/>
    <path d="M0 0L160 0L160 90L0 90L0 0" fill="#00ff00" transform="scale(0.4)"/>
    <path d="M0 0L160 0L160 90L0 90L0 0" fill="#0000ff" transform="scale(0.2)"/>
</svg>