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

142
19 июня 2019, 14:30

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

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

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

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

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	 viewBox="0 0 361.5 192.5" style="enable-background:new 0 0 361.5 192.5;" xml:space="preserve"> 
<style type="text/css"> 
	.st0{fill:none;} 
	.st1{fill:#FC5500;} 
	.st2{fill:#FFFFFF;} 
	.st3{fill:#FB5500;} 
</style> 
<g> 
	<path class="st0" d="M-9.4-6.3c126,0,252,0,378,0c0,68.7,0,137.3,0,206c-126,0-252,0-378,0C-9.4,131-9.4,62.4-9.4-6.3z"/> 
	<path class="st1" d="M-0.2,112.1c0-8,0-15.9,0-24.4c112.3,0,224.3,0,336.7,0c0-29.4,0-58.4,0-87.7c8.4,0,16.4,0,25,0 
		c0,46.8,0,93.7,0,140.6c-2.4-0.3-2.5-2.5-3.2-4c-3.7-9-10.3-15-19.3-18.5c-15.2-6-31.2-6.7-47.2-5.5c-7.8,0.6-15.6,1.5-23.1,4.1 
		c-24.8,8.7-33.9,38-18.3,59.2c5.8,7.8,14.5,10.9,23.4,13.4c2,0.6,4.9-0.1,5.6,3.1c-13.9,0-27.9,0-41.8,0 
		c-8.1-5.7-14.1-13.6-21.4-20.2c-1.7-1.5-3.8-2.8-4.1-5.5c0.5-2.5,2.8-3.1,4.7-3.9c9.5-4.3,14.3-11.9,14.5-22.1 
		c0.2-10.1-4.8-17.3-13.9-21.8c-8.5-4.2-17.6-5.3-26.7-5.5c-20.8-0.4-41.6-0.1-62.5-0.1c-1.7,0-3.3,0-4.8,0.8 
		c-1.6,2.3-1.1,4.9-1.1,7.3c0,21.2,0,42.3,0,63.5c0,2.6,0.5,5.4-1.7,7.6c-32,0-64,0-96.1,0c-3.2-6.9-1.5-13.8-0.9-20.2 
		c3.1-2.6,6-2.3,8.8-2.3c12.7-0.1,25.3,0,38-0.1c7.8-0.1,15.3-1.6,22.2-5.3c17.8-9.6,18.8-33.3,1.7-44.3c-8.9-5.7-19.1-6.7-29.3-6.9 
		c-19.3-0.3-38.7,0.1-58-0.1C4.6,113.4,2,113.8-0.2,112.1z"/> 
	<path class="st2" d="M120.6,192.5c0-26.6,0-53.3,0-80.7c29.5,1.5,58.7-2.6,87.6,2.2c13.5,2.2,24.2,9.5,24.9,25.1 
		c0.6,14.2-6.8,23.1-20.2,27c8.3,8.8,16.5,17.6,24.7,26.4c-11.2,0-22.5,0-33.7,0c-4-1.4-6-5-8.7-7.9c-12.1-13.2-6.6-11-23.7-11.2 
		c-5.5-0.1-10.9,0-16.4,0c-2,0-4-0.2-6,1c-1.5,3.5-0.5,7.4-0.8,11.1c-0.2,2.4,0.3,5-1.7,7.1C138,192.5,129.3,192.5,120.6,192.5z"/> 
	<path class="st2" d="M203.8,0.7c-4.9,6.4-10,13.1-15.2,20c-18.4,0-36.7,0-55,0c-4.1,0-9-0.2-8.9,5.9c0,6.1,4.8,5.9,9,6 
		c16.8,0.2,33.7-0.4,50.5,0.6c12.5,0.7,22.4,6.1,22.6,20.9c0.2,14.6-7.3,24.7-22.5,25.3c-28.5,1.2-57.1,0.3-85.9,0.3 
		c5-6.5,10.1-13.2,15.3-20c19.3,0,38.4,0.1,57.6-0.1c4.4,0,11.3,1.9,11.3-5.3c0.1-7.7-7-5.4-11.6-5.5c-16.1-0.4-32.4,0.3-48.4-0.9 
		c-13-1-21.7-8.1-21.9-22.5c-0.2-14.9,8.5-23.6,22-24.3C149.5-0.2,176.6,0.7,203.8,0.7z"/> 
	<path class="st2" d="M279.5,192.5c-31.5-9.3-41.2-22.1-36.9-48.9c2.8-17.6,15-26,31-29.7c18.9-4.4,38-4.4,57-0.2 
		c15.1,3.4,26.5,11.3,31,27c0,7.6,0,15.2,0,22.9c-2.8,16.5-15.6,27.1-34.6,28.6c-1,0.1-2-0.2-2.9,0.3 
		C309.1,192.5,294.3,192.5,279.5,192.5z"/> 
	<path class="st2" d="M77.2,20.7c-17.1,0-33.9,0-51.1,0c0,3.2,0,6.3,0,9.8c20.5,0,41.1,0,62.9,0c-5.3,6.7-9.8,12.4-14.4,18.2 
		c-16.2,0-32.1,0-48.5,0c0,3.6,0,7,0,10.8c22,0,44.1,0,67.6,0c-5.9,7.7-11,14.5-16,21.1c-26,0-51.6,0-77.6,0C0,53.7,0,27,0,0 
		c30.7,0,61.4,0,93,0C87.6,7.1,82.5,13.8,77.2,20.7z"/> 
	<path class="st2" d="M-0.2,112.1c25.3,0.1,50.6-0.4,75.9,0.7c20.2,0.9,32.8,13.2,32.7,29.5c-0.1,16.5-13.5,28.5-34.1,29.3 
		c-16.3,0.6-32.6,0.1-49.7,0.1c0,7.4,0,14.1,0,20.9c-8.1,0-16.3,0-24.8,0C-0.2,165.6-0.2,138.8-0.2,112.1z"/> 
	<path class="st2" d="M233.3-0.2c18.6,0,37-0.5,55.3,0.1c21,0.7,34.6,13.1,34.6,30.5c0,17.4-13.8,29.5-35.4,30.1 
		c-15.1,0.5-30.3,0.1-45.9,0.1c0,6.7,0,13.1,0,19.8c-8.6,0-16.6,0-25,0c0-13.4,0-26.6,0-40.7c22.6,0,45.3,0,68.1,0 
		c5.2,0,10.8-0.6,12.4-6.2c2.6-9.1-3-12.6-11.1-12.7c-22.7-0.2-45.5-0.1-69.4-0.1C222.7,13.3,227.9,6.6,233.3-0.2z"/> 
	<path class="st1" d="M146.7,192.5c0-6.8,0-13.6,0-20.8c13.2,0,26.1,0,39.7,0c5.6,6.6,11.6,13.7,17.6,20.8 
		C184.9,192.5,165.8,192.5,146.7,192.5z"/> 
	<path class="st3" d="M323.9,192.5c17.1-3.7,32.3-9.9,37.6-29c0,9.5,0,18.9,0,29C349,192.5,336.4,192.5,323.9,192.5z"/> 
	<path class="st3" d="M145.8,150.8c0-5.7,0-11.4,0-17.1c17.9,0,35.6-0.2,53.3,0.2c4.4,0.1,7.8,3.1,7.7,8.3c-0.1,6-4.5,8.4-9.3,8.5 
		C180.4,151,163.3,150.8,145.8,150.8z"/> 
	<path class="st1" d="M302.2,173.1c-6-0.4-11.4-0.7-16.9-1.1c-12.8-1.1-18.4-8-18.1-20.9c0.3-12.7,7.6-17.4,19-18.6 
		c11.1-1.1,22.3-1.2,33.4,0.1c11.3,1.3,17.2,7.1,17.3,19c0.1,11.8-5,18.7-16.7,20C314.1,172.4,307.9,172.7,302.2,173.1z"/> 
	<path class="st3" d="M25.1,133c15.6,0,30.9-0.2,46.2,0.1c5.6,0.1,11.1,1.8,11.2,8.7c0.2,7.1-5.2,9.3-11.1,9.4 
		c-15.3,0.3-30.6,0.1-46.3,0.1C25.1,145.5,25.1,139.6,25.1,133z"/> 
</g> 
</svg>

Answer 1

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

crispEdges

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

<svg width="50" height="50"> 
  <rect x="9.5" y="9.5" width="31" height="31" shape-rendering="crispEdges"/> 
</svg> 
 
<svg width="50" height="50"> 
  <rect x="10" y="10" width="30" height="30"/> 
</svg>

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

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

Ответ: @Alexandr_TT

Answer 2

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

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

<svg width="50" height="50"> 
  <rect x="9.5" y="9.5" width="31" height="31"/> 
</svg> 
 
<svg width="50" height="50"> 
  <rect x="10" y="10" width="30" height="30"/> 
</svg>

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

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

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

READ ALSO
Gulp 4 выдает ошибку
javascript

Gulp 4 выдает ошибку

Исходники: Gulp4zip

 110
Получить статус запроса ReactJS
javascript

Получить статус запроса ReactJS

Получаю ответ от API OpenWeatherMapКаким образом можно было бы получить код ответа и в зависимости от него отобразить контент? К примеру, если статус...

 115
Изображение в массиве
javascript

Изображение в массиве

Как мне передать картинку через массив? Имеется массив Const LocalStorage = [ { Id: 1, Name: "one" … } … ]

 88
Перейти к следующему фото в альбоме вконтакте с помощью javascript
javascript

Перейти к следующему фото в альбоме вконтакте с помощью javascript

Нашел селектор, который отвечает за переход к следующему фото из альбома вконтакте: #pv_nav_btn_right хотел перейти таким образом:

 84