html - 模糊的 SVG 图像

标签 html css svg responsive-design

我真的很难弄清楚为什么我的 SVG 图像很模糊?我尝试根据屏幕尺寸(小、中、大)使用不同尺寸的图像。由于我无法正常工作,我读到 SVG 是您最好的选择,因为它可以自行最大化、最小化。但是,我的客户仍然觉得图像模糊。它们在桌面和移动设备上都很模糊。我似乎无法弄清楚为什么。有没有可能因为它们在<div>里面秒?我正在为我的整个元素使用 Bootstrap 。我正在通过 <img src> 导入它们我查看了 SVG 图像并确保它们四舍五入到最接近的整数。例如, Logo svg 都是整数,而且它们的大小都相同。如果有人能让我知道,我将不胜感激。

标志图片尺寸

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="212px" height="69px" viewBox="0 0 212 69" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="212" height="69" style="fill:none;stroke:none;"/><image x="0" y="0" width="212" height="69" xlink:href="data:image/png;base64,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" preserveAspectRatio="xMidYMid meet"/></svg>

HTML

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <!--<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">-->
    <a class="navbar-brand" href="index.html"><img src="img/logo.svg" class="img-fluid" style="width: 100%; height: auto;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-collapse collapse justify-content-stretch" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#index.html"><b>Wanzeru</b></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#content2"><b>Feature</b></a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#content3"><b>Integrating</b></a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#content4"><b>Pricing</b></a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#content6"><b>About</b></a>
            </li>
        </ul>
    </div>
    </div>
</nav>

CSS

.navbar-brand{

    margin-bottom: -10px;
    margin-top:15px;
    margin-right: 6rem;
}
.navbar-nav > li{
    margin-bottom: -16px;
    margin-top: 17px;
    margin-right: .7rem;
    font-size: 15px;


}

enter image description here

最佳答案

您必须使用矢量,而不是像素/光栅/位图图像。您的 Logo 图像是 SVG,但它包含嵌入的(base64 编码)像素图像:

<image x="0" y="0" width="212" height="69" xlink:href="data:image/png;base64,xyz">

这就是缩放时它变得模糊的原因。确保将图像导出为真正的矢量图形。

Google 以获取矢量和像素之间的差异以获得详尽的解释。向量通过坐标系中的几何图案描述图像 - 因此缩放图像不会对质量产生任何影响。

关于html - 模糊的 SVG 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53037270/

相关文章:

javascript - 带有 rgba 渐变填充的 RaphaelJS

html - 如何减少 HTML 文本的宽度?

html - CSS 使图像和标题对齐

html - 如何在 html 中固定列表或 anchor 元素?

javascript - 防止在不使用指针事件的情况下在元素内触发 Mouseenter 和 Mouseleave

javascript - D3 图表范围安全区

javascript - 如何使用vuejs制作闹钟声音

javascript - 单击另一组复选框中的选项时,必须将一组复选框中的选项保留为默认值

javascript - 创建标签框

javascript - 如何设置 SVG USE 元素的样式/操作内容