О граблях SVG-иконок
Четыре года назад я жаловался на тенденцию запихивать векторные иконки в кастомные шрифты и стучал ногами, что надо использовать SVG. В этом году ГитХаб это сделал.
Ну и что же мы теперь имеем: мыло.
Потому что в шрифтах есть хинтинг, привязывающий тонкие линии к пиксельной сетке. А в SVG его ещё нет.
Поэтому вот они нарисовали иконки, выровняли их так, чтоб при дефолтных стилях было чётко, ну и всё. А я предпочитаю шрифт достаточного размера и интерлиньяж посвободнее, и у меня на рабочем месте они съезжают на полпикселя. Причём не все. (На домашней машине у меня HiDPI, поэтому SVG-иконки выглядят просто отлично.)
По-правильному, надо в SVG для тех линий, которые важно привязать к сетке, указывать атрибут shape-rendering="crispEdges". Но в качестве костыля можно накладывать его сверху при помощи юзерстиля. Только для тех иконок, где есть тонкие вертикальные или горизонтальные линии.
@namespace svg url(http://www.w3.org/2000/svg); @-moz-document domain("github.com") { .octicon-plus, .octicon-file-directory, .octicon-file-text, .octicon-graph, .octicon-book, .octicon-trashcan, .octicon-repo, .octicon-comment { shape-rendering: crispEdges !important; position: relative; left: 0.1px } } This entry was originally posted at http://yurikhan.dreamwidth.org/64693.html.