在这种情况下如何使用响应式 svg？

Question

.contained {
  width: 80%;
  max-width: 2500px;
  margin: 0 auto;
}

@media all and (max-width: 780px) {
  .icon-text-size {
    display: inline
  }
}

.svg-align {
  vertical-align: middle;
}

.icon-fix {
  display: none;
}

<div class="contained">
  <h2 class="title"><span>Contact</span> Us</h2>
  <h1 class="icon-text-size">
    <svg class="svg-align" width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M91.4849 96.6599L101.565 86.5799C102.923 85.2391 104.64 84.3213 106.509 83.9379C108.379 83.5544 110.319 83.7219 112.095 84.4199L124.38 89.3249C126.174 90.0534 127.713 91.2968 128.802 92.8984C129.892 94.5 130.482 96.3882 130.5 98.3249V120.825C130.489 122.142 130.212 123.444 129.686 124.652C129.159 125.86 128.393 126.948 127.435 127.852C126.476 128.756 125.344 129.456 124.108 129.912C122.871 130.367 121.556 130.567 120.24 130.5C34.1549 125.145 16.7849 52.2449 13.4999 24.3449C13.3474 22.9749 13.4867 21.588 13.9087 20.2756C14.3307 18.9633 15.0257 17.7551 15.9482 16.7307C16.8706 15.7062 17.9995 14.8887 19.2606 14.3318C20.5217 13.775 21.8864 13.4915 23.2649 13.4999H44.9999C46.9394 13.5057 48.8329 14.0915 50.4367 15.1822C52.0406 16.2728 53.2815 17.8183 53.9999 19.6199L58.9049 31.9049C59.626 33.6737 59.81 35.6158 59.4338 37.4886C59.0577 39.3614 58.1381 41.0818 56.7899 42.4349L46.7099 52.5149C46.7099 52.5149 52.5149 91.7999 91.4849 96.6599Z" fill="#F62AA0"/>
                </svg>
    <br class="icon-fix"> 01328 633037</h1>
  <h1 class="icon-text-size">
    <svg class="svg-align" width="144" height="125" viewBox="0 0 144 125" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M129.32 20.8333C128.775 20.7846 128.225 20.7846 127.68 20.8333H15.6801C14.9622 20.8429 14.2492 20.9364 13.5601 21.1111L71.3601 71.0764L129.32 20.8333Z" fill="#F62AA0"/>
                      <path d="M135.24 22.4606L77.0002 72.8078C75.5013 74.1012 73.4737 74.8272 71.3602 74.8272C69.2467 74.8272 67.2191 74.1012 65.7202 72.8078L8.00022 22.8425C7.82277 23.4086 7.72869 23.992 7.72021 24.5786V94.0231C7.72021 95.8649 8.56307 97.6312 10.0634 98.9335C11.5637 100.236 13.5985 100.968 15.7202 100.968H127.72C129.842 100.968 131.877 100.236 133.377 98.9335C134.877 97.6312 135.72 95.8649 135.72 94.0231V24.5786C135.688 23.8552 135.526 23.1406 135.24 22.4606ZM21.2002 94.0231H15.6402V89.0578L44.7202 64.0231L50.3602 68.9189L21.2002 94.0231ZM127.64 94.0231H122.04L92.8802 68.9189L98.5202 64.0231L127.6 89.0578L127.64 94.0231Z" fill="#F62AA0"/>
                      </svg>
    <br class="icon-fix"> info@verusamor.salon
  </h1>
</div>

我希望 svg 和文本在较大的屏幕上位于同一行，并且 svg 随着屏幕变小而变小，以便将其保持在一行上，当 svg 变得太小时我想要订单更改自

svg 文字换行 svg 文本

并将其更改为

svg 换行文本换行 svg 新行文本。

感谢您的帮助。

Answer 1

以百分比设置 svg 宽度和高度，并使用 max-width 属性

<svg width="15%" max-width="70%" height=""></svg>
<svg width="25%" max-width="75%" height=""></svg>

在这种情况下如何使用响应式 svg？

How do I use responsive svgs in this context?

html

css

svg

responsive