SVG text is poor quality?

Question

I've constructed some SVG text using D3, but for some reason it's quite low quality. This is in Chrome on OSX.

This is the code:

.hover-text { 
   stroke: black;
}
var tipHeadText = hoverLineGroup.append('text')
   .attr("class", "hover-text")
   .attr("text-anchor", "middle")
   .attr('font-size', '10px')
   .attr('y', -45).text("Last data point:")

This is how it renders, looking quite fuzzy:

Is there anything I can do to make it crisper? Or would I be better off using HTML?

Answer 1

It looks like you're setting the stroke to black? Stroke represents the outer border of the text where fill sets the inner color. Consider using fill instead and setting stroke to none:

.fuzzy {
    stroke: black;
}
.crisp {
    fill: black;
    font-weight: bold;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text class="fuzzy" font-size="10px" x="0" y="15" fill="red">I love SVG</text>
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text class="crisp" font-size="10px" x="0" y="15" fill="red">I love SVG</text>
</svg> 

jsFiddle: http://jsfiddle.net/reblace/RGEXc/1/ Here's a nice reference on svg text: http://www.hongkiat.com/blog/scalable-vector-graphics-text/

If this is off the mark, then perhaps a jsFiddle of your own demonstrating the problem would help narrow in on the issue?