header.php中SVG图标无法调整尺寸的技术求助

我接手了一个网站，正在尝试更换Logo。已将新的.svg文件替换旧文件，但新图标完全无法调整尺寸。相关代码如下：

<body <?php body_class(); ?>>
    <svg viewBox="0 0 100 100" width="100%" height="auto" style="display: none">
    <symbol id="vestoj-logo">
        <title><?php bloginfo( 'name' ); ?></title>
        <path d="M0,.19H3.29l1.21,4.08c.1,.34,.17,.85,.2,1.16h.08c.01-.35,.08-.79,.18-1.16L6.14,.19h3.29l-3.35,8.67H3.37L0,.19Z"/>
    <path d="M9.58,8.87V.19h5.85V2.57h-2.7v.81h2.46v2.28h-2.46v.83h2.78v2.38h-5.93Z"/>
    <path d="M21.6,2.96c-.38-.26-1.07-.65-1.77-.65-.17,0-.43,.03-.6,.16-.12,.09-.16,.18-.16,.31,0,.18,.03,.35,.51,.45l1,.22c.77,.17,1.22,.48,1.48,.74,.55,.53,.66,1.2,.66,1.72,0,.74-.2,1.43-.78,2.04-.49,.51-1.43,1.1-3.05,1.1-1.33,0-2.21-.38-2.95-.68l-.29-.12,.95-2.44,.34,.26c.33,.25,.99,.64,1.75,.64,.43,0,.61-.1,.68-.16,.14-.12,.17-.26,.17-.39,0-.08-.01-.21-.1-.3-.1-.1-.27-.14-.6-.21l-.77-.14c-.49-.09-1.03-.25-1.51-.74-.44-.46-.62-.98-.62-1.6,0-.81,.27-1.5,.84-2.07,.66-.68,1.64-1.12,3.02-1.12,.69,0,1.59,.12,2.64,.75l-.84,2.21Z"/>
    <path d="M24.36,8.87V2.94l-1.77,.08V.19h6.63V3.02l-1.77-.08v5.93h-3.09Z"/>
    <path d="M37.56,7.67c-.74,.75-1.95,1.39-3.6,1.39s-2.86-.64-3.6-1.39c-.68-.69-1.21-1.75-1.21-3.15s.53-2.44,1.21-3.13c.74-.75,1.95-1.39,3.6-1.39s2.86,.64,3.6,1.39c.68,.69,1.21,1.75,1.21,3.13s-.53,2.46-1.21,3.15Zm-4.73-4.43c-.31,.33-.49,.83-.49,1.3,0,.49,.18,.98,.49,1.29,.26,.26,.65,.44,1.13,.44s.87-.18,1.13-.44c.29-.29,.49-.74,.49-1.29s-.18-1-.49-1.3c-.23-.23-.61-.44-1.13-.44-.56,0-.92,.22-1.13,.44Z"/>
    <path d="M40.3,.19h3.09V6.24c0,.95-.44,1.59-.78,1.94-.57,.6-1.37,.88-2.17,.88-.6,0-1.43-.13-2.24-.7l-.35-.25,1.14-2.68,.06,.22c.05,.18,.17,.43,.29,.53,.09,.09,.22,.16,.4,.16,.16,0,.27-.05,.36-.16,.17-.19,.18-.51,.18-.64V.19Z"/>
</symbol>
</svg>

我尝试修改viewBox和width属性值，但毫无效果。

解决方案 #

• 你当前的SVG是图形定义容器，设置了display: none，它仅用来存储symbol图形，不会直接渲染到页面上。调整这个隐藏SVG的width、viewBox属性，对实际显示的Logo完全没有影响。
• 真正显示Logo的是页面中引用这个symbol的<use>标签，通常代码类似这样：

  <svg class="site-logo">
    <use href="#vestoj-logo"></use>
  </svg>
  

• 调整尺寸的正确方法：
  1. 直接给承载<use>的<svg>标签设置尺寸属性：

     <svg width="70" height="70">
       <use href="#vestoj-logo"></use>
     </svg>
     

  2. 或者通过CSS控制这个SVG的样式（更灵活，适合响应式场景）：

     .site-logo {
       width: 90px;
       height: auto;
       /* 或者根据需求设置max-width、min-width等 */
     }
     

• 额外优化：给<symbol>添加自己的viewBox属性，确保缩放时图形比例准确。从你的path坐标来看，图形的范围大概是0 0 43.4 8.87，修改后的symbol代码：

  <symbol id="vestoj-logo" viewBox="0 0 43.4 8.87">
    <!-- 原有的title和path代码保持不变 -->
  </symbol>
  

内容的提问来源于stack exchange，提问作者David Myron