svg content full width and height?

Question

css

Gulp and plugins create svg sprite. in the layout I use the construction:

<svg class="socials__icon socials__icon--twitter">
                    <use xlink:href="img/sprite.svg#twitter"></use>
                </svg>

I found that when describing styles for icons (I write styles referring directly to the svg tag), the graphic part of the icons does not correspond to this size. There is little experience with svg, and nothing was found on Google on this issue.

In particular: I set fixed dimensions of 26x26 for svg. And its content is 19.5x19.5

How can I achieve full width and height? Thanks in advance.

Answer 1

Keep in mind that there should be a gap between the canvas border and the elements on it, otherwise, if you somehow get the canvas width/height fully filled with the icon, you may find visual bugs when rendering the page, depending on the browser.