The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Why do Re-sized SVGs in Image Tags Artifact (Sometimes – In Firefox)

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #167419

    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…

    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?

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.