如果在 mobile_logo 中使用 SVG，则其缩放不正确：
我现在可以（也将）切换到 PNG，但更希望不要这样做！
假设也可以通过 CSS 调整来修复，但我肯定不是唯一尝试这样做的人。
2 个赞
它要求纵横比大于 3:1。一个具有相同比例的 PNG 文件可以正常工作，因此此问题专门与 SVG 的处理有关。
作为 SVG 则不行，它是矢量图，在此上下文中没有实际的大小概念。同一个文件作为网站徽标可以正常渲染。
我截图中的图像是在生产网站上发现问题后进行的测试。我创建了一行可比较的文本，将其转换为轮廓并导出了对象。如果文件有问题，网站徽标也会显示出来。没有填充：
仔细看，您的网站处理 SVG 徽标的方式不同，可能是通过主题：
而这个网站运行的是默认设置之一，看起来是这样的：
看起来您的徽标是由 Inkscape 生成的，并且尺寸已硬编码在文件中。这并非所有 SVG 生成器的典型做法：
对比
如果它在桌面视图下工作，我们只需要对移动徽标进行类似处理。
3 个赞
你说的是 @piffy 的论坛和 Logo 吗？我在主题中没有找到这些信息，有点令人困惑 
你能提供你的“测试 SVG Logo”让我看一下吗？
1 个赞
是的——他们提到了他们的网站，所以我将其作为参考进行比较。
元（meta）不允许发布 SVG。 这是来源：
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.88 11.02">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="m1.93,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z" />
<path class="cls-1" d="m5.15,5.8c.02,1.43.94,2.01,1.99,2.01.76,0,1.21-.13,1.61-.3l.18.76c-.37.17-1.01.36-1.93.36-1.79,0-2.85-1.18-2.85-2.93s1.03-3.13,2.72-3.13c1.9,0,2.4,1.67,2.4,2.73,0,.22-.02.38-.04.49h-4.08Zm3.09-.76c.01-.67-.28-1.71-1.46-1.71-1.07,0-1.54.98-1.62,1.71h3.08Z" />
<path class="cls-1" d="m10.43,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z" />
<path class="cls-1" d="m16.6,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z" />
<path class="cls-1" d="m21.7,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z" />
<path class="cls-1" d="m27,2.71l1.14,3.26c.19.53.35,1.01.47,1.49h.04c.13-.48.3-.96.49-1.49l1.13-3.26h1.1l-2.28,5.8h-1.01l-2.21-5.8h1.13Z" />
<path class="cls-1" d="m37.24,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z" />
<path class="cls-1" d="m41.5,0h1.06v8.52h-1.06V0Z" />
<path class="cls-1" d="m49.58,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z" />
<path class="cls-1" d="m55.92,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z" />
<path class="cls-1" d="m62.88,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z" />
</svg>
2 个赞
谢谢！
我能重现这个问题。
桌面端：
移动端：
Logo 的大小由以下代码设置：
.d-header .title {
min-width: 36px;
}
如果 SVG 代码中没有硬编码大小，它似乎会被设置为 0。例如，我从 Discourse 的 Logo 中删除了 width 和 height 值，结果如下：
我不明白为什么在这种情况下它在桌面端却能正常工作。
2 个赞
我试图找出问题所在，我认为我已经解决了。
SVG 位于一个 flexbox 子项 <a> 中，该子项默认不会根据内容增长。如果没有为 SVG 文件设置尺寸，它将没有“理由”增长，因此默认宽度为 0px。
如果您允许 logo 的容器增长，就可以解决此问题：
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // added
}
4 个赞
感谢您详细的分析！我确实使用了 Inkscape。将我的网站置于安全模式会产生相同的 CSS，所以我认为问题不在于主题或插件：
无论如何，似乎 CSS 有点误导，SVG 尺寸才是罪魁祸首。通过删除尺寸，我也能够重现您的问题。
我将对此进行更多测试，但这似乎是一个不错的解决方案……感谢您找到它。我对 flex-grow 的主要担忧是它可能如何与有时在主题中添加的同级标题元素交互，但它似乎默认情况下运行良好！
此问题在桌面设备上不会发生，因为我们指定了高度
.d-header #site-logo {
height: 2.667em;
}
在移动设备上，我们假设徽标可能大于可用空间，并限制其以适应：
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
因此，桌面上的无单位 SVG 在 CSS 中获得了一个尺寸，而在移动设备上，我们让徽标决定其大小（受 max-height 或 max-width 的限制，以先到者为准）。因此，在没有尺寸且没有指令使其变大的情况下，它会保持很小（如 .title 上的 min-width 所规定，没有它它是不可见的！）。
另一种可能的修复方法是将移动徽标的 max-height 更新为 height。这将与桌面徽标的处理方式一致。
我可能会在明天修复此问题，但在此期间，为 SVG 添加尺寸是一个简单的修复方法，它甚至不必是准确的尺寸……如果您添加 width="1000" 而不添加其他任何内容，它将增长以适应空间，并且其最大尺寸将由 CSS 限制。
2 个赞
棘手之处在于，生成无量纲 SVG 的应用程序是 Illustrator。我现在只使用了 PNG，很快就会修复。我无法想象让任何人将他们的矢量图扔进文本编辑器进行修改 
哈哈
3 个赞
是的，我猜这正是 SVG 的要点，即没有尺寸，但这引入了一个以前图像标签没有的微小复杂性！
如果取消选中 SVG 选项模态框中的响应式框（来自文件 → 导出 → 导出为）：
（我在导出模态框中遇到的另一个可以避免的问题……如果你直接在页面上将 SVG 图像作为标记嵌入，切换样式到内联也有帮助，否则不同 SVG 的样式可能会冲突，因为它们很可能使用相同的 Illustrator 类名）
3 个赞
我可以试着告诉他们这样做是错的，但这仍然无法解释为什么桌面版可以，而移动版不行 
2 个赞
我已经在此处合并了一个修复程序，这将解决此问题，并总体上使桌面/移动徽标 CSS 更加一致
3 个赞
太棒了，谢谢 @awesomerobot
4 个赞
此主题在 2 天后自动关闭。不再允许回复。