Problem:
In most modern browsers and IE newer than IE9, how do I snap an SVG drawing container to the nearest sub-pixel?
Solution
Use the following CSS, where 'your-svg-container' is replaced by the actual ID or style class of your drawing inside your website.
#your-svg-container {
/* svg */
transform: translate(0, 0);
}
Notes:
This SVG style rule appears to work in many modern browsers. It can be useful if a website contains a SVG drawing that has elements that align to whole pixels, such as a grid. If such a drawing lands on a fraction of a pixel, it can appear blurry, depending on the browser's rendering engine.
This blurry alignment can happen when non-pixel alignment techniques are used, such as aligning to units such as em, %, or pt, or using computed alignment such as centered alignment (i.e. your drawing will be blurry upon every odd or even page size).
No comments:
Post a Comment