Why doesn't svg resize?

B

Bohdan Zhorov2019-05-04 13:36:19

HTML

Bohdan Zhorov, 2019-05-04 13:36:19

Good afternoon! I have not come across SVG before, I do not fully understand how it works.

<body>
    <svg class="svg-states">
        <title>UA states</title>
        <g id="states" transform="translate(0.000000,166.000000) scale(0.100000,-0.100000)">
            <path id="symu" fill="#000000" d="M1340 1440 c-3 -16 -10 -42 -15 -59 -15 -45 -14 -48 30 -93 48 -49 51
                -65 10 -59 -34 5 -43 -8 -23 -38 17 -26 9 -49 -18 -51 -76 -6 -126 -87 -96
                -155 37 -82 42 -141 15 -159 -12 -8 -18 -59 -7 -59 18 0 8 -32 -11 -37 -15 -4
                -20 -14 -20 -42 0 -20 -7 -49 -16 -66 -31 -59 -27 -76 33 -131 57 -53 74 -95
                47 -122 -16 -16 -18 -75 -4 -103 6 -11 7 -19 1 -19 -9 0 -33 -46 -45 -85 -5
                -16 0 -23 25 -32 17 -7 37 -9 45 -6 9 3 26 1 40 -6 13 -6 35 -16 48 -22 14 -6
                37 -8 52 -5 15 4 49 1 77 -6 44 -11 50 -11 62 5 9 13 27 17 79 17 47 0 65 4
                63 13 -1 8 10 12 33 12 34 0 35 -2 41 -43 3 -27 15 -52 32 -70 18 -19 25 -35
                21 -45 -4 -11 -1 -17 8 -17 21 0 65 -43 60 -58 -2 -7 -1 -23 2 -36 8 -33 62
                -44 86 -18 12 13 31 18 61 18 24 -1 50 4 56 10 7 7 21 10 31 7 12 -3 22 4 30
                21 8 18 19 26 37 26 14 0 28 7 31 15 4 8 15 15 26 15 14 0 18 5 14 15 -8 23
                25 34 88 31 65 -3 77 6 47 38 -12 12 -21 27 -21 33 0 6 -15 22 -34 37 -43 32
                -59 93 -40 142 16 39 11 61 -34 153 -35 71 -36 73 -17 87 24 18 12 31 -40 42
                -35 7 -42 13 -53 47 -24 73 -37 77 -129 45 -70 -25 -64 -25 -99 2 -27 22 -56
                28 -136 28 -20 1 -42 7 -48 16 -11 12 -9 19 11 40 l23 25 -29 24 c-26 20 -28
                26 -17 42 28 41 27 42 -56 127 l-33 33 46 13 c25 7 48 17 51 21 3 5 14 9 24 9
                28 0 33 17 19 66 -12 38 -17 44 -41 44 -15 0 -28 4 -28 9 0 4 -16 28 -35 52
                -30 38 -35 51 -35 100 0 55 -1 57 -60 117 -68 69 -98 80 -155 57 -35 -15 -39
                -15 -47 -1 -5 9 -20 16 -33 16 -19 0 -26 -7 -30 -27z" />

                <path id="chernihov" fill="#000123" d="M1205 1489 c-4 -6 -28 -24 -53 -40 -39 -25 -56 -29 -113 -29 -52 0
                -72 4 -92 21 -15 11 -42 23 -62 26 -33 5 -36 3 -51 -32 -8 -21 -13 -47 -10
                -59 4 -15 -6 -34 -33 -66 -31 -36 -45 -45 -77 -47 -28 -2 -43 3 -54 17 -11 13
                -42 23 -108 34 -134 23 -162 22 -188 -11 l-22 -28 -36 18 c-26 12 -49 15 -75
                11 -33 -5 -40 -11 -45 -35 -3 -15 -20 -41 -37 -56 -66 -58 -79 -78 -93 -145
                -4 -16 -13 -28 -21 -28 -29 0 -31 -71 -5 -185 19 -81 19 -118 -1 -135 -16 -13
                -17 -24 -9 -84 4 -38 6 -75 3 -82 -3 -8 -1 -20 5 -27 5 -6 12 -28 16 -48 4
                -24 15 -40 31 -49 29 -16 34 -54 7 -65 -14 -5 -10 -10 22 -27 32 -16 50 -19
                97 -14 67 8 82 -2 99 -66 8 -29 8 -44 1 -51 -6 -6 -11 -15 -11 -21 0 -5 3 -6
                7 -3 3 4 13 1 22 -7 17 -15 181 -27 181 -14 0 5 11 8 24 8 13 0 35 10 50 21
                23 18 32 20 52 10 13 -6 24 -17 24 -25 0 -7 11 -17 25 -20 30 -8 33 -32 5 -41
                -25 -8 -25 -13 0 -45 11 -14 20 -33 20 -42 0 -14 9 -18 40 -18 22 0 40 4 40 8
                0 15 52 37 77 34 14 -2 34 -13 45 -24 12 -12 26 -17 36 -13 9 4 37 9 62 12 39
                5 53 13 105 67 33 34 60 66 61 72 1 20 17 70 28 83 5 7 11 39 12 71 2 32 8 68
                14 80 18 34 5 62 -53 117 -55 52 -65 84 -38 117 24 29 31 87 15 119 -9 16 -13
                31 -11 34 3 2 8 -5 12 -16 7 -24 27 -27 44 -7 8 10 9 16 1 21 -15 9 -12 58 6
                94 16 31 15 37 -7 101 -22 65 -22 71 -8 117 8 26 20 48 26 48 6 0 15 3 19 8 4
                4 18 7 30 7 32 0 43 43 19 70 -20 22 -16 24 38 20 39 -2 35 22 -13 68 l-41 39
                17 62 c10 33 15 63 13 65 -13 11 -78 15 -84 5z" />
        </g>
    </svg>
</body>

@import url('https://fonts.googleapis.com/css?family=Merriweather');
html {
  font-family: 'Merriweather', serif;
  font-size: 14px;
}
body {
  padding: 5px 10px;
}

svg {
  display: block;
  width: 100%;
  height: 100vh;
}

I want to follow the codepen example .
In the example, neither the height nor the width is specified, but everything is resized. In my case, it is not adaptive, and if you do not specify a transform, the image is not shown at all