Drupal SVG 站点徽标显示不正确

【问题标题】：Drupal SVG site logo is displaying incorrectlyDrupal SVG 站点徽标显示不正确
【发布时间】：2018-04-13 12:12:55
【问题描述】：

在我正在构建的自定义 Drupal 主题中保存现有 logo.svg 的顶部。徽标不显示在页面 (Firefox) 上，并且在 Safari 上显示非常大。

当“检查元素”时，我可以看到如果我添加width=""（并应用任何数字） - 那么徽标将出现在 Firefox 中，并在 Safari 中调整大小。但我不知道如何将width 应用于 Drupal 主题文件中的site_logo。我将在哪里执行此操作，或者我将如何解决此问题。

该站点在 Drupal 8 中。我尝试将品牌块移动到不同的部分（导航、侧边栏、内容等），但它不能纠正不正确的宽度问题。

【问题讨论】：

标签： svg drupal

【解决方案1】：

考虑到 SVG 图像在其标记中并不总是具有 height 和 width 尺寸，并且添加未设置尺寸的 SVG 文件可能会影响主题的样式。

因此，请在文本编辑器中打开您的 SVG 文件，并确保根据您的需要设置 width、height 和/或 viewBox。或者尝试使用 Adobe Illustrator、Sketch 或 Inkscape 等矢量图像编辑工具对其进行编辑。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100" height="50"
  viewBox="0 0 200 100">

  <rect x="20" y="20" width="160" height="60"
    fill="limegreen" stroke="black" stroke-width="2px" />
</svg>

【讨论】：

在 illustrator 中，您必须取消选中 SVG 导出设置中的“响应式”框。之后适用于 FF 60。