SVG контур не размытый, но и не резкий

#css #html5 #svg

  

По какой-то причине эти SVG-файлы выглядят размытыми и не на 100% резкими во всех
браузерах.  

Эти svg файлы, которые заключены в элементы верстки, масштабируются до пикселей,
другими словами, с использованием px, а не%. Cледовательно, не должно быть ошибок растрового
изображения браузера.    

Есть идеи, почему это происходит? 

Ниже один из SVG файлов: 









    

Ответы

Ответ 1

Можно использовать атрибут SVG shape-rendering="crispEdges" для отключения сглаживания
браузером. https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering 


  crispEdges  
  
  Указывает на то, что браузер должен попытаться акцентировать на
  контрасте чистых краев рисунков, в ущерб скорости рендеринга и
  геометрической точности. Для достижения наилучшего результата четкости
  края, браузер может отключить сглаживание для всех линий и кривых или,
  возможно, только для прямых, близких к вертикальным или
  горизонтальным. Кроме того, браузер может скорректировать позиции
  строк и ширину линий для выравнивания краев с пикселями устройства.











Картинка увеличена в 4 раза



Серых пикселей, как в первом ответе не наблюдается  

Update 2019

Универсального, 100% решения проблемы пикселизации нет.  

Так как 2D рендеринг зависит от установленной операционной системы, её настроек,
видеокарты и какой используется браузер.   

Вы можете использовать комплексный подход составленный из всех ответов этого топика: 


Использовать целочисленные значения координат SVG изображений
Если вы берете готовое изображение с дробными значениями, то можно обработать его
SVG оптимизатором    
Установить целочисленное значение viewBox      
Использовать атрибут  shape-rendering ="crispEdges"     
Если возможно изменение дизайна, - избегать контрастных пограничных цветов.
Например: вместо черно-белого сочетания используйте темно серый цвет или вместо чисто
белого фона используйте оттенки серого цвета.   


Ответ:  @Alexandr_TT


Ответ 2

Если вы хотите, чтобы ваш SVG был максимально резким, спроектируйте его так, чтобы
его формы, особенно горизонтальные и вертикальные части, находились на границах пикселей.    

Например, сравните следующие два примера:  










Вот, как это выглядит при увеличении в 4 раза. 

  

Каждый раз, когда ваша фигура проходит через середину пикселей, вы получите серые
пиксели из-за сглаживания, которое используют 2D рендереры.  

Источник ответа: @Paul LeBeau