主页 / 问题 / 1115500
Accepted
DarkRou
Asked:2020-04-25 19:24:09 +0000 UTC2020-04-25 19:24:09 +0000 UTC

如何去除相邻 SVG 片段连接处的像素化？

  • 772

我在背景上放了一张 svg 图像。一切都会好起来的，如果不是这些关节，我尝试编辑最多 0.00001 像素。但这并没有帮助。

是否有任何神经网络或其他设备可以消除此错误？

Ps 同时，如果你把这张图片保存为Png，就没有关节了

联合的

html

2 个回答

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

    您可以使用 SVG 属性shape-rendering="crispEdges"来禁用浏览器抗锯齿功能。https://developer.mozilla.org/en/docs/Web/SVG/Attribute/shape-rendering

    脆边

    表示浏览器应尽量强调绘图中干净边缘的对比度，但会牺牲渲染速度和几何保真度。为了获得最佳边缘定义结果，浏览器可能会禁用所有直线和曲线的抗锯齿，或者可能只禁用接近垂直或水平的直线。此外，浏览器还可以调整线条位置和线条宽度，使边缘与设备像素对齐。

    <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倍

    在此处输入图像描述

    与第一个示例一样，没有观察到灰色像素

    像素化问题没有通用的、100% 的解决方案。

    由于 2D 渲染取决于安装的操作系统、其设置、显卡和使用的浏览器。

    您可以使用综合方法：

    1. 使用 SVG 图像的整数坐标
      如果您使用小数值拍摄完成的图像，那么您可以使用SVG 优化器对其进行处理

    2. 设置整数值viewBox

    3. 使用属性 shape-rendering ="crispEdges"

    4. 如果可以更改设计，请避免使用对比鲜明的边框颜色。
      例如：代替黑白组合，使用深灰色，或使用灰色阴影代替纯白色背景。

    • 6
  2. Best Answer

    大家好，遇到同样问题的人。找到了解决方案。

    所以跟着我重复。

    1. 打开插画家
    2. 选择问题元素
    3. 在顶部菜单中，对象->路径->创建偏移路径
    4. 为方便起见，屏蔽所有不必要的层，只留下有问题的层
    5. 选择他们
    6. 选择形状生成器工具 (Shift+M)
    7. 并点击平行轮廓中已经超出允许对象限制的部分
    8. 现在选择选择工具（V）
    9. 选择形状生成器最近选择的元素
    10. 使用“delete”或“Backspace”删除此元素
    11. 另外，为了不下载包含不必要元素的文件，请选择最开始的内容，然后删除
    12. 利润！

    更新。我忘了说您为“平行轮廓”选择的元素必须放在另一个有问题的元素下，这样“平行轮廓”就不会出现在对象上

    Upd 2. 如果您的文件不包含大量对象，并且您只需要对齐关节，请使用Alexandr_TT 选项。但是因为他的版本不适合我，我用我自己的

    • 3

相关问题