Как мне автоматически масштабировать эту высоту SVG?

У меня есть svg ниже.

Я включаю его в свой файл и пытаюсь масштабировать его до 100% от ширины содержащихся в нем папок. Я хочу установить высоту на авто. Теперь он имеет заданную высоту.

.logo {
  width: 43%;
  margin: 0 auto;
  display: block;
  height: auto;
}
.logotype-icon {
  width: 100%;
}
<!doctype html>
<html lang="se">
<!-- svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol viewBox="0 0 192 33" id="icon-logo">
    <title>Group</title>
    <desc>Created with Sketch.</desc>
    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
    <g id="icon-logo-Page-1" stroke="black" stroke-width="1" fill="black" fill-rule="evenodd" sketch:type="MSPage">
      <g id="icon-logo-Group" sketch:type="MSLayerGroup" fill="#FFFFFF">
        <path d="M42.7416189,22.7800784 L50.9622425,13.0373333 C51.2192504,12.740549 51.5618268,12.4440784 51.7901102,12.2373333 L46.0258772,12.2373333 L45.7978961,14.5171765 L43.1153386,14.5171765 L43.343622,9.80847059 L55.6715339,9.80847059 L55.6715339,12.2975686 L47.6223496,21.7422745 C47.3097071,22.1256471 46.9671307,22.4211765 46.596737,22.7778824 L52.8746835,22.7778824 L53.1026646,20.408 L55.785222,20.408 L55.558148,25.2054902 L42.7416189,25.2054902 L42.7416189,22.7800784"
        id="icon-logo-Fill-1" sketch:type="MSShapeGroup" />
        <path d="M68.2945512,15.7918431 L68.2945512,15.4938039 C68.2945512,14.219451 67.4969197,11.8818824 64.7856378,11.8818824 C62.0743559,11.8818824 61.1597102,13.9261176 61.0463244,15.7918431 L68.2945512,15.7918431 L68.2945512,15.7918431 Z M70.7234268,24.4980392 C69.6941858,24.9410196 67.7249008,25.563451 65.4986079,25.563451 C60.5888504,25.5333333 57.6786142,22.3935686 57.6786142,17.5694118 C57.6786142,13.0084706 60.162822,9.45552941 64.9579843,9.45552941 C69.4081512,9.45552941 71.6634709,12.8318431 71.6634709,17.5982745 L71.6634709,18.0415686 L61.0463244,18.0415686 C61.0741417,21.0348235 63.1867465,22.9592157 66.1263118,22.9592157 C67.9819087,22.9592157 69.6074079,22.4547451 70.8933543,21.774902 L70.7234268,24.4980392 L70.7234268,24.4980392 Z"
        id="icon-logo-Fill-2" sketch:type="MSShapeGroup" />
        <path d="M73.3343244,22.7800784 L75.0184819,22.7800784 L75.075326,12.2373333 L72.9926551,12.2373333 L72.9926551,9.80972549 L78.2715969,9.80972549 C78.2715969,10.8462745 78.1860283,11.9141961 77.9858646,13.2164706 L78.0436157,13.2164706 C78.6432,11.2318431 80.2989354,9.45552941 83.2672252,9.45552941 C86.7483213,9.45552941 88.4327811,11.7353725 88.4327811,15.4072157 C88.4327811,17.8649412 88.3469102,20.3214118 88.3190929,22.7800784 L90.2593512,22.7800784 L90.2593512,25.2076863 L83.4371528,25.2076863 L83.4371528,22.7800784 L85.1216126,22.7800784 C85.1494299,20.5303529 85.2362079,18.248 85.2362079,15.9982745 C85.2362079,13.8373333 84.2650205,12.2373333 82.2391937,12.2373333 C80.0419276,12.2373333 78.385285,14.0440784 78.3296504,16.9171765 L78.2150551,22.7800784 L80.2130646,22.7800784 L80.2130646,25.2076863 L73.3352315,25.2076863 L73.3343244,22.7800784"
        id="icon-logo-Fill-3" sketch:type="MSShapeGroup" />
        <path d="M101.929323,11.5264314 C101.187024,11.2597647 100.188019,11.0517647 98.7617764,11.0517647 C95.022463,11.0517647 93.2258268,13.7460392 93.2258268,17.5970196 C93.2258268,21.4467451 95.022463,24.1422745 98.7617764,24.1422745 C100.81663,24.1422745 102.213846,23.755451 103.21406,23.2534902 L103.21406,24.7656471 C102.244082,25.2076863 100.673008,25.563451 98.7049323,25.563451 C93.9375874,25.563451 91.6269354,21.9502745 91.6269354,17.5970196 C91.6269354,13.2428235 94.0234583,9.63090196 98.8473449,9.63090196 C100.959043,9.63090196 102.186331,10.0164706 103.299931,10.4296471 L103.299931,14.1316078 L101.929323,14.1316078 L101.929323,11.5264314"
        id="icon-logo-Fill-4" sketch:type="MSShapeGroup" />
        <path d="M111.891855,24.1435294 C115.317619,24.1435294 117.115465,21.448 117.115465,17.5982745 C117.115465,13.7472941 115.317619,11.0530196 111.891855,11.0530196 C108.466394,11.0530196 106.668548,13.7472941 106.668548,17.5982745 C106.669757,21.448 108.466394,24.1435294 111.891855,24.1435294 L111.891855,24.1435294 L111.891855,24.1435294 Z M111.891855,9.63215686 C116.402192,9.63215686 118.712844,13.2440784 118.712844,17.5982745 C118.712844,21.9515294 116.402192,25.563451 111.891855,25.563451 C107.381518,25.563451 105.069657,21.9515294 105.069657,17.5982745 C105.069657,13.2440784 107.382728,9.63215686 111.891855,9.63215686 L111.891855,9.63215686 L111.891855,9.63215686 Z"
        id="icon-logo-Fill-5" sketch:type="MSShapeGroup" />
        <path d="M119.811024,23.9069804 L122.00708,23.9069804 L122.062715,11.2895686 L119.496265,11.2895686 L119.496265,9.98760784 L123.574828,9.98760784 C123.574828,10.9629804 123.490167,12.1184314 123.233159,13.630902 L123.29212,13.630902 C123.976365,11.2597647 125.774211,9.63215686 128.656932,9.63215686 C131.398148,9.63215686 133.594507,10.9353725 133.594507,15.5825882 C133.594507,18.366902 133.508636,21.1214118 133.479912,23.9069804 L135.792983,23.9069804 L135.792983,25.2089412 L129.799559,25.2089412 L129.799559,23.9069804 L131.994406,23.9069804 C132.023433,21.1524706 132.11263,18.4271373 132.11263,15.6738824 C132.11263,12.5617255 130.970003,11.0530196 128.315263,11.0530196 C125.346066,11.0530196 123.576945,13.8084706 123.547918,16.6818824 L123.491376,23.9082353 L125.802028,23.9082353 L125.802028,25.211451 L119.809814,25.211451 L119.809814,23.9069804 L119.811024,23.9069804"
        id="icon-logo-Fill-6" sketch:type="MSShapeGroup" />
        <path d="M143.412813,24.1435294 C146.838576,24.1435294 148.637329,21.448 148.637329,17.5982745 C148.637329,13.7472941 146.838576,11.0530196 143.412813,11.0530196 C139.987351,11.0530196 138.189506,13.7472941 138.189506,17.5982745 C138.190715,21.448 139.987351,24.1435294 143.412813,24.1435294 L143.412813,24.1435294 L143.412813,24.1435294 Z M143.412813,9.63215686 C147.92315,9.63215686 150.235011,13.2440784 150.235011,17.5982745 C150.235011,21.9515294 147.92315,25.563451 143.412813,25.563451 C138.902476,25.563451 136.590614,21.9515294 136.590614,17.5982745 C136.591824,13.2440784 138.902476,9.63215686 143.412813,9.63215686 L143.412813,9.63215686 L143.412813,9.63215686 Z"
        id="icon-logo-Fill-7" sketch:type="MSShapeGroup" />
        <path d="M171.076535,23.9069804 L173.272592,23.9069804 C173.300409,21.1524706 173.387187,18.4271373 173.387187,15.6738824 C173.387187,12.5617255 172.074633,11.0530196 169.562306,11.0530196 C166.993436,11.0530196 165.1968,13.7209412 165.141165,16.5328627 L165.024151,23.9082353 L167.337222,23.9082353 L167.337222,25.211451 L161.342891,25.211451 L161.342891,23.9082353 L163.540157,23.9082353 C163.566765,21.1537255 163.597909,18.4283922 163.597909,15.6751373 C163.597909,12.5629804 162.315288,11.0542745 159.886413,11.0542745 C157.205367,11.0542745 155.349468,13.7221961 155.32165,16.5341176 L155.263899,23.9094902 L157.57697,23.9094902 L157.57697,25.211451 L151.611364,25.211451 L151.611364,23.9094902 L153.782022,23.9094902 L153.836447,11.2920784 L151.297512,11.2920784 L151.297512,9.98760784 L155.350677,9.98760784 C155.350677,10.9629804 155.265109,12.1184314 155.008101,13.630902 L155.065852,13.630902 C155.750098,11.2597647 157.748409,9.63215686 160.175773,9.63215686 C162.660283,9.63215686 164.202331,10.9353725 164.771981,13.2440784 C165.342539,12.030902 166.5408,9.63215686 169.936328,9.63215686 C172.760995,9.63215686 174.875112,11.1719216 174.875112,15.5825882 C174.875112,18.366902 174.789241,21.1214118 174.761424,23.9069804 L177.072378,23.9069804 L177.072378,25.2089412 L171.078954,25.2089412 L171.078954,23.9069804 L171.076535,23.9069804"
        id="icon-logo-Fill-8" sketch:type="MSShapeGroup" />
        <path d="M182.185928,9.98760784 L182.185928,11.2895686 L180.103257,11.2895686 L184.069644,22.5112157 C184.184239,22.8089412 184.297625,23.2271373 184.383194,23.6390588 L184.440038,23.6390588 C184.467855,23.3711373 184.58245,22.8980392 184.695836,22.5711373 L188.491994,11.2873725 L186.295635,11.2873725 L186.295635,9.98760784 L191.748435,9.98760784 L191.748435,11.2895686 L189.979616,11.2895686 L184.870602,26.129098 C183.270803,30.7766275 181.58846,33 178.162998,33 C177.450028,33 176.933594,32.8785882 176.451931,32.7631373 L176.451931,31.3134118 C176.7936,31.3711373 177.534387,31.5800784 178.24766,31.5800784 C180.302513,31.5800784 181.616277,30.5435294 182.500687,28.3512157 L183.61338,25.5982745 L178.363162,11.2945882 L176.45314,11.2945882 L176.45314,9.98760784 L182.185928,9.98760784"
        id="icon-logo-Fill-10" sketch:type="MSShapeGroup" />
        <path d="M23.4778205,21.696 L9.6296315,21.696 C8.832,21.696 8.18252598,22.3698824 8.18252598,23.1974902 C8.18252598,24.0276078 8.83079055,24.6989804 9.6296315,24.6989804 L23.4778205,24.6989804 C24.2766614,24.6989804 24.9261354,24.0276078 24.9261354,23.1974902 C24.9261354,22.3676863 24.2766614,21.696 23.4778205,21.696"
        id="icon-logo-Fill-12" sketch:type="MSShapeGroup" />
        <path d="M23.4778205,10.8840784 L9.6296315,10.8840784 C8.832,10.8840784 8.18252598,11.5579608 8.18252598,12.3855686 C8.18252598,13.2156863 8.83079055,13.8895686 9.6296315,13.8895686 L23.4778205,13.8895686 C24.2766614,13.8895686 24.9261354,13.2156863 24.9261354,12.3855686 C24.9261354,11.5579608 24.2766614,10.8840784 23.4778205,10.8840784 L23.4778205,10.8840784 L23.4778205,10.8840784 Z M30.4146142,17.6614902 L2.8119685,17.6614902 C2.82587717,17.6589804 2.83645984,17.6589804 2.83645984,17.6589804 C1.29773858,17.6589804 0.0371905512,16.3723922 0,14.7846275 C1.32313701,6.53364706 8.2287874,0.245333333 16.5549354,0.245333333 C24.8774551,0.245333333 31.7782677,6.52862745 33.1062425,14.7736471 C33.0808441,16.3184314 31.892863,17.5833725 30.4146142,17.6614902 L30.4146142,17.6614902 L30.4146142,17.6614902 Z"
        id="icon-logo-Fill-13" sketch:type="MSShapeGroup" />
      </g>
    </g>
  </symbol>
</svg>
</head>

<body>
  <a alt="Zenconomy" class="logo" itemprop="url" href="/?utm_link=logo">
    <svg class="logotype-icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-logo"></use>
    </svg>
  </a>
</body>

</html>


svg css
person Himmators    schedule 08.10.2015    source источник
comment
Насколько я знаю, это ошибка, особенно в IE, вам нужно установить saveAspectRatio=xMidYMid в соответствии с developer.mozilla.org/en-US/docs/Web/SVG/Attribute/. У меня была такая же проблема, и это не было работой восьмерки. Но вы можете использовать js/jQuery для изменения размера этого   -  person Szymon    schedule 08.10.2015
comment
Возможный дубликат height: auto на SVG не работает   -  person Paul LeBeau    schedule 09.10.2015

Ответы (1)


arrow_upward
0
arrow_downward

Обычно установка максимальной ширины приводит к масштабированию imgs и svgs...

Попробуй это:

svg {
 width:100%;
  max-width:100%;

}

Просто отрегулируйте ширину до того процента, который, по вашему мнению, подходит лучше всего.

person KpTheConstructor    schedule 08.10.2015