1003213 - Artifacts when displaying SVG as an image at certain sizes (flattened curves or "reflected" lines near border)

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[si]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36

Steps to reproduce:

http://codepen.io/calebbrewer/pen/DlHKk

CopePen comes from: http://css-tricks.com/forums/topic/why-do-re-sized-svgs-in-image-tags-artifact-sometimes-in-firefox/
SO: http://stackoverflow.com/questions/21447705/svg-transform-scaling-text-to-very-small-causes-weird-overlap-effect


Actual results:

The SVG embedded img has Artifacts


Expected results:

The SVG embedded img should have no Artifacts

Comment 1

[Robert Longson [:longsonr]]

There's no text in the testcase. Please provide a testcase that demonstrates the issue.

Comment 2

[si]

If you open the Codepen http://codepen.io/calebbrewer/pen/DlHKk and compare both SVG's (Same SVG, first as img second as object) you can see that the svg which is included as img has little artifacts on the bottom of the Letters "COFFEE".

Is that enough text? Not sure what you need.

Comment 3

[Robert Longson [:longsonr]]

The examples contain paths rather than text even though the stackoverflow article seems to be talking about text scaling so I'm confused about what this bug is about.

Also I see no artifacts on the paths on the couple of Windows PCs I've tried. Perhaps attaching a screenshot might help.

Comment 4

[si]

Attachment: artifacts.png

Here you can see the Artifacts.
Left Side is the Problem i have, right side is the Codepen as seen on my Win 7 x64 machine. (Chrome and IE9 do display all 3 correct)
Any yes, its the Path rendering not the SVG Text.

Comment 5

[si]

Comment on attachment 8415175 [details]
artifacts.png

Left Side is an SVG Sprite included via background-image:url(...)

Comment 6

[Élie Michel]

Here is another example of that issue : https://github.com/tmos/greeder/issues/124

(Yes, we tried to deactive CSS, check SVG files integrity, and so on)

It seems that the SVG viewport does not exactly fit the `img` tag one and for some reason the image is mirrored on the edges or cut.
Sometimes you have to zoom in or out in order to see it.

It's quite anoying not to be able to include properly SVG images in `img` tag since it's actually the only way to make it clickable (`object` tag does not allow linking according to this French reference : http://www.alsacreations.com/tuto/lire/1482-un-logo-cliquable-svg-avec-alternatives.html)

Comment 8

[Sebastian Troy]

The artifacts only appear when the images size is a decimal number, i.e 77px * 77px is fine but 77.01px * 77.01px will be rendered incorrectly. Try here: http://jsbin.com/xanetehugeki/1/edit

Comment 9

[Sebastian Troy]

Hmm, ok so the greatest errors occur at .5, .0001 and .9999 are almost perfect, it seems that the closer to a half the decimal is, the more noticeable the artifacts (Wish I could edit my last comment)

Comment 11

[Daniel Holbert [:dholbert]]

This might be fixed by bug 1043560. needinfo=seth to confirm.

Comment 12

[Seth Fowler [:seth] [:s2h]]

I've confirmed that this is fixed by bug 1043560.