О граблях SVG-иконок

Thu, 02 Jun 2016 18:52:05 GMT

Четыре года назад я жаловался на тенденцию запихивать векторные иконки в кастомные шрифты и стучал ногами, что надо использовать 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 }

}

comments

Блокнотик Centaur’а

О граблях SVG-иконок