Okay so this is one of those “What the heck is going on here – I’m going to pull my hair out” sorta issues. Mainly because it doesn’t happen all the time and it’s only in Firefox. I’ll give you an example of what I’m talking about…
http://codepen.io/calebbrewer/pen/DlHKk
Notice the artifacting on some of the SVGs that are in image tags.
This is a really annoying issue and it seem to be caused by a non-integral factor. In other words if the SVG image is re-sized by a factor that does not result it a whole number this will happen. I am guessing it’s because if it were a raster image the pixels in the final picture would come from fractional coordinates. This means it will have a color that is a weighted average of the near pixels. And because the image is actually an SVG it can’t do that, so just creates a line type artifact at the edge of the image. I’m not sure why this only happens in Firefox.
The Fix?
if you want/need to use an image tag to display your SVGs (like I do in this case) then you will have to make the viewBox property in the SVG a little larger than the drawing. Doing this will cause the last pixels (from the image tags point of view) to be transparent, and there for there will be no artifacting.
After all of that, my question is: Is this a correct assumption of what is happening and is there another fix? Also, Why does this only happen in Firefox?
