SVG rect - размытый бордер
 

Сейчас делаю блоки с закругленными краями с помощью svg и vml, заметил, что в варианте svg бордер у rect несколько размытый, а у vml roundrect - четкий.

В чем причина такого поведения и что с этим делать?

<rect x="0" y="0" width="648px" height="398px" fill="#fff" stroke="#dadada" stroke-width="1px" rx="14px" ry="14px"/>

Сместите координаты на полпикселя, а то сейчас середина линии попает на сетку между пикселями.

Спасибо, помогло. А не подскажите, откуда эти "полпикселя" взялись? И что такое сетка? Это что-то из векторной графике? Буду признателен объяснению или ссылкам где почитать.

bdiang,
да нет, никаких специфичных терминов. Просто векторную линию толщиной 1 пиксель надо отобразить при помощи пикселей. Но что делать, если середина линии попадает ровно между пикселями? Нарисовать её на обоих пикселях, но в половину яркости.

Это упрощенная модель, но как-то так. Ключевые слова для поиска: Растеризация, Субпиксельный рендер.

А в случае ширины и высоты в процентах, получается нет гарантии, что при изменении абсолютных ширины и высоты линия не попадет между пикселями?

Угук. Так и есть.