SVG rendering in Safari using stroke-dasharray

Question

I'm having a weird renderering issue with an SVG in Safari. I have a circle with a stroke animating like a circular loader, but for some reason the rendering is off as soon as i add the stroke-dashoffset or stroke-dasharray.

gif for reference:

_{(source: askenielsen.dk)}

The rendering somehow seems to get more jagged as soon as one of these styles are applied.

It doesn't seem like much, but it becomes quite apparent with more than one circle:

_{(source: askenielsen.dk)}

It looks fine in Safari on a retina display or and in IE, Firefox, Chrome etc.

The scaling of the circle or the stroke width does not change the problem, in neither browser.

SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 134 134" enable-background="new 0 0 134 134" xml:space="preserve" width="134px" height="134px">   
    <path class="circle" d="M67,6c33.7,0,61,27.3,61,61c0,33.7-27.3,61-61,61c-33.7,0-61-27.3-61-61C6,33.3,33.3,6,67,6"/>
    <path class="circle" d="M67,13c29.8,0,54,24.2,54,54s-24.2,54-54,54S13,96.8,13,67S37.2,13,67,13"/>
    <path class="circle" d="M67,20c26,0,47,21,47,47s-21,47-47,47S20,93,20,67S41,20,67,20"/>         
</svg>

CSS

.circle {
    fill: none;
    stroke: red;
    stroke-width: 4px;
    /* THE STYLE THAT MESSES UP THE RENDERING */
    stroke-dasharray: 200px, 200px;
}

You can test it here.

Any ideas?

Do you have the source or a fiddle to demonstrate the behavior? — insertusernamehere

Jonathan Marzullo Jonathan Marzullo · Accepted Answer · 2015-12-08T18:10:09

You can try adding shape-rendering with the value of geometricPrecision

circle {
    shape-rendering: geometricPrecision;
}

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

auto Indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
optimizeSpeed Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.
crispEdges Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
geometricPrecision Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.

The following SVG shape elements can use shape-rendering:

<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>

You can control the use of anti-aliasing with the CSS shape-rendering property. Setting this property to crispEdges (on an element or the SVG as a whole) will turn off anti-aliasing, resulting in clear (if sometimes jagged) lines. A value of geometricPrecision will emphasize smooth edges.

SVG rendering in Safari using stroke-dasharray

1 Answers