4

I have two svgs which I want to show in one line. I have set them inline-block. They have a given height in pixels and width is set to auto. They render correctly in all browsers except Edge and IE11. In Edge the svgs overlap and in IE11 they don't respect the height applied. Since I can't add more than 3000 lines I have added two svgs with jquery. The same bug exists without jquery(jsfiddle demo).

Demo:

$(".marquee-content").clone().appendTo($(".marquee-wrapper"));
body {
  padding: 100px;
}

.marquee-vertical {
  height: 200px;
}

.marquee-content {
  margin: 0;
  padding: 30px;
}

.marquee {
  overflow: scroll;
  margin: 15px 0;
}

.marquee-horizontal {
  white-space: nowrap;
  width: 300px;
}

.marquee-horizontal .marquee-content,
.marquee-horizontal .marquee-wrapper {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="marquee marquee-horizontal">
    <div class="marquee-wrapper">
      <div class="marquee-content">
        <svg style="height: 26px; width: auto;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" xml:space="preserve">
          <style type="text/css">
            .st0 {
              fill: none;
            }
            
            .st1 {
              enable-background: new;
            }
            
            .st2 {
              fill: #009444;
            }

          </style>
          <rect y="2.3" class="st0" width="526.6" height="26"></rect>
          <g class="st1">
            <path class="st2" d="M7.2,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5L10,9.8C9.6,9.6,9.1,9.5,8.6,9.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5c0,1.6,0.3,2.8,1,3.6
s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C9.6,20.6,8.5,20.8,7.2,20.8z"></path>
            <path class="st2" d="M24.6,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3s-0.7-2.2-0.7-3.5
c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S24.6,12.1,24.6,14.1z M14.8,14.1c0,1.6,0.3,2.9,1,3.8
s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3S14.8,12.5,14.8,14.1z"></path>
            <path class="st2" d="M36.8,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7H28V7.7h1.6
l0.3,1.8H30c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H36.8z"></path>
            <path class="st2" d="M46.9,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2H41V8.3l1.8-0.8l0.8-2.7h1.1v3h3.7v1.5h-3.7v7.6c0,0.8,0.2,1.4,0.6,1.8S46.2,19.2,46.9,19.2z"></path>
            <path class="st2" d="M59.1,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5C52.3,8.3,53,8,53.7,7.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H59.1z M54.7,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S53.9,19.2,54.7,19.2z"></path>
            <path class="st2" d="M69.7,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5l-0.6,1.7c-0.4-0.2-0.9-0.3-1.4-0.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5
c0,1.6,0.3,2.8,1,3.6s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C72.1,20.6,71,20.8,69.7,20.8z"></path>
            <path class="st2" d="M80.1,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2h-1.8V8.3l1.8-0.8l0.8-2.7H78v3h3.7v1.5H78v7.6c0,0.8,0.2,1.4,0.6,1.8S79.5,19.2,80.1,19.2z"></path>
            <path class="st2" d="M95.5,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3s-0.7-2.2-0.7-3.5
c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S95.5,12.1,95.5,14.1z M85.7,14.1c0,1.6,0.3,2.9,1,3.8
s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3S85.7,12.5,85.7,14.1z"></path>
            <path class="st2" d="M107.7,24.3H96.8v-1.5h10.9V24.3z"></path>
            <path class="st2" d="M118.5,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7h-1.9V7.7
h1.6l0.3,1.8h0.1c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H118.5z"></path>
            <path class="st2" d="M135.5,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S135.5,12.1,135.5,14.1z M125.7,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S125.7,12.5,125.7,14.1z"></path>
            <path class="st2" d="M147.7,24.3h-10.9v-1.5h10.9V24.3z"></path>
            <path class="st2" d="M158,17.1c0,1.2-0.4,2.1-1.3,2.8s-2.1,1-3.8,1c-1.7,0-3-0.3-4-0.8v-1.8c0.6,0.3,1.3,0.6,2,0.7s1.4,0.3,2,0.3
c1,0,1.8-0.2,2.3-0.5s0.8-0.8,0.8-1.5c0-0.5-0.2-0.9-0.7-1.3s-1.3-0.8-2.5-1.3c-1.2-0.4-2-0.8-2.5-1.2s-0.9-0.7-1.1-1.1
s-0.4-0.9-0.4-1.5c0-1,0.4-1.9,1.3-2.5s2-0.9,3.5-0.9c1.4,0,2.7,0.3,4.1,0.8L157,9.9c-1.3-0.5-2.5-0.8-3.5-0.8
c-0.9,0-1.6,0.1-2.1,0.4s-0.7,0.7-0.7,1.2c0,0.3,0.1,0.6,0.3,0.9s0.5,0.5,0.8,0.7s1.1,0.5,2.3,0.9c1.5,0.6,2.6,1.1,3.1,1.7
S158,16.2,158,17.1z"></path>
            <path class="st2" d="M167.1,20.8c-0.8,0-1.6-0.2-2.3-0.5s-1.3-0.8-1.7-1.4h-0.1c0.1,0.8,0.1,1.5,0.1,2.1v5.3h-1.9V7.7h1.6l0.3,1.8
h0.1c0.5-0.7,1.1-1.2,1.7-1.5s1.4-0.5,2.3-0.5c1.7,0,3,0.6,3.9,1.7s1.4,2.8,1.4,4.9c0,2.1-0.5,3.7-1.4,4.9S168.8,20.8,167.1,20.8z
M166.8,9.1c-1.3,0-2.3,0.4-2.8,1.1s-0.9,1.9-0.9,3.5v0.4c0,1.8,0.3,3.1,0.9,3.9s1.6,1.2,2.9,1.2c1.1,0,2-0.4,2.6-1.3
s0.9-2.1,0.9-3.7c0-1.6-0.3-2.8-0.9-3.7S168,9.1,166.8,9.1z"></path>
            <path class="st2" d="M183.7,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H183.7z M179.3,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S178.6,19.2,179.3,19.2z"></path>
            <path class="st2" d="M205.5,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7h-1.9V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H205.5z"></path>
            <path class="st2" d="M220.9,10l-0.8,4h3.3v1.5h-3.6l-1,5h-1.6l1-5h-3.6l-1,5h-1.6l0.9-5H210V14h3.4l0.8-4h-3.2V8.5h3.5l1-5.1h1.6
l-1,5.1h3.6l1-5.1h1.6l-1,5.1h3.1V10H220.9z M215,14h3.6l0.8-4h-3.6L215,14z"></path>
            <path class="st2" d="M229.8,20.6l-4.9-12.8h2.1l2.8,7.6c0.6,1.8,1,2.9,1.1,3.5h0.1c0.1-0.4,0.4-1.3,0.8-2.6s1.5-4.1,3.1-8.5h2.1
l-4.9,12.8H229.8z"></path>
            <path class="st2" d="M244.5,20.8c-1.9,0-3.4-0.6-4.5-1.7s-1.6-2.8-1.6-4.8c0-2.1,0.5-3.7,1.5-4.9s2.4-1.8,4.1-1.8
c1.6,0,2.9,0.5,3.8,1.6s1.4,2.5,1.4,4.2v1.2h-8.8c0,1.5,0.4,2.7,1.1,3.4s1.7,1.2,3.1,1.2c1.4,0,2.8-0.3,4.1-0.9V20
c-0.7,0.3-1.3,0.5-2,0.6S245.3,20.8,244.5,20.8z M243.9,9.1c-1,0-1.9,0.3-2.5,1s-1,1.6-1.1,2.8h6.7c0-1.2-0.3-2.2-0.8-2.8
S244.9,9.1,243.9,9.1z"></path>
            <path class="st2" d="M261.3,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7h-1.9V7.7
h1.6l0.3,1.8h0.1c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H261.3z"></path>
            <path class="st2" d="M271.4,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2h-1.8V8.3l1.8-0.8l0.8-2.7h1.1v3h3.7v1.5h-3.7v7.6c0,0.8,0.2,1.4,0.6,1.8S270.7,19.2,271.4,19.2z"></path>
            <path class="st2" d="M283.6,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H283.6z M279.2,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S278.4,19.2,279.2,19.2z"></path>
            <path class="st2" d="M295,20.8c-0.8,0-1.6-0.2-2.3-0.5s-1.3-0.8-1.7-1.4h-0.1c0.1,0.8,0.1,1.5,0.1,2.1v5.3H289V7.7h1.6l0.3,1.8h0.1
c0.5-0.7,1.1-1.2,1.7-1.5s1.4-0.5,2.3-0.5c1.7,0,3,0.6,3.9,1.7s1.4,2.8,1.4,4.9c0,2.1-0.5,3.7-1.4,4.9S296.7,20.8,295,20.8z
M294.7,9.1c-1.3,0-2.3,0.4-2.8,1.1s-0.9,1.9-0.9,3.5v0.4c0,1.8,0.3,3.1,0.9,3.9s1.6,1.2,2.9,1.2c1.1,0,2-0.4,2.6-1.3
s0.9-2.1,0.9-3.7c0-1.6-0.3-2.8-0.9-3.7S295.9,9.1,294.7,9.1z"></path>
            <path class="st2" d="M303.6,4.2c0-0.4,0.1-0.8,0.3-1s0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,1s-0.1,0.8-0.3,1
s-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3S303.6,4.7,303.6,4.2z M305.7,20.6h-1.9V7.7h1.9V20.6z"></path>
            <path class="st2" d="M318.1,17.1c0,1.2-0.4,2.1-1.3,2.8s-2.1,1-3.8,1c-1.7,0-3-0.3-4-0.8v-1.8c0.6,0.3,1.3,0.6,2,0.7s1.4,0.3,2,0.3
c1,0,1.8-0.2,2.3-0.5s0.8-0.8,0.8-1.5c0-0.5-0.2-0.9-0.7-1.3s-1.3-0.8-2.5-1.3c-1.2-0.4-2-0.8-2.5-1.2s-0.9-0.7-1.1-1.1
s-0.4-0.9-0.4-1.5c0-1,0.4-1.9,1.3-2.5s2-0.9,3.5-0.9c1.4,0,2.7,0.3,4.1,0.8l-0.7,1.6c-1.3-0.5-2.5-0.8-3.5-0.8
c-0.9,0-1.6,0.1-2.1,0.4s-0.7,0.7-0.7,1.2c0,0.3,0.1,0.6,0.3,0.9s0.5,0.5,0.8,0.7s1.1,0.5,2.3,0.9c1.5,0.6,2.6,1.1,3.1,1.7
S318.1,16.2,318.1,17.1z"></path>
            <path class="st2" d="M332.4,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S332.4,12.1,332.4,14.1z M322.6,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S322.6,12.5,322.6,14.1z"></path>
            <path class="st2" d="M346.3,7.7V9l-2.4,0.3c0.2,0.3,0.4,0.6,0.6,1.1s0.3,0.9,0.3,1.5c0,1.3-0.4,2.3-1.3,3s-2,1.1-3.5,1.1
c-0.4,0-0.7,0-1.1-0.1c-0.8,0.4-1.2,1-1.2,1.7c0,0.4,0.1,0.6,0.4,0.8s0.8,0.3,1.5,0.3h2.3c1.4,0,2.5,0.3,3.2,0.9s1.1,1.4,1.1,2.6
c0,1.4-0.6,2.5-1.7,3.3s-2.8,1.1-5,1.1c-1.7,0-3-0.3-3.9-0.9s-1.4-1.5-1.4-2.6c0-0.8,0.3-1.5,0.8-2s1.2-1,2.1-1.2
c-0.3-0.1-0.6-0.4-0.8-0.7s-0.3-0.7-0.3-1.1c0-0.5,0.1-0.9,0.4-1.2s0.6-0.7,1.2-1c-0.7-0.3-1.2-0.7-1.6-1.4s-0.6-1.4-0.6-2.3
c0-1.4,0.4-2.5,1.3-3.3s2-1.1,3.6-1.1c0.7,0,1.3,0.1,1.8,0.2H346.3z M336,22.7c0,0.7,0.3,1.2,0.9,1.6s1.4,0.5,2.5,0.5
c1.6,0,2.8-0.2,3.6-0.7s1.2-1.2,1.2-2c0-0.7-0.2-1.2-0.6-1.4s-1.2-0.4-2.4-0.4h-2.3c-0.9,0-1.6,0.2-2.1,0.6S336,21.9,336,22.7z
M337.1,11.8c0,0.9,0.3,1.6,0.8,2s1.2,0.7,2.1,0.7c1.9,0,2.8-0.9,2.8-2.8c0-1.9-1-2.9-2.9-2.9c-0.9,0-1.6,0.2-2.1,0.7
S337.1,10.9,337.1,11.8z"></path>
            <path class="st2" d="M350.7,7.7v8.3c0,1,0.2,1.8,0.7,2.3s1.2,0.8,2.2,0.8c1.3,0,2.3-0.4,2.9-1.1s0.9-1.9,0.9-3.6V7.7h1.9v12.8h-1.6
l-0.3-1.7h-0.1c-0.4,0.6-1,1.1-1.7,1.5s-1.5,0.5-2.4,0.5c-1.6,0-2.7-0.4-3.5-1.1s-1.2-1.9-1.2-3.6V7.7H350.7z"></path>
            <path class="st2" d="M371.5,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H371.5z M367.1,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S366.4,19.2,367.1,19.2z"></path>
            <path class="st2" d="M385.7,18.8h-0.1c-0.9,1.3-2.2,2-4,2c-1.7,0-3-0.6-3.9-1.7s-1.4-2.8-1.4-4.9s0.5-3.8,1.4-4.9s2.2-1.8,3.9-1.8
c1.7,0,3.1,0.6,4,1.9h0.2l-0.1-0.9l0-0.9V2.3h1.9v18.2H386L385.7,18.8z M381.8,19.2c1.3,0,2.3-0.4,2.9-1.1s0.9-1.9,0.9-3.5v-0.4
c0-1.8-0.3-3.1-0.9-3.9s-1.6-1.2-2.9-1.2c-1.1,0-2,0.4-2.6,1.3s-0.9,2.1-0.9,3.8c0,1.6,0.3,2.9,0.9,3.7S380.7,19.2,381.8,19.2z"></path>
            <path class="st2" d="M399.6,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H399.6z M395.2,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S394.4,19.2,395.2,19.2z"></path>
            <path class="st2" d="M410.9,7.5c0.6,0,1.1,0,1.5,0.1l-0.3,1.8c-0.5-0.1-1-0.2-1.4-0.2c-1,0-1.9,0.4-2.7,1.3s-1.1,1.9-1.1,3.2v6.9
H405V7.7h1.6l0.2,2.4h0.1c0.5-0.8,1.1-1.5,1.7-1.9S410.1,7.5,410.9,7.5z"></path>
            <path class="st2" d="M420.7,7.5c0.6,0,1.1,0,1.5,0.1L422,9.4c-0.5-0.1-1-0.2-1.4-0.2c-1,0-1.9,0.4-2.7,1.3s-1.1,1.9-1.1,3.2v6.9
h-1.9V7.7h1.6l0.2,2.4h0.1c0.5-0.8,1.1-1.5,1.7-1.9S419.9,7.5,420.7,7.5z"></path>
            <path class="st2" d="M432.5,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H432.5z M428.1,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S427.4,19.2,428.1,19.2z"></path>
            <path class="st2" d="M454.4,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7H438V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H454.4z"></path>
            <path class="st2" d="M468.2,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2S466,9.1,465,9.1c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H468.2z M463.8,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S463.1,19.2,463.8,19.2z"></path>
            <path class="st2" d="M473.4,19.3c0-0.5,0.1-0.9,0.4-1.2s0.6-0.4,1-0.4c0.5,0,0.8,0.1,1.1,0.4s0.4,0.7,0.4,1.2
c0,0.5-0.1,0.9-0.4,1.2s-0.6,0.4-1.1,0.4c-0.4,0-0.7-0.1-1-0.4S473.4,19.9,473.4,19.3z"></path>
            <path class="st2" d="M485.2,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5L488,9.8c-0.4-0.2-0.9-0.3-1.4-0.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5
c0,1.6,0.3,2.8,1,3.6s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C487.6,20.6,486.5,20.8,485.2,20.8z"></path>
            <path class="st2" d="M502.6,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S502.6,12.1,502.6,14.1z M492.8,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S492.8,12.5,492.8,14.1z"></path>
            <path class="st2" d="M522.3,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7H506V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H522.3z"></path>
          </g>
        </svg>
      </div>
    </div>
  </div>
</div>

When you open this demo in Edge browser you'd see the svgs overlapping each other and in IE11 height is not applied properly to svgs. But this doesn't happen in any other browser?

  1. Why do in Edge browser the svgs overlap?
  2. Why is in IE11 inline height not applied correctly?

Proof:

Edge version: 38.14393
Edge Html version: 14.14393

Windows 10 Pro
OS Version: 1115
OS Build: 10586.839

enter image description here

user31782
  • 7,087
  • 14
  • 68
  • 143

2 Answers2

3

Following our conversation in chat. I have found a fix to the small text problem in IE11.

IE11 small text

The reason for this was that .marquee-horizontal was setting width: 300px; and IE11 was interpreting this for all the children. This meant your SVG had a height of 26px and a width of 300px. That was changing the aspect ratio of the image.

Providing all the sizes don't change, then add the following CSS.

.marquee-content svg {
    height: 26px;
    width: 483.8px;
}

Obviously the downside to this is that you need explicitly set the width which is annoying.
I'll do some thinking / research on how to make the SVG keep it's aspect ratio and have a dynamic width and set height. (Using width: auto; works in all browsers except IE11)

Update

This is really irritating me.

I have done some more playing with the code. If you change your svg code.
From this

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" xml:space="preserve">

To this

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

What I have changed there is to remove the viewBox". This is because the viewBox attribute takes the parameters (separated by spaces), x, y, width, and height. So in this instance, removing these just makes the svg scale itself.

That will fix the "small look" of the svg. What this won't solve is the mysterious overlapping.
In IE the SVG will say "contacto_no_spam#ventapisoguadarrama.com" and the two SVGs will overlap.
In Chrome the SVG will say "contacto_no_spam#ventap". But if you go into developer console you can still highlight the paths, they are just invisible. Both browsers stop the width of the element right after the "ventap" bit. IE just completes the SVG, whereas other browsers don't.

I have never used svgs before so I don't know the reason for this. I am just trying really head because I hate not knowing.

Community
  • 1
  • 1
JustCarty
  • 3,839
  • 5
  • 31
  • 51
  • Its a jarring bug in Internet Explorer. It takes `width: auto` same as `width: inherit` on svg. – user31782 Apr 05 '17 at 07:26
  • @user31782 So the solution of setting the width doesn't work? – JustCarty Apr 05 '17 at 07:34
  • The real situation where I use this svg is somewhat different. The svg container have background color and the container goes as tall as much tall the svg I set. And from back end they might change the email address. This works in principle, but I'll have to tests all other browsers, set line-heights on svgs and so and so. I give up IE11 support for this case and will add a banner to the site _Use any browser other than IE_. – user31782 Apr 05 '17 at 07:42
  • @user31782 On Chrome the result is "contacto_no_spam#ventap". This is the same for IE (well sort of). In IE the result is "contacto_no_spam#ventapisoguadarrama.com". Except the `.marquee-content` thinks it stops at "#ventap" and as a result they overlap. **Can you confirm what the `svg` should say?** – JustCarty Apr 05 '17 at 10:29
  • It should say whats it is saying in my question. What has happened when you removed the viewBox is that the path tags work as pixels and svg tags take the browser default 300x150 dimensions. The path tags exted beyond svg tag and svg has default overflow hidden. – user31782 Apr 05 '17 at 13:13
  • I think I have replicated the underlying issue here: http://stackoverflow.com/questions/43260129/how-to-apply-width-auto-to-svg-in-edge-and-internet-explorer-11-browsers – user31782 Apr 06 '17 at 16:04
1

I am pretty sure your problem is just the standard "IE-not-scaling-SVGs-properly-when-bot-width-and-height-are-not-specified" bug.

See this question and answer

When you update your example with the canvas fix trick from that SO entry, the page in Edge looks the same as other browsers, and IE11 looks almost the same.

$(".marquee-content").clone().appendTo($(".marquee-wrapper"));
body {
  padding: 100px;
}

.marquee-vertical {
  height: 200px;
}

.marquee-content {
  margin: 0;
  padding: 30px;
}

.marquee {
  overflow: scroll;
  margin: 15px 0;
}

.marquee-horizontal {
  white-space: nowrap;
  width: 300px;
}

.marquee-horizontal .marquee-content,
.marquee-horizontal .marquee-wrapper {
  display: inline-block;
}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="marquee marquee-horizontal">
    <div class="marquee-wrapper">
      <div class="marquee-content">
        <canvas width="527" height="28"></canvas>
        <svg style="height: 26px; width: auto;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" xml:space="preserve">
          <style type="text/css">
            .st0 {
              fill: none;
            }
            
            .st1 {
              enable-background: new;
            }
            
            .st2 {
              fill: #009444;
            }

          </style>
          <rect y="2.3" class="st0" width="526.6" height="26"></rect>
          <g class="st1">
            <path class="st2" d="M7.2,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5L10,9.8C9.6,9.6,9.1,9.5,8.6,9.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5c0,1.6,0.3,2.8,1,3.6
s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C9.6,20.6,8.5,20.8,7.2,20.8z"></path>
            <path class="st2" d="M24.6,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3s-0.7-2.2-0.7-3.5
c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S24.6,12.1,24.6,14.1z M14.8,14.1c0,1.6,0.3,2.9,1,3.8
s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3S14.8,12.5,14.8,14.1z"></path>
            <path class="st2" d="M36.8,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7H28V7.7h1.6
l0.3,1.8H30c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H36.8z"></path>
            <path class="st2" d="M46.9,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2H41V8.3l1.8-0.8l0.8-2.7h1.1v3h3.7v1.5h-3.7v7.6c0,0.8,0.2,1.4,0.6,1.8S46.2,19.2,46.9,19.2z"></path>
            <path class="st2" d="M59.1,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5C52.3,8.3,53,8,53.7,7.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H59.1z M54.7,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S53.9,19.2,54.7,19.2z"></path>
            <path class="st2" d="M69.7,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5l-0.6,1.7c-0.4-0.2-0.9-0.3-1.4-0.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5
c0,1.6,0.3,2.8,1,3.6s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C72.1,20.6,71,20.8,69.7,20.8z"></path>
            <path class="st2" d="M80.1,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2h-1.8V8.3l1.8-0.8l0.8-2.7H78v3h3.7v1.5H78v7.6c0,0.8,0.2,1.4,0.6,1.8S79.5,19.2,80.1,19.2z"></path>
            <path class="st2" d="M95.5,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3s-0.7-2.2-0.7-3.5
c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S95.5,12.1,95.5,14.1z M85.7,14.1c0,1.6,0.3,2.9,1,3.8
s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3S85.7,12.5,85.7,14.1z"></path>
            <path class="st2" d="M107.7,24.3H96.8v-1.5h10.9V24.3z"></path>
            <path class="st2" d="M118.5,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7h-1.9V7.7
h1.6l0.3,1.8h0.1c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H118.5z"></path>
            <path class="st2" d="M135.5,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S135.5,12.1,135.5,14.1z M125.7,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S125.7,12.5,125.7,14.1z"></path>
            <path class="st2" d="M147.7,24.3h-10.9v-1.5h10.9V24.3z"></path>
            <path class="st2" d="M158,17.1c0,1.2-0.4,2.1-1.3,2.8s-2.1,1-3.8,1c-1.7,0-3-0.3-4-0.8v-1.8c0.6,0.3,1.3,0.6,2,0.7s1.4,0.3,2,0.3
c1,0,1.8-0.2,2.3-0.5s0.8-0.8,0.8-1.5c0-0.5-0.2-0.9-0.7-1.3s-1.3-0.8-2.5-1.3c-1.2-0.4-2-0.8-2.5-1.2s-0.9-0.7-1.1-1.1
s-0.4-0.9-0.4-1.5c0-1,0.4-1.9,1.3-2.5s2-0.9,3.5-0.9c1.4,0,2.7,0.3,4.1,0.8L157,9.9c-1.3-0.5-2.5-0.8-3.5-0.8
c-0.9,0-1.6,0.1-2.1,0.4s-0.7,0.7-0.7,1.2c0,0.3,0.1,0.6,0.3,0.9s0.5,0.5,0.8,0.7s1.1,0.5,2.3,0.9c1.5,0.6,2.6,1.1,3.1,1.7
S158,16.2,158,17.1z"></path>
            <path class="st2" d="M167.1,20.8c-0.8,0-1.6-0.2-2.3-0.5s-1.3-0.8-1.7-1.4h-0.1c0.1,0.8,0.1,1.5,0.1,2.1v5.3h-1.9V7.7h1.6l0.3,1.8
h0.1c0.5-0.7,1.1-1.2,1.7-1.5s1.4-0.5,2.3-0.5c1.7,0,3,0.6,3.9,1.7s1.4,2.8,1.4,4.9c0,2.1-0.5,3.7-1.4,4.9S168.8,20.8,167.1,20.8z
M166.8,9.1c-1.3,0-2.3,0.4-2.8,1.1s-0.9,1.9-0.9,3.5v0.4c0,1.8,0.3,3.1,0.9,3.9s1.6,1.2,2.9,1.2c1.1,0,2-0.4,2.6-1.3
s0.9-2.1,0.9-3.7c0-1.6-0.3-2.8-0.9-3.7S168,9.1,166.8,9.1z"></path>
            <path class="st2" d="M183.7,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H183.7z M179.3,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S178.6,19.2,179.3,19.2z"></path>
            <path class="st2" d="M205.5,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7h-1.9V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H205.5z"></path>
            <path class="st2" d="M220.9,10l-0.8,4h3.3v1.5h-3.6l-1,5h-1.6l1-5h-3.6l-1,5h-1.6l0.9-5H210V14h3.4l0.8-4h-3.2V8.5h3.5l1-5.1h1.6
l-1,5.1h3.6l1-5.1h1.6l-1,5.1h3.1V10H220.9z M215,14h3.6l0.8-4h-3.6L215,14z"></path>
            <path class="st2" d="M229.8,20.6l-4.9-12.8h2.1l2.8,7.6c0.6,1.8,1,2.9,1.1,3.5h0.1c0.1-0.4,0.4-1.3,0.8-2.6s1.5-4.1,3.1-8.5h2.1
l-4.9,12.8H229.8z"></path>
            <path class="st2" d="M244.5,20.8c-1.9,0-3.4-0.6-4.5-1.7s-1.6-2.8-1.6-4.8c0-2.1,0.5-3.7,1.5-4.9s2.4-1.8,4.1-1.8
c1.6,0,2.9,0.5,3.8,1.6s1.4,2.5,1.4,4.2v1.2h-8.8c0,1.5,0.4,2.7,1.1,3.4s1.7,1.2,3.1,1.2c1.4,0,2.8-0.3,4.1-0.9V20
c-0.7,0.3-1.3,0.5-2,0.6S245.3,20.8,244.5,20.8z M243.9,9.1c-1,0-1.9,0.3-2.5,1s-1,1.6-1.1,2.8h6.7c0-1.2-0.3-2.2-0.8-2.8
S244.9,9.1,243.9,9.1z"></path>
            <path class="st2" d="M261.3,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7h-1.9V7.7
h1.6l0.3,1.8h0.1c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H261.3z"></path>
            <path class="st2" d="M271.4,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2h-1.8V8.3l1.8-0.8l0.8-2.7h1.1v3h3.7v1.5h-3.7v7.6c0,0.8,0.2,1.4,0.6,1.8S270.7,19.2,271.4,19.2z"></path>
            <path class="st2" d="M283.6,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H283.6z M279.2,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S278.4,19.2,279.2,19.2z"></path>
            <path class="st2" d="M295,20.8c-0.8,0-1.6-0.2-2.3-0.5s-1.3-0.8-1.7-1.4h-0.1c0.1,0.8,0.1,1.5,0.1,2.1v5.3H289V7.7h1.6l0.3,1.8h0.1
c0.5-0.7,1.1-1.2,1.7-1.5s1.4-0.5,2.3-0.5c1.7,0,3,0.6,3.9,1.7s1.4,2.8,1.4,4.9c0,2.1-0.5,3.7-1.4,4.9S296.7,20.8,295,20.8z
M294.7,9.1c-1.3,0-2.3,0.4-2.8,1.1s-0.9,1.9-0.9,3.5v0.4c0,1.8,0.3,3.1,0.9,3.9s1.6,1.2,2.9,1.2c1.1,0,2-0.4,2.6-1.3
s0.9-2.1,0.9-3.7c0-1.6-0.3-2.8-0.9-3.7S295.9,9.1,294.7,9.1z"></path>
            <path class="st2" d="M303.6,4.2c0-0.4,0.1-0.8,0.3-1s0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,1s-0.1,0.8-0.3,1
s-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3S303.6,4.7,303.6,4.2z M305.7,20.6h-1.9V7.7h1.9V20.6z"></path>
            <path class="st2" d="M318.1,17.1c0,1.2-0.4,2.1-1.3,2.8s-2.1,1-3.8,1c-1.7,0-3-0.3-4-0.8v-1.8c0.6,0.3,1.3,0.6,2,0.7s1.4,0.3,2,0.3
c1,0,1.8-0.2,2.3-0.5s0.8-0.8,0.8-1.5c0-0.5-0.2-0.9-0.7-1.3s-1.3-0.8-2.5-1.3c-1.2-0.4-2-0.8-2.5-1.2s-0.9-0.7-1.1-1.1
s-0.4-0.9-0.4-1.5c0-1,0.4-1.9,1.3-2.5s2-0.9,3.5-0.9c1.4,0,2.7,0.3,4.1,0.8l-0.7,1.6c-1.3-0.5-2.5-0.8-3.5-0.8
c-0.9,0-1.6,0.1-2.1,0.4s-0.7,0.7-0.7,1.2c0,0.3,0.1,0.6,0.3,0.9s0.5,0.5,0.8,0.7s1.1,0.5,2.3,0.9c1.5,0.6,2.6,1.1,3.1,1.7
S318.1,16.2,318.1,17.1z"></path>
            <path class="st2" d="M332.4,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S332.4,12.1,332.4,14.1z M322.6,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S322.6,12.5,322.6,14.1z"></path>
            <path class="st2" d="M346.3,7.7V9l-2.4,0.3c0.2,0.3,0.4,0.6,0.6,1.1s0.3,0.9,0.3,1.5c0,1.3-0.4,2.3-1.3,3s-2,1.1-3.5,1.1
c-0.4,0-0.7,0-1.1-0.1c-0.8,0.4-1.2,1-1.2,1.7c0,0.4,0.1,0.6,0.4,0.8s0.8,0.3,1.5,0.3h2.3c1.4,0,2.5,0.3,3.2,0.9s1.1,1.4,1.1,2.6
c0,1.4-0.6,2.5-1.7,3.3s-2.8,1.1-5,1.1c-1.7,0-3-0.3-3.9-0.9s-1.4-1.5-1.4-2.6c0-0.8,0.3-1.5,0.8-2s1.2-1,2.1-1.2
c-0.3-0.1-0.6-0.4-0.8-0.7s-0.3-0.7-0.3-1.1c0-0.5,0.1-0.9,0.4-1.2s0.6-0.7,1.2-1c-0.7-0.3-1.2-0.7-1.6-1.4s-0.6-1.4-0.6-2.3
c0-1.4,0.4-2.5,1.3-3.3s2-1.1,3.6-1.1c0.7,0,1.3,0.1,1.8,0.2H346.3z M336,22.7c0,0.7,0.3,1.2,0.9,1.6s1.4,0.5,2.5,0.5
c1.6,0,2.8-0.2,3.6-0.7s1.2-1.2,1.2-2c0-0.7-0.2-1.2-0.6-1.4s-1.2-0.4-2.4-0.4h-2.3c-0.9,0-1.6,0.2-2.1,0.6S336,21.9,336,22.7z
M337.1,11.8c0,0.9,0.3,1.6,0.8,2s1.2,0.7,2.1,0.7c1.9,0,2.8-0.9,2.8-2.8c0-1.9-1-2.9-2.9-2.9c-0.9,0-1.6,0.2-2.1,0.7
S337.1,10.9,337.1,11.8z"></path>
            <path class="st2" d="M350.7,7.7v8.3c0,1,0.2,1.8,0.7,2.3s1.2,0.8,2.2,0.8c1.3,0,2.3-0.4,2.9-1.1s0.9-1.9,0.9-3.6V7.7h1.9v12.8h-1.6
l-0.3-1.7h-0.1c-0.4,0.6-1,1.1-1.7,1.5s-1.5,0.5-2.4,0.5c-1.6,0-2.7-0.4-3.5-1.1s-1.2-1.9-1.2-3.6V7.7H350.7z"></path>
            <path class="st2" d="M371.5,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H371.5z M367.1,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S366.4,19.2,367.1,19.2z"></path>
            <path class="st2" d="M385.7,18.8h-0.1c-0.9,1.3-2.2,2-4,2c-1.7,0-3-0.6-3.9-1.7s-1.4-2.8-1.4-4.9s0.5-3.8,1.4-4.9s2.2-1.8,3.9-1.8
c1.7,0,3.1,0.6,4,1.9h0.2l-0.1-0.9l0-0.9V2.3h1.9v18.2H386L385.7,18.8z M381.8,19.2c1.3,0,2.3-0.4,2.9-1.1s0.9-1.9,0.9-3.5v-0.4
c0-1.8-0.3-3.1-0.9-3.9s-1.6-1.2-2.9-1.2c-1.1,0-2,0.4-2.6,1.3s-0.9,2.1-0.9,3.8c0,1.6,0.3,2.9,0.9,3.7S380.7,19.2,381.8,19.2z"></path>
            <path class="st2" d="M399.6,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H399.6z M395.2,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S394.4,19.2,395.2,19.2z"></path>
            <path class="st2" d="M410.9,7.5c0.6,0,1.1,0,1.5,0.1l-0.3,1.8c-0.5-0.1-1-0.2-1.4-0.2c-1,0-1.9,0.4-2.7,1.3s-1.1,1.9-1.1,3.2v6.9
H405V7.7h1.6l0.2,2.4h0.1c0.5-0.8,1.1-1.5,1.7-1.9S410.1,7.5,410.9,7.5z"></path>
            <path class="st2" d="M420.7,7.5c0.6,0,1.1,0,1.5,0.1L422,9.4c-0.5-0.1-1-0.2-1.4-0.2c-1,0-1.9,0.4-2.7,1.3s-1.1,1.9-1.1,3.2v6.9
h-1.9V7.7h1.6l0.2,2.4h0.1c0.5-0.8,1.1-1.5,1.7-1.9S419.9,7.5,420.7,7.5z"></path>
            <path class="st2" d="M432.5,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H432.5z M428.1,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S427.4,19.2,428.1,19.2z"></path>
            <path class="st2" d="M454.4,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7H438V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H454.4z"></path>
            <path class="st2" d="M468.2,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2S466,9.1,465,9.1c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H468.2z M463.8,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S463.1,19.2,463.8,19.2z"></path>
            <path class="st2" d="M473.4,19.3c0-0.5,0.1-0.9,0.4-1.2s0.6-0.4,1-0.4c0.5,0,0.8,0.1,1.1,0.4s0.4,0.7,0.4,1.2
c0,0.5-0.1,0.9-0.4,1.2s-0.6,0.4-1.1,0.4c-0.4,0-0.7-0.1-1-0.4S473.4,19.9,473.4,19.3z"></path>
            <path class="st2" d="M485.2,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5L488,9.8c-0.4-0.2-0.9-0.3-1.4-0.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5
c0,1.6,0.3,2.8,1,3.6s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C487.6,20.6,486.5,20.8,485.2,20.8z"></path>
            <path class="st2" d="M502.6,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S502.6,12.1,502.6,14.1z M492.8,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S492.8,12.5,492.8,14.1z"></path>
            <path class="st2" d="M522.3,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7H506V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H522.3z"></path>
          </g>
        </svg>
      </div>
    </div>
  </div>
</div>
Community
  • 1
  • 1
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • With canvas tag it works correct. But the problem is I must know the aspect ratio of svg. I have the fixed height. So if I had known the aspect ratio I would know the width of svg anyway. If I knew the width I could change width auto to a fixed value. Thats why I asked a sperate question itself http://stackoverflow.com/questions/43260129/how-to-apply-width-auto-to-svg-in-edge-and-internet-explorer-11-browsers-withou – user31782 Apr 08 '17 at 05:43
  • 1
    As far as I am aware, there isn't any other work-around. If you need to handle different SVGs, then you would need to use some JS to read the `viewBox` and update the width and height each each SVG is loaded. – Paul LeBeau Apr 08 '17 at 06:14