小型未缩放的 SVG 在所有浏览器中呈现模糊和错误

Question

我有一个 SVG 在所有浏览器中都表现得非常糟糕。

这里有很多关于模糊 SVG 渲染的问题，但我看到的所有问题都是特定于某些浏览器的，或者涉及缩放，或应用变换，或使用 SVG 过滤器，或用作背景图像等。

这不是放大或缩小，也没有过滤器或任何时髦的东西，只有一个<svg>元素中的单个路径。它是 24x24 像素。当我放大时，它看起来不错，在视网膜屏幕上看起来也很棒。

左边是 Sketch 中的图像（在 Illustrator 等中看起来同样好）。右侧是 OS X 上 Chrome、Safari 和 Firefox 中的图像。在这 3 个图标中，顶部是正常的，中间是transform: rotate(0.1deg)（看到有些人在这方面取得了一些成功），底部是shape-rendering: crispEdges. 他们都很粗糙：

在 Windows 机器上不同程度地看起来很糟糕，包括在 IE 中。

这是SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Desktop-Web-Feed" sketch:type="MSArtboardGroup" transform="translate(-110.000000, -504.000000)">
            <g id="Share" sketch:type="MSLayerGroup" transform="translate(26.000000, 504.000000)">
                <g id="Facebook" transform="translate(84.000000, 0.000000)" sketch:type="MSShapeGroup">
                    <g id="icon-web-feed-fb">
                        <rect id="Bounds" opacity="0.30626166" x="0" y="0" width="24" height="24"></rect>
                        <path d="M10,19 L10,12.9000244 L8,12.9000244 L8,10.9108276 L10,10.9108276 L10.0697378,8.28793345 C10.0697378,6.15850696 11.3218994,5 13.1515237,5 C14.02764,5 14.7807229,5.06596481 15,5.09688581 L15,7.32319812 L13.7299787,7.32319812 C12.7377746,7.32319812 12,7.70703125 12,8.53530148 L12,10.9108276 L14.8771973,10.9108276 L14.6080794,12.9000244 L12,12.9000244 L12,19 L9.1929245,19" id="Shape" stroke="#A1A1A1"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

以下是我尝试过的一些不起作用的事情：

• 从 Illustrator 导出 SVG，路径值四舍五入到 1 个小数位（不允许我做 0 个小数位），看看它是否与它们落在像素边界上的方式有关。
• 导出“更大”（更大的视图框和路径展开以容纳它）SVG 并在浏览器中将其缩小。这看起来稍微好一点，但仍然不够好。
• 玩stroke-width- 只是让它看起来很糟糕，但方式不同。
• 各种 CSS 转换旨在改善此类问题，+ 用于shape-rendering+ 放大图像并transform: scale再次缩小图像的每个选项。

奇怪的是，SVG 的基本布局在浏览器中完全不同——字母内部应该有 2 个像素的空间，但即使使用清晰的抗锯齿，所有浏览器中也只有 1 个像素的空间。

有什么办法可以改善这种情况吗？这与这个特定的 SVG 有关系吗？或者只是浏览器在渲染小 SVG 方面真的很糟糕？

Answer 1

当我尝试你的 SVG 时，结果并不像你的截图那么糟糕。所以我不确定为什么会这样。Sketch看起来可能会碰撞几何体以与像素边界对齐 - 与字体渲染器不同。

您可以通过考虑形状的轮廓相对于像素边界的方式来显着改善图标的外观。

如果你稍微放大你的图标，并绘制对应于 24x24 像素渲染的网格线，你会明白我的意思：

var grid = document.getElementById("grid");
for (var i=1; i<24; i++) {
  var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
  line.setAttribute("x1", 0);
  line.setAttribute("y1", i);
  line.setAttribute("x2", 24);
  line.setAttribute("y2", i);
  grid.appendChild(line);
  line = document.createElementNS("http://www.w3.org/2000/svg", "line");
  line.setAttribute("x1", i);
  line.setAttribute("y1", 0);
  line.setAttribute("x2", i);
  line.setAttribute("y2", 24);
  grid.appendChild(line);
}

<svg id="mysvg" width="240px" height="240px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Desktop-Web-Feed" sketch:type="MSArtboardGroup" transform="translate(-110.000000, -504.000000)">
            <g id="Share" sketch:type="MSLayerGroup" transform="translate(26.000000, 504.000000)">
                <g id="Facebook" transform="translate(84.000000, 0.000000)" sketch:type="MSShapeGroup">
                    <g id="icon-web-feed-fb">
                        <rect id="Bounds" opacity="0.30626166" x="0" y="0" width="24" height="24"></rect>
                        <path d="M10,19 L10,12.9000244 L8,12.9000244 L8,10.9108276 L10,10.9108276 L10.0697378,8.28793345 C10.0697378,6.15850696 11.3218994,5 13.1515237,5 C14.02764,5 14.7807229,5.06596481 15,5.09688581 L15,7.32319812 L13.7299787,7.32319812 C12.7377746,7.32319812 12,7.70703125 12,8.53530148 L12,10.9108276 L14.8771973,10.9108276 L14.6080794,12.9000244 L12,12.9000244 L12,19 L9.1929245,19" id="Shape" stroke="#A1A1A1"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
    <g id="grid" fill="none" stroke="#ccd" stroke-width="0.1">
    </g>
</svg>

您可以看到形状的线条正好落在最终像素的中间。这将导致最糟糕的抗锯齿。您应该考虑调整图标设计以移动线条，使其与像素更好地对应。在 Sketch 中打开网格线并设置它们以显示像素边界。从那里开始工作。