cancel
Showing results for 
Search instead for 
Did you mean: 

SVG Logo not working in FireFox/IE

SVG Logo not working in FireFox/IE

I am just jumping into the SVG world, and have created a SVG logo for my magento site with animations and all.

The animations and styling are all within style tags at the top of the SVG, and it works perfectly in Chrome and Safari. However taking a look in firefox, nothing even shows up - completely blank image, but if you view it in a new tab, it works fine. In IE, it gets a little wonky as well with the animations, but it at least shows up.

 

Any idea what could possibly be causing this? Below is the code for the svg, minus all the actual drawing points.

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="294" height="86" viewBox="0 0 235.2 49.45" enable-background="new 0 0 235.204 49.449" xml:space="preserve">
<style>
.red {
  stroke-dasharray: 300px;
  stroke-dashoffset: 300px;
  -webkit-animation: dash-red 3s ease-in forwards;
  -moz-animation: dash-red 3s ease-in forwards;
  -o-animation: dash-red 3s ease-in forwards;
  animation: dash-red 3s ease-in forwards;
  stroke: #d20000;
  stroke-width: 0.5px;
  fill: #d20000;
} @-webkit-keyframes dash-red {
  0% {
    stroke-dashoffset: 300px;
    stroke-width: 0.5px;
    fill: rgba(210, 0, 0, 0);
  }
  50% {
    fill: rgba(210, 0, 0, 0);
  }
  100% {
    stroke-dashoffset: 0px;
    stroke-width: 0px;
    fill: rgba(210, 0, 0, 1);
  }
}
  
@-moz-keyframes dash-red {
  0% {
    stroke-dashoffset: 300px;
    stroke-width: 0.5px;
    fill: rgba(210, 0, 0, 0);
  }
  50% {
    fill: rgba(210, 0, 0, 0);
  }
  100% {
    stroke-dashoffset: 0px;
    stroke-width: 0px;
    fill: rgba(210, 0, 0, 1);
  }
}
  
@-o-keyframes dash-red {
  0% {
    stroke-dashoffset: 300px;
    stroke-width: 0.5px;
    fill: rgba(210, 0, 0, 0);
  }
  50% {
    fill: rgba(210, 0, 0, 0);
  }
  100% {
    stroke-dashoffset: 0px;
    stroke-width: 0px;
    fill: rgba(210, 0, 0, 1);
  }
}
  
@keyframes dash-red {
  0% {
    stroke-dashoffset: 300px;
    stroke-width: 0.5px;
    fill: rgba(210, 0, 0, 0);
  }
  50% {
    fill: rgba(210, 0, 0, 0);
  }
  100% {
    stroke-dashoffset: 0px;
    stroke-width: 0px;
    fill: rgba(210, 0, 0, 1);
  }
} etc. etc. </style> <path class="red" d="M2.21 28.73L..."/> <path class="red" d="M52.76 23.44c0-2.6..."/> etc. etc. </svg>

Any obvious issues that I am not noticing?

 

Again, works on direct linking with FF, however once implemented as Magento logo, animation dies off.

2 REPLIES

Re: SVG Logo not working in FireFox/IE

Last time a looked into SVG logos I found that SVG implementation in browsers varies wildly and decided against it. Compatibility simply wasn't there yet.

Tanel Raja

Re: SVG Logo not working in FireFox/IE

Yeah, that's what I'm starting to see as well unfortunately.. even with browser specific prefixes and what not, still giving issues. Guess I will just have to wait until it becomes more standardized. Thanks!