0

The SVG logo on this site doesn't look sharp on every zoom level. I read once, that SVG is just sharp on a multiple of its original size. But when I rightclick on the graphic and display it alone (without an img tag around it), it looks sharp on every possible zoom. There is no width or height given to the image.

Sebastian Starke
  • 5,198
  • 3
  • 24
  • 35

2 Answers2

2

It appears that Firefox renders the SVG to an image when referenced via an <img> tag. Use an <object> tag

Community
  • 1
  • 1
Dark Falcon
  • 43,592
  • 5
  • 83
  • 98
0

I believe the issue is in Firefox. Try to set the image width to 100% and height to the actual height of the SVG and this will solve the issue.

For Instance.

img{width:100%;
   height:xxpx; /* Where 'xx' is the value of the image height in pixels */
   }

Hope this Helps.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • You are right, this only appears in firefox. But your sollution does not work. Maybe its because my logo has digits behind the comma. I will try it with an svg, that has a whole number height and width. – Sebastian Starke May 30 '13 at 12:43
  • But the inspect is showing me a width and height of 127px by 127px. You can just put this height and apply a width of 100%. - @Lord_Mord – Nitesh May 30 '13 at 12:47
  • That is the width and height of the svg viewport, but the img tag itself has no given height and width. I added height:127px and width:100% to CSS, but without effect. – Sebastian Starke May 30 '13 at 12:54