Drupal 8自定义主题SVG站点徽标显示异常问题求助

针对你遇到的Firefox不显示SVG徽标、Safari中徽标过大的问题，核心原因是SVG作为矢量图，不同浏览器对无明确尺寸的SVG渲染规则不一致。下面提供几种靠谱的解决方法，按从易到难排序：

方法一：用CSS直接控制尺寸（最推荐） #

不用修改模板文件，直接在主题的CSS文件中添加样式，就能统一所有浏览器的显示效果：

/* 定位site-logo容器下的img元素 */
.site-logo img {
  width: 120px; /* 替换成你需要的宽度数值 */
  height: auto; /* 自动保持宽高比例，避免变形 */
}

添加后清除浏览器缓存，Firefox会因为有明确的宽度值渲染SVG，Safari也会按设置的尺寸缩放，完美解决两个问题。

方法二：修改品牌块模板文件，给logo添加width属性 #

如果需要在HTML元素上直接添加width属性，可以通过覆盖Drupal的模板文件实现：

1. 在你的自定义主题目录下，创建templates文件夹（如果还没有的话）。
2. 复制Drupal核心的品牌块模板：core/modules/system/templates/block--system-branding-block.html.twig，粘贴到主题的templates文件夹中。
3. 打开这个模板文件，找到渲染site_logo的代码行，默认是：

   {% if site_logo %}
     <a href="{{ path('<front>') }}" rel="home" class="site-logo">
       {{ site_logo }}
     </a>
   {% endif %}
   

4. 修改{{ site_logo }}部分，用Twig的merge和setAttribute方法添加width属性：

   {% if site_logo %}
     <a href="{{ path('<front>') }}" rel="home" class="site-logo">
       {{ site_logo|merge({'attributes': site_logo.attributes.setAttribute('width', '120')}) }}
     </a>
   {% endif %}
   

5. 保存文件后，清空Drupal的缓存（进入后台→配置→性能→清空所有缓存），这样修改就会生效。

方法三：检查主题设置中的徽标配置 #

虽然SVG是矢量图，但你可以尝试在Drupal后台调整徽标设置：

• 进入外观→你的主题→设置（点击主题右侧的「设置」按钮）。
• 在「徽标」区域，确认是否上传了自定义logo.svg，并且尝试设置「徽标宽度」和「徽标高度」（注意SVG的话高度设为自动更好）。不过这个方法对SVG的兼容性不如前两种稳定，建议优先用前两种。

内容的提问来源于stack exchange，提问作者Auxiliary Joel