Что делает изображение svg таким маленьким по сравнению с элементом?

Question

У меня есть следующий svg:

<svg ifill="#FFF" d="Layer_5" data-name="Layer 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 993.12 999.28"><title>00</title><path fill="#FFF" d="M539.79,48.21a4,4,0,0,1-4-3.75C535.41,38.37,531.9,8,501,8c-25.8,0-32.27,17.46-32.34,17.64a4,4,0,0,1-5.48,2.28c-9-4.27-16.48-5-22.27-2.1C432,30.26,429.48,42,429.46,42.13a4,4,0,0,1-3.92,3.2H393.13a4,4,0,0,1,0-8h29.38c1.62-4.89,5.74-14.1,14.8-18.64,7.24-3.62,15.88-3.48,25.72.43C466.87,12.56,477.33,0,501,0c29.48,0,41.46,23.68,42.76,44a4,4,0,0,1-3.74,4.25Z"/><path fill="#FFF" d="M564.31,64.62H452.46a4,4,0,1,1,0-8H562.88c1-1.18,3.15-4.53,3-12.32-.1-4.32-2.76-8.4-7.29-11.2a21.74,21.74,0,0,0-20.48-1.18,4,4,0,1,1-3.42-7.23,29.79,29.79,0,0,1,28.1,1.6c6.88,4.25,10.92,10.75,11.09,17.82.35,15.51-6.9,19.65-7.73,20.07A3.93,3.93,0,0,1,564.31,64.62Z"/></svg>

Однако, когда я добавляю его на свою страницу - фактическое изображение покрывает только небольшую часть элемента, в котором оно находится.

Почему не он охватывает весь элемент?

Вот справочник jsfiddle: https://jsfiddle.net/7uzjqbnp/1/

Answer 1

Путь слишком мал по сравнению с viewbox

Я исправил его для вас, используя Figma

<svg width="993" height="347" viewBox="0 0 993 347" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M809.621 258.785C804.145 258.796 798.872 256.719 794.877 252.978C790.883 249.237 788.468 244.115 788.126 238.656C786.084 205.965 767.222 42.943 601.17 42.943C462.526 42.943 427.757 136.666 427.381 137.632C426.377 140.462 424.79 143.05 422.722 145.23C420.654 147.409 418.152 149.131 415.377 150.284C412.602 151.437 409.616 151.997 406.611 151.925C403.606 151.854 400.649 151.154 397.932 149.871C349.568 126.95 309.371 123.032 278.257 138.599C230.376 162.432 216.834 225.451 216.726 226.149C215.735 230.998 213.097 235.357 209.259 238.487C205.42 241.618 200.616 243.327 195.661 243.326H21.4953C15.7944 243.326 10.327 241.064 6.29582 237.037C2.26466 233.01 0 227.549 0 221.854C0 216.16 2.26466 210.698 6.29582 206.672C10.327 202.645 15.7944 200.383 21.4953 200.383H179.378C188.084 174.134 210.224 124.696 258.911 100.326C297.818 80.8939 344.248 81.6454 397.126 102.634C417.761 67.4205 473.972 0 601.17 0C759.591 0 823.969 127.111 830.955 236.187C831.138 239.003 830.762 241.828 829.85 244.5C828.938 247.171 827.508 249.637 825.642 251.756C823.775 253.875 821.508 255.605 818.971 256.848C816.435 258.091 813.677 258.822 810.857 259L809.621 258.785Z" fill="white"/><path d="M941.51 346.999H340.494C334.793 346.999 329.326 344.739 325.295 340.717C321.264 336.695 319 331.239 319 325.55C319 319.862 321.264 314.406 325.295 310.384C329.326 306.361 334.793 304.101 340.494 304.101H933.826C939.2 297.774 950.753 279.811 949.947 238.039C949.409 214.874 935.116 192.996 910.775 177.982C894.37 167.97 875.743 162.155 856.546 161.051C837.348 159.947 818.175 163.589 800.727 171.654C798.167 172.932 795.377 173.687 792.521 173.874C789.665 174.061 786.8 173.677 784.095 172.744C781.39 171.812 778.898 170.349 776.767 168.443C774.636 166.536 772.907 164.224 771.683 161.643C770.459 159.061 769.765 156.261 769.64 153.407C769.515 150.554 769.962 147.704 770.956 145.025C771.949 142.347 773.469 139.893 775.425 137.808C777.382 135.724 779.736 134.05 782.35 132.886C806.277 121.786 832.582 116.762 858.926 118.258C885.269 119.755 910.833 127.727 933.343 141.465C970.312 164.255 992.021 199.109 992.934 237.02C994.815 320.188 955.858 342.388 951.398 344.64C948.344 346.218 944.949 347.028 941.51 346.999Z" fill="white"/></svg>