如何在flex容器内对齐SVG与文本且不改变SVG尺寸

我有一个svg元素，需要与同一容器内的文本保持相同起始位置对齐。我目前通过height、width属性设置SVG的尺寸，但修改height属性时虽然可以实现上移效果，但SVG的大小也会随之改变。当前SVG和文本都处于align-items属性设为start的flex容器中。
我希望将SVG向上移动，与右侧文本水平对齐，同时不改变SVG元素的尺寸。请问除了调整height、width属性外，有没有其他实现方法？

相关代码 #

CSS代码 #

.machine-details-details.v2 {
    align-items: start;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    margin: 10px 10px 0;
}

svg {
    background-image: none;
    background-position: 0% 0%;
    display: inline;
    fill: rgb(51, 51, 51);
    height: 50px;
    width: 50px;
}

HTML代码 #

<div class="machine-details-details v2">
 <div class="machine-icon">
  <svg version="1" id="main_shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="loader" style="background-image: none; background-position: 0% 0%; display: inline; fill: rgb(51, 51, 51); height: 50px; width: 50px;">
   <path class="outline" d="M27.25 27.312c-.648 0-1.324-.323-1.682-.938h-.193a1 1 0 0 1-.989-.856 4.751 4.751 0 0 1-3.698 1.794 4.76 4.76 0 0 1-4.632-3.694 1 1 0 0 1-.993.882h-2.239a4.739 4.739 0 0 1-4.323 2.812 4.741 4.741 0 0 1-4.412-3.025L.553 22.52A1.001 1.001 0 0 1 0 21.625v-8.438c0-.379.214-.725.553-.895l3.75-1.875c.139-.069.292-.105.447-.105h.875v-.639L4.793 8.01a1 1 0 0 1 .895-1.447c.969 0 2.334.538 2.75 1.956V5.688a1 1 0 0 1 1-1H16a1 1 0 0 1 1 1v.838l.918 4.59c.013.065.02.13.02.196v.125a2.06 2.06 0 0 1 .875-.188h5.625a1.94 1.94 0 0 1 1.938 1.938c0 .665-.336 1.27-.88 1.624l-.347.52a2.378 2.378 0 0 1-.004 2.284l.052.197h.118c.016-.242.118-.472.291-.645l2.812-2.812a1 1 0 0 1 1.677.95l-.872 3.49 1.73 6.056.754.754A1 1 0 0 1 31 27.312h-3.75z" style="fill: rgb(255, 255, 255);"></path>
   <path class="quinary" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="fill: rgb(255, 255, 255);"></path>
   <path class="shadow" d="M24.438 12.25h-3.75v.938h3.75L22.562 16h.938l1.875-2.812z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <circle class="tertiary" cx="23.031" cy="16.469" r="1.406" style="fill: rgb(51, 51, 51);"></circle>
   <path class="window" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="opacity: 0.3; fill: rgb(93, 201, 232);"></path>
   <path class="tertiary" d="M5.688 7.562s1.875 0 1.875 1.875v2.812h-.938V9.438l-.937-1.876z" style="fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M1 13.188l3.75-1.876h4.688V16h5.624v7.5H4.75L1 21.625z" style="fill: rgb(255, 204, 34);"></path>
   <path class="secondary" d="M5.688 11.312h4.688v1.875H5.688z" style="fill: rgb(0, 0, 0);"></path>
   <path class="shadow" d="M1 15.062h1.875v4.688H1z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="quinary" d="M11.312 15.062H5.688V16h1.874l.938.938h2.812z" style="fill: rgb(255, 255, 255);"></path>
   <path class="tertiary" d="M21.625 12.25h-2.812c-.562 0-.938.375-.938.938v.938h3.75V12.25zM23.5 18.812h2.812v.938H23.5z" style="fill: rgb(51, 51, 51);"></path>
   <path class="secondary" d="M25.375 24.438h-6.562v-11.25l3.375 2.25c1.125.75 1.594 1.125 1.781 1.688.188.562 1.406 5.438 1.406 5.438v1.874z" style="fill: rgb(0, 0, 0);"></path>
   <path class="primary" d="M23.5 22.562H16v-5.624l.938-1.876v-1.874h1.874zM9.438 5.688H16v.938H9.438z" style="fill: rgb(255, 204, 34);"></path>
   <circle class="tertiary" cx="20.688" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="20.688" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <circle class="tertiary" cx="24.438" cy="13.188" r=".938" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="tertiary" cx="8.5" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="8.5" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <path class="tertiary" d="M15.062 14.125v-7.5H9.438V16h4.688v3.75h2.812v-5.625h-1.876zm-.937 0l-3.75-1.875V7.562h3.75v6.563z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M16 18.812h.938v3.75H16z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M30.062 25.375l-1.875-6.562.938-3.75-2.812 2.812v2.812l-.938 1.875v2.812h.938c0 .938.938.938.938.938H31l-.938-.937z" style="fill: rgb(255, 204, 34);"></path>
   <path class="shadow" d="M26.312 25.375h-.937v-2.813l.937-1.874z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="tertiary" d="M1 19.75h5.625v.938H1z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M4.75 11.312h.938v8.438H4.75z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M13.188 16h4.688v.938h-4.688z" style="fill: rgb(255, 204, 34);"></path>
  </svg>
</div>
 <div class="details">
  <span class="name">Test</span>
  <span class="pin">Test</span>
  <span class="organization">Test</span>
 </div>
 <div class="infographic-header2">
  <div class="close-button" style="background-color: rgb(171, 171, 171);">
   <div class="icon-remove-white"></div>
  </div>
 </div>
</div>

现有效果截图 #

以下方法均不会改变SVG本身的尺寸，可按需选择：

• 使用transform: translateY()偏移，这是最推荐的方案，不会影响原有布局流。
  示例代码：

  svg {
    /* 保留原有样式 */
    transform: translateY(-4px); /* 数值为负代表上移，可根据实际对齐效果调整 */
  }
  

• 使用负上外边距调整位置：
  示例代码：

  .machine-icon {
    margin-top: -4px; /* 数值按需调整即可 */
  }
  

• 调整SVG的垂直对齐属性：
  把SVG的display属性改为inline-block，配合vertical-align调整对齐基准：

  svg {
    /* 原有样式中替换display: inline为以下内容 */
    display: inline-block;
    vertical-align: text-top; /* 也可尝试top、middle等值，找到最合适的对齐效果 */
  }
  

• 调整SVG的viewBox属性：
  如果是SVG内部存在顶部留白，可直接修改viewBox的Y轴偏移值，把内部图案整体上移：
  原viewBox为0 0 32 32，可改为viewBox="0 -2 32 32"，Y轴偏移的数值按需调整即可。

内容的提问来源于stack exchange，提问作者Hussam Ahmed