I have an issue with lots of my svgs where the container is bigger than the actual content. See gif below where I flick between hovering over svg and path in the chrome inspector.
As you can see the icon takes up the whole path but hovering over the svg reveals excessive margin
This is the svg:
<code><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg></code>
<code><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg></code>
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg>I’ve tried changing the viewBox but to no avail. Obviously I’m just completely guessing if I change path values etc. is there a way I can do this nicely & easily?