在Safari和移动版Safari中，SVG文件模糊不清

Question

在Safari和移动版Safari中，SVG文件模糊不清

cssimagesvgsafariblurry

7

我希望我的logo能以SVG格式展现，这样就不用担心分辨率和模糊的问题了。

我将网站上传到服务器上，在iPhone上打开，结果看到了这个：https://istack.dev59.com/pAJST.webp 我尝试通过修改CSS来解决问题（我刚接触Web）。

发生了什么事情？在Chrome浏览器上看起来很好，但是我也在桌面版Safari上检查了一下，它在那里也显得模糊。

以下是我的两个文件：

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="custom.css"/>
    <script defer src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js"></script>
</head>
<body>

    <div class="ui borderless main menu fixed">
        <div class="ui text container" style="max-width: 100% !important">
            <div class="header item">
                <img id="headerLogo" class="logo" src="images/FullLogo_test.svg">
            </div>

            <a href="tel:555-555-5555" class="ui right floated item" tabindex="0">
                <button class="ui inverted black button">Call (555) 555-5555</button>
            </a>
        </div>
    </div>
</body>
</html>

custom.css:

#headerLogo {
    width: 200px;
}

@media only screen
and (min-device-width : 380px)
and (max-device-width : 480px) {

    #headerLogo {
        width: 150px;
    }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 380px) {

    #headerLogo {
        width: 120px;
    }
}

- Jack Douglain

你能链接SVG文件吗？或者至少提供开头的<svg>标签及其属性？请确保它的width和height属性（即在文件中）要么缺失，要么设置为"100%"。 - Paul LeBeau

@PaulLeBeau https://pastebin.com/MSiD945Y 我还尝试了移除viewBox并将其设置为"0 0 0 0"。 - Jack Douglain

1

SVG看起来还不错。Safari似乎对模糊的SVG有很多问题。这是一个常见的问题。但通常是由于使用CSS缩放引起的。它最初是否有width和height属性？如果没有，你可以尝试一个实验吗？试着在顶级的<svg>元素中添加width="503" height="118"，看看是否有所改变。 - Paul LeBeau

是的，那就是原本宽度和高度的位置，只不过它们是width="503px" height="118px"，我试着去掉了"px"这个单位，但没有成功。最后我只是添加了一个宽度为1000像素的大型png格式的标志，每个移动设备和桌面浏览器都能够很好地缩放它。不过，如果能解决Safari的这个问题，对于用户来说还是挺好的！ - Jack Douglain

看起来是一个类似的问题，https://dev59.com/81cP5IYBdhLWcg3w-Opz#63189810 下面你可以看到解决方案。 - Aleksandr Zidyganov

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sudheer Salavadi · Answer 1

如果您的SVG元素中有任何一个具有投影效果，Safari可能会使它们变得模糊。没有投影效果的SVG应该显示正常。为了确保最佳渲染效果，请考虑移除投影效果，并在需要阴影的情况下创建一个带有模糊效果的单独图层。

- Brett Donald · Answer 2

无法重现这个问题。但由于已经过去五年了，可以假设你遇到的渲染错误现在已经修复了。

.headerLogo {
    width: 200px;
}

<svg class="headerLogo" viewBox="0 0 503 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>FullLogo</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <filter x="-1.4%" y="-3.9%" width="102.8%" height="110.9%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="FullLogo" filter="url(#filter-1)" transform="translate(2.000000, 2.000000)">
            <g id="Group">
                <text id="CONTRACTING" font-family="Avenir-Light, Avenir" font-size="55.987199" font-weight="300" letter-spacing="9.55000019" fill="#000000">
                    <tspan x="0" y="108.831806">CONTRACTIN</tspan>
                    <tspan x="458.521" y="108.831806">G</tspan>
                </text>
                <g id="V4" transform="translate(2.000000, 0.000000)">
                    <g id="T" transform="translate(441.552376, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="S" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="16" y="38">S</tspan>
                        </text>
                    </g>
                    <g id="E" transform="translate(379.219961, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="14.9299197" y="38.119744">E</tspan>
                        </text>
                    </g>
                    <g id="B" transform="translate(314.274810, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="N" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="11" y="38">N</tspan>
                        </text>
                    </g>
                    <g id="A" transform="translate(251.942395, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="O" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="11" y="38">O</tspan>
                        </text>
                    </g>
                    <g id="H" transform="translate(186.997245, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="B" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="15" y="38">B</tspan>
                        </text>
                    </g>
                    <g id="P" transform="translate(124.664830, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="G" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="12" y="38">G</tspan>
                        </text>
                    </g>
                    <g id="L" transform="translate(62.332415, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="O" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="11" y="38">O</tspan>
                        </text>
                    </g>
                    <g id="A">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="D" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="12" y="38">D</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>