SVG Horizontal Dashed Circle - html

Question

I'm trying to create the following as an SVG:
I.e. a circle with dashed horizontal lines.
This is the SVG code I have at the moment...generated by Adobe Illustrator:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="165px" height="165px" viewBox="0 0 165 165" enable-background="new 0 0 165 165" xml:space="preserve">
<g>
<circle fill="none" stroke="#000000" stroke-width="9" stroke-miterlimit="23" stroke-dasharray="1.0048,6.0288" cx="82.453" cy="82.563" r="75"/>
</g>
</svg>
But when I open in Chrome the lines seem to be very jagged and some lines are closer then others.
Is there a better way to produce this SVG or shall I simply use a PNG?

Answer 1

Here's a different approach to produce the same appearance which should be more stable across renderers, by using actual line segments rather than very short stroke dashes.
I've used <defs> and <use> to keep the repetition sane — I define four axis-aligned lines around a center and then rotate it by a quarter-circle of even steps. (I changed the scale a bit for the sake of round numbers in my example.)
Note that if zoomed in it will be slightly different: in the original, each dash will be slightly wedge-shaped (due to the curve of the circle), whereas here they will have a constant width since they are just plain line segments.
<svg width="160px" height="160px" viewBox="0 0 160 160">
<defs>
<g id="lines" style="stroke: black;">
<line x1=" 71" x2=" 79" />
<line x1="-71" x2="-79" />
<line y1=" 71" y2=" 79" />
<line y1="-71" y2="-79" />
</g>
</defs>
<g transform="translate(80 80)">
<use xlink:href="#lines" transform="rotate( 0)"/>
<use xlink:href="#lines" transform="rotate( 5)"/>
<use xlink:href="#lines" transform="rotate(10)"/>
<use xlink:href="#lines" transform="rotate(15)"/>
<use xlink:href="#lines" transform="rotate(20)"/>
<use xlink:href="#lines" transform="rotate(25)"/>
<use xlink:href="#lines" transform="rotate(30)"/>
<use xlink:href="#lines" transform="rotate(35)"/>
<use xlink:href="#lines" transform="rotate(40)"/>
<use xlink:href="#lines" transform="rotate(45)"/>
<use xlink:href="#lines" transform="rotate(50)"/>
<use xlink:href="#lines" transform="rotate(55)"/>
<use xlink:href="#lines" transform="rotate(60)"/>
<use xlink:href="#lines" transform="rotate(65)"/>
<use xlink:href="#lines" transform="rotate(70)"/>
<use xlink:href="#lines" transform="rotate(75)"/>
<use xlink:href="#lines" transform="rotate(80)"/>
<use xlink:href="#lines" transform="rotate(85)"/>
</g>
</svg>
This is a SVG-in-HTML fragment — if using it as a standalone SVG document don't forget to put the xmlns back in.

Answer 2

Here is an alternative approach with the same tick count and tick size.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="165px" height="165px" viewBox="0 0 165 165">
<g transform="translate(82.453 82.563)">
<g id="t32">
<g id="t16">
<g id="t8">
<g id="t4">
<g id="t3">
<rect x="70.5" y="-0.5024" width="9" height="1.0048" id="t"/>
<use xlink:href="#t" transform="rotate(5.37)"/>
<use xlink:href="#t" transform="rotate(10.75)"/>
</g>
<use xlink:href="#t" transform="rotate(16.12)"/>
</g>
<use xlink:href="#t4" transform="rotate(21.49)"/>
</g>
<use xlink:href="#t8" transform="rotate(42.99)"/>
</g>
<use xlink:href="#t16" transform="rotate(85.97)"/>
</g>
<use xlink:href="#t32" transform="rotate(171.94)"/>
<use xlink:href="#t3" transform="rotate(343.88)"/>
</g>
</svg>