Размытые границы фигур в SVG
 

Добрый день
Для проверки пользуюсь вот этим
http://codepen.io/jonitrythall/pen/5...1a48d27534ea5e

Итак рисуем прямоугольник

<svg width="200px" height="200px" viewBox="0 0 200 200">
<rect x="10" y="10" width="100" height="100"
style="fill: none; stroke: black;"/>
</svg>

Если приглядеться линии размыты.
делаем так
и границы фигуры становятся четкими

<svg width="200px" height="200px" viewBox="0 0 200 200">
<rect x="10.5" y="10.5" width="100" height="100"
style="fill: none; stroke: black;"/>
</svg>

В чём фикус, как избежать данного эффекта?

Потому что толщина эквидистанты (stroke) 1px делится на 2 и браузер рендерит по 0.5 с каждой стороны сетки пикселов с началом координат привязанной к сетке - 10:10 и эти половинки само собой оказываются с альфой 50% и выглядят мякишем. А когда ты пишешь 10.5, то четко смещаешься на 0.5 пикс и чоткий браузер чотко рендерит толщину и получается хрустяще.

Я не понял чего ты хочешь, мякиш или хруст, но обойти эту фичу не сможешь, поскольку она фундаментальная.

Проверяй так

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="200" height="200" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<rect x="10" y="10" width="100" height="100" stroke-width="2px" fill="none" stroke="black"/>
</svg>

ЗЫ shape-rendering не поможет. Это природа пикселов такая и особенно она достает на мелких кеглях текста, из-за чего в шрифтовой индустрии даже целый отдел под названием hinting имеется. Если ты видел самопальные икончатые шрифты типа фонтосом, то мог заметить, что они в зависимости от размера рендерятся как гавно. Это потому что у фонтосомов нет отдела hinting. То есть, тебе придется делать хинтинг на все фигуры, если ты хочешь юзать этот эффект сглаживания.

На заливке без обводки картина будет в точности наоборот. Все ровные размеры будут хрустящими, а все неровные - мягкими.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="200" height="200" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<rect x="10.5" y="10.5" width="100" height="100" fill="#a00"/>
</svg>

Лучше перестать хотеть хинтинг и полегчает.

Но если хочется на экране видеть хинтинг