CODEWITHSUNDEEP
svgd3.js
Richard
Richard

Reputation: 65530

SVG text is poor quality?

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:

enter image description here

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

Upvotes: 17

Views: 7917

Answers (2)

deebnsn
deebnsn

Reputation: 1

Instead of hoverLineGroup.append('text')

Append the text to the parent svg variable, i.e.

<svg></svg>

In JavaScript:

var svg = d3.select("svg")
svg.append('text')

Upvotes: -1

reblace
reblace

Reputation: 4195

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?

Upvotes: 38

Related Questions