I have an SVG element that draws elements for exact pixels. When the element itself fits on the exact pixel in the DOM, it displays without aliasing in all major browsers. However, when a subpixel offset is present in the ancestor of an element, it becomes an alias.
I can prevent aliasing in most browsers by setting the form to render at sharp edges or optimizing speed, however, this can lead to inconsistency in the content of the SVG by 1 pixel if it is rounded in the wrong direction, so the line of pixels may be skipped at the top or side of the image.
I can fix the problem with el.getBoundingClientRect () and adjust the fields to exclude subpixel offset. This works once, but if an element is moved to dom - by scrolling, dragging, etc. Etc. That method must be reapplied. This means that you are listening to the DOM, which does not seem to be effective.
What I would like to find is a CSS rule or an element that I can wrap SVG to make it align with the exact pixel. I was wondering if there is any kind of own element - for example. a flag that browsers can make display on an exact pixel for their own rendering purposes. Then I could align the SVG with this ...
http://codepen.io/anon/pen/HvCcK (the problem is best demonstrated in Firefox)
HTML:
Crisp on FF and Chrome/Safari:<br/>
<div id="s2" style="width:21px; height:7px; background-color:#FFFFFF;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" overflow="hidden" viewBox="0 0 50 70" preserveAspectRatio="xMinYMin" style="display: block;"><defs></defs><g style="display: block;">
<rect x="0" y="0" width="100%" height="100%" fill="red" stroke="none"></rect>
<path d="M10 10 L 40 10 40 20 20 20 20 30 40 30 40 60 10 60 10 50 30 50 30 40 10 40 Z" fill="white" stroke="none"></path>
</g></svg>
</div>
<br/>
<div class='offpixel'>
Blurry on Firefox (not on exact pixel):<br/>
<div id="s2" style="width:21px; height:7px; background-color:#FFFFFF;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" overflow="hidden" viewBox="0 0 50 70" preserveAspectRatio="xMinYMin" style="display: block;"><defs></defs><g style="display: block;">
<rect x="0" y="0" width="100%" height="100%" fill="red" stroke="none"></rect>
<path d="M10 10 L 40 10 40 20 20 20 20 30 40 30 40 60 10 60 10 50 30 50 30 40 10 40 Z" fill="white" stroke="none"></path>
</g></svg>
</div>
<br/>
Crisp on Firefox - but not properly drawn: (not on exact pixel, but uses shape-rendering):<br/>
<div id="s2" style="width:21px; height:7px; background-color:#FFFFFF;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" overflow="hidden" viewBox="0 0 50 70" preserveAspectRatio="xMinYMin" style="display: block; shape-rendering: crispedges"><defs></defs><g style="display: block;">
<rect x="0" y="0" width="100%" height="100%" fill="red" stroke="none"></rect>
<path d="M10 10 L 40 10 40 20 20 20 20 30 40 30 40 60 10 60 10 50 30 50 30 40 10 40 Z" fill="white" stroke="none"></path>
</g></svg>
</div>
</div>
CSS
body{
font-family:sans-serif;
font-size:10px;
}
.offpixel {
padding:3.5px;
}