### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [2023年二月28日 08:28 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/1 "2023-02-28T08:28:07Z")
如果在 mobile\_logo 中使用 SVG，则其缩放不正确：
我现在可以（也将）切换到 PNG，但更希望不要这样做！
假设也可以通过 CSS 调整来修复，但我肯定不是唯一尝试这样做的人。
---
### Author:  [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [2023年二月28日 08:39 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/2 "2023-02-28T08:39:49Z")
我使用的是 SVG 徽标，没有遇到过缩放问题。也许是我没理解这个问题，是它太小了吗？
我只会注意设置中建议的 3:1 宽高比
您的 SVG 图像是否有过多的透明度填充了徽标？
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [2023年二月28日 09:19 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/3 "2023-02-28T09:19:52Z")
它要求纵横比大于 3:1。一个具有相同比例的 PNG 文件可以正常工作，因此此问题专门与 SVG 的处理有关。
作为 SVG 则不行，它是矢量图，在此上下文中没有实际的大小概念。同一个文件作为网站徽标可以正常渲染。
我截图中的图像是在生产网站上发现问题后进行的测试。我创建了一行可比较的文本，将其转换为轮廓并导出了对象。如果文件有问题，网站徽标也会显示出来。没有填充：
仔细看，您的网站处理 SVG 徽标的方式不同，可能是通过主题：
而这个网站运行的是默认设置之一，看起来是这样的：
看起来您的徽标是由 Inkscape 生成的，并且尺寸已硬编码在文件中。这并非所有 SVG 生成器的典型做法：
对比
如果它在桌面视图下工作，我们只需要对移动徽标进行类似处理。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年二月28日 11:00 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/4 "2023-02-28T11:00:03Z")
> [@Stephen](#):
>
> your site
> [@Stephen](#):
>
> Looks like your logo was produced by Inkscape and the dimensions were hard-coded within the file.
你说的是 @piffy 的论坛和 Logo 吗？我在主题中没有找到这些信息，有点令人困惑 🤔
你能提供你的“测试 SVG Logo”让我看一下吗？
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [2023年二月28日 13:06 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/5 "2023-02-28T13:06:56Z")
> [@Canapin](#):
>
> 您是在说 @piffy 的论坛和标志吗？ 我在主题中找不到此信息，这有点令人困惑 🤔
是的——他们提到了他们的网站，所以我将其作为参考进行比较。
元（meta）不允许发布 SVG。 这是来源：
```plaintext
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年二月28日 13:34 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/6 "2023-02-28T13:34:12Z")
谢谢！
我能重现这个问题。
桌面端：
移动端：
Logo 的大小由以下代码设置：
```plaintext
.d-header .title {
min-width: 36px;
}
```
如果 SVG 代码中没有硬编码大小，它似乎会被设置为 0。例如，我从 Discourse 的 Logo 中删除了 width 和 height 值，结果如下：
我不明白为什么在这种情况下它在桌面端却能正常工作。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年二月28日 14:13 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/7 "2023-02-28T14:13:14Z")
我试图找出问题所在，我认为我已经解决了。
SVG 位于一个 flexbox 子项 `` 中，该子项默认不会根据内容增长。如果没有为 SVG 文件设置尺寸，它将没有“理由”增长，因此默认宽度为 0px。
如果您允许 logo 的容器增长，就可以解决此问题：
```css
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // added
}
```
---
### Author:  [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [2023年二月28日 15:23 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/8 "2023-02-28T15:23:49Z")
感谢您详细的分析！我确实使用了 Inkscape。将我的网站置于安全模式会产生相同的 CSS，所以我认为问题不在于主题或插件：
无论如何，似乎 CSS 有点误导，SVG 尺寸才是罪魁祸首。通过删除尺寸，我也能够重现您的问题。
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2023年三月1日 22:44 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/9 "2023-03-01T22:44:37Z")
我将对此进行更多测试，但这似乎是一个不错的解决方案……感谢您找到它。我对 flex-grow 的主要担忧是它可能如何与有时在主题中添加的同级标题元素交互，但它似乎默认情况下运行良好！
此问题在桌面设备上不会发生，因为我们指定了高度
```css
.d-header #site-logo {
height: 2.667em;
}
```
在移动设备上，我们假设徽标可能大于可用空间，并限制其以适应：
```css
.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 限制。
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [2023年三月1日 22:51 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/10 "2023-03-01T22:51:56Z")
棘手之处在于，生成无量纲 SVG 的应用程序是 Illustrator。我现在只使用了 PNG，很快就会修复。我无法想象让任何人将他们的矢量图扔进文本编辑器进行修改 🤯 哈哈
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2023年三月1日 23:04 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/11 "2023-03-01T23:04:52Z")
是的，我猜这正是 SVG 的要点，即_没有_尺寸，但这引入了一个以前图像标签没有的微小复杂性！
如果取消选中 SVG 选项模态框中的响应式框（来自文件 → 导出 → 导出为）：
（我在导出模态框中遇到的另一个可以避免的问题……如果你直接在页面上将 SVG 图像作为标记嵌入，切换样式到内联也有帮助，否则不同 SVG 的样式可能会冲突，因为它们很可能使用相同的 Illustrator 类名）
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [2023年三月2日 02:16 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/13 "2023-03-02T02:16:30Z")
我可以试着告诉他们这样做是错的，但这仍然无法解释为什么桌面版可以，而移动版不行 ☹
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2023年三月8日 17:56 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/14 "2023-03-08T17:56:54Z")
我已经在此处合并了一个修复程序，这将解决此问题，并总体上使桌面/移动徽标 CSS 更加一致
>
>
> This ensures all logos have at least one dimension, which fixes an issue with di…mensionless SVGs on mobile being too small, as described here: https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474
>
> This sets a fixed logo height on mobile, which is consistent with existing desktop styles.
>
> This also eliminates some unneeded mobile styles, and moves others to common.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [2023年三月8日 18:00 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/15 "2023-03-08T18:00:22Z")
太棒了，谢谢 @awesomerobot
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2023年三月11日 08:00 UTC](https://meta.discourse.org/t/svg-mobile-logo-scales-incorrectly/256474/17 "2023-03-11T08:00:54Z")
此主题在 2 天后自动关闭。不再允许回复。