0

my site consists of one div which consists of a background-image with background-size:100%. The container itself has a width of 100% and bottom padding of 10%. What I dont understand is why my svg gets converted to a non-vektor image. When scaled up it really looks horrible. I tried using non percentage values but that doesnt work either. preserveAspectRatio is irrelevant too.

Using the image inline as an img works perfectly but I want to animate the svg sprite background position.

I honestly need some advice. Is there a workaround`?

Demorus
  • 159
  • 13
  • This may help: http://stackoverflow.com/questions/14171475/svg-image-blurry-at-specific-zoom-levels-in-chrome/14171613#14171613 –  May 24 '14 at 09:26
  • @Epistemex I remember I looked at that article but it doesnt work for me. I dont have a parent element. I just use 1 element / div / class which has my background image. I tried to set it even to a fixed size. I noticed that removing drop shadow in illustrator fixes the issue though. Im not sure why. Somehow the filter induces this problem but ofcourse I want to keep it. – Demorus May 24 '14 at 09:35
  • Please make a fiddle so we can see what's going on. Your description alone is not really enough to diagnose your problem. – Paul LeBeau May 24 '14 at 11:08
  • @BigBadaboom here my bug report https://bugzilla.mozilla.org/show_bug.cgi?id=1015575 – Demorus May 24 '14 at 11:23

1 Answers1

0

Go in illustrator and add a drop shadow made in photoshop. This way everything but the shadow will be an svg resulting in a hybrid svg file. Works perfectly ; )