Why do SVG images have different sizes than the actual ones?

Question

css

Hello!

I use gulp to build
nodejs, phyton, npm, etc. modules of the latest versions are all fine
for building the gulp-svg-sprite sprite

The problem with the size of images, under the same conditions, they behave differently...
In the sandbox, I painted in more detail
Please tell me what I am I doing it wrong?
How to?

https://codepen.io/Zhelezniy/pen/KKZezJW

Answer 1

Your jar 's viewport size is viewBox="0 0 184 60".
You nest it in div.second with width: 60px; height: 60px;.
Answering your question "the size is 3 times larger" by the fact that - 184x60, it's not 60x60.
This happens due to the fact that in your sprite there is a mess of descriptors nested in each other . The sprite is crooked. Something is wrong with gulp-svg-sprite or your source files. If you remove the paths from your sprite, you get:<svg>

<?xml version="1.0" encoding="utf-8"?>

<svg viewBox="0 0 184 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<style>:root>svg{display:none;fill:#7fc3ba;}:root>svg:target{display:block}</style>

<svg viewBox="0 0 184 60" id="Logo" xmlns="http://www.w3.org/2000/svg">
  <path/>
</svg>

<svg version="1.1" id="banka" x="0" y="0" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <style>.bst0{fill:#7fc3ba}</style>
  <path/>
</svg>

</svg>

In my opinion a good sprite should look something like this:

<svg aria-hidden="true" focusable="false" style="display: none;">
    <symbol id="logo" viewBox="0 0 184 60">
        <path/>
    </symbol>
    <symbol id="banka" viewBox="0 0 60 60">
        <path/>
    </symbol>
</svg>