I am drawing an SVG group with a circle and a piece of text. As part of an animation, I scale the group up and down. When the group is scaled relatively small, everything looks fine. However, once it gets very small, you start getting some nasty artifacts.
An example is below. Notice the circles on the right are fine, but when they get really small, you get the text artifacts on the left.
Below is some exemplary SVG code that causes the artifacts. This only seems to happen in firefox.
<g transform="translate(77 256) scale(0.00469784)">
<circle stroke="rgb(180, 0, 100)" r="30" cx="0" cy="0"/>
<text text-anchor="middle" dominant-baseline="middle" x="0" y="0" font-size="15">Foo Bar</text>
</g>