SVG rendering blurry in all browsers except chrome - css

Question

I have an SVG file that is using a pattern to make the background of a schedule. In Google Chrome, this renders as expected, with every line not being anti-aliased. However, in Firefox, Safari, and Internet Explorer, it renders with every line being 2px that are semi-transparent.
What I Tried
After many hours of searching and trying different approaches, I have come to the following conclusions:
The blurriness is in part caused by the fact that the svg has a dynamic width and is solved when a viewBox attribute is applied, however this looses all scalability which defeats the purpose of using an svg.
When there is only one svg on the page, it appears to look normal (or close enough to normal), however when there are multiple in succession, every other one (or sometimes randomly) will appear with each 1px line appearing as 2px anti-aliased line (looks bad).
Offsetting the x and/or y-values by .5 pixels does not change anything and can make the rendering look even worse sometimes.
Adding shape-rendering: crispEdges; to the style of each line can either a) make the lines disappear completely or just not have any effect whatsoever or b) make the colors in the 2px lines darker, but not actually making the lines 1 pixel.
The enable-background attribute appears to have no effect on the
Again, none of these problems appear in Chrome, but do in all other modern browsers
The SVG in question
<svg width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="day" width="100%" x="0" height="40" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:#bbb;stroke-width:1" />
<line x1="0" y1="20" x2="100%" y2="20" style="stroke:#ccc;stroke-width:1" stroke-dasharray="3,3" />
</pattern>
<pattern id="hours" width="100%" x="0" height="40" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:#000;stroke-width:1" />
</pattern>
</defs>
<rect x="0" width="5%" height="500" fill="url(#hours)" />
<rect x="7%" width="17%" height="500" fill="url(#day)" />
<rect x="26%" width="17%" height="500" fill="url(#day)" />
<rect x="45%" width="17%" height="500" fill="url(#day)" />
<rect x="64%" width="17%" height="500" fill="url(#day)" />
<rect x="83%" width="17%" height="500" fill="url(#day)" />
</svg>
Images of Renderings
VIEW FULLSCREEN TO SEE EFFECT
Chrome (reference):
http://i.imgur.com/BMjFmH6.png
Firefox (with shape-rendering: crispEdges;):
http://i.imgur.com/4cgZjq7.png
Firefox (with .5px renderings, after multiple included svg's. Note, image rendered at different size than previous ones.)
(Can't post 3 links, but use this id after imgur.com):
JiuswRF.png
Any help on this problem would be greatly apreciated.
Thanks!

Answer 1

If you want to stay with pattern, I'd recommend rewriting all those units in absolute OR relative units, or to dynamically switch your viewBox dimensions in JavaScript.
An alternative is to generate a pattern using Filters. This displays crisply in Chrome and Firefox (although IE is still buggy)
<filter id="better" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feFlood x="0%" y="0%" width="100%" height="0.2%" flood-color="#B00" result="redline"/>
<feFlood x="0%" y="3.9%" width="1%" height="0.2%" flood-color="#0B0" result="stroke-dash"/>
<feFlood x="0%" y="3.9%" width="2%" height="0.2%" flood-color="#FFF" result="stroke-dash2"/>
<feComposite operator="over" in="stroke-dash" in2="stroke-dash2" result="full-dash"/>
<feTile in="full-dash" x="0%" y="3.9%" width="100%" height="0.1%" result="green-stroke"/>
<feComposite x="0%" y="0%" height="8%" width="100%" operator="over" in="redline" in2="green-stroke" result="one-tile"/>
<feTile in="one-tile" x="0%" y="0%" height="100%" width="100%"/>
</filter>
http://codepen.io/mullany/pen/CLsxv