svg 不锐利，但模糊答案

【问题标题】：svg not sharp, but blurrysvg 不锐利，但模糊
【发布时间】：2017-12-01 09:38:26
【问题描述】：

无论出于何种原因，这些 svg 文件看起来很模糊，并且在所有浏览器中都不是 100% 清晰。这些是 svg 文件，包含在缩放为像素的元素中，换句话说，使用 px 而不是 % - 因此没有浏览器位图错误。

知道为什么会这样吗？

这是其中一个 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>

【问题讨论】：

哪些浏览器出现模糊？
所有我测试过的，chrome、IE 和 fire

标签： html css svg blurry

【解决方案1】：

如果您希望您的 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 渲染器使用的抗锯齿功能，您将获得灰色像素。

【讨论】：

我在 Illustrator 中有一个徽标。我怎样才能实现这样的输出？
如果您可以控制最终显示的宽度和高度，请确保任何水平或垂直边缘都位于与最终输出中的像素边界相对应的坐标处。如果您无法控制最终输出大小，那么您实际上无能为力（除了不太理想的crispEdges 方法）。你只需要忍受它。好消息是，99.999% 的用户不会注意到或不在乎徽标的某些部分看起来有些模糊。
为什么这可以解决主要不是水平和垂直边界的 svg 的任何问题？
正如我在回答中所说的那样，为了获得最佳效果，请尽量安排它，使您的形状的许多部分与像素边界重合，并尽可能少地穿过像素的中间。跨度>

【解决方案2】：

回复使用了稍加修改的代码@Paul LeBeau

您可以使用 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倍

没有观察到灰色像素。

由 cmets 更新 2019 年

像素化问题没有通用的 100% 解决方案。
由于渲染取决于安装的操作系统、其设置、显卡和使用的浏览器。

您可以使用由该主题的所有答案组成的综合方法：

使用整数svg 回答@Paul LeBeau 的图像坐标值

如果您使用小数值拍摄完成的图像，您可以处理它与SVG optimizer
通过回答@AKX设置viewBox的整数值
使用属性shape-rendering ="crispEdges"

如果可以更改设计，请避免使用对比鲜明的边框颜色。

例如，使用深灰色代替黑白组合，或使用灰色阴影代替纯白色背景。

【讨论】：

@Vincent Wen 很高兴能帮到你
这对于矩形和非旋转的形状非常有效，但是一旦引入对角线或曲线，它们就会变得非常像素化。
@clayRay 为您的评论添加了答案
此处更新：shape-rendering ="crispEdges" 可能会对您有所帮助，但这绝对不是最终解决方案，因为在某些浏览器中它可能会导致非常糟糕的绘图。我建议您可以预定义将此选项添加到某些特定设备和浏览器，但不要使其成为正常选项。最后，我认为当您看到模糊时，主要是设备（例如：屏幕分辨率）相关问题，而不是 SVG，您可能会接受它

【解决方案3】：

我在一个页面上尝试了 SVG，它看起来并不模糊。

但是，您可以尝试将视图框编辑为整数大小——即将viewBox="0 0 361.5 192.5" 转换为viewBox="0 0 362 193"——这可能会有所不同。

【讨论】：

【解决方案4】：

这可能是由于在创建 svg 时使用了边框和阴影造成的。我自己避开那些，因为它们有时是模糊的。如果需要，可以将阴影创建为具有透明度和偏移的另一条路径。

【讨论】：