Как получить такую svg (из png) в фигме?

Question

[intriga93]

и получается бэграунд будет задаваться один раз
свг будет просто обрезать
типа маска



примерно то что выходе

<svg width="1919" height="341" viewBox="0 0 1919 341" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1919 0.280029C1913.39 1.81334 1907.65 2.86002 1901.91 3.90668C1897.88 4.64158 1893.85 5.37669 1889.87 6.28003C1843.68 15.22 1797.82 25.77 1752.3 37.66C1750.83 38.0548 1749.36 38.4519 1747.9 38.849M1919 0.280029V341H738.63C784 339.96 829.17 335.08 874.11 328.94C907.44 323.77 940.79 318.36 973.55 310.21C1011.69 300.566 1049.02 288.065 1086.3 275.578C1089.15 274.625 1091.99 273.672 1094.84 272.72C1096.68 272.089 1098.52 271.446 1100.36 270.803V270.8L1100.37 270.798C1103.95 269.545 1107.53 268.292 1111.14 267.13C1118.02 264.68 1124.9 262.246 1131.79 259.812V259.81L1131.8 259.807C1140.9 256.591 1149.99 253.375 1159.08 250.12C1161.61 249.015 1164.23 248.132 1166.85 247.248L1167.17 247.14C1169.76 245.96 1172.48 245.08 1175.21 244.23C1177.78 242.97 1180.51 242.07 1183.26 241.24C1188.64 239.01 1194.1 237.008 1199.56 235.007L1199.56 235.006C1203.34 233.623 1207.11 232.239 1210.86 230.78C1222.96 226.451 1234.92 221.754 1246.89 217.054L1247.29 216.896V216.894C1253.46 214.469 1259.63 212.045 1265.82 209.67C1266.1 209.568 1266.38 209.466 1266.66 209.363V209.361C1267.8 208.942 1268.95 208.521 1270.11 208.12C1273.44 206.71 1276.81 205.38 1280.24 204.21C1289.25 200.55 1298.3 196.992 1307.36 193.433L1307.38 193.428L1309.8 192.476C1313.84 190.889 1317.88 189.3 1321.91 187.7C1323.31 187.17 1324.72 186.65 1326.16 186.14C1327.75 185.33 1329.43 184.73 1331.16 184.22C1336.19 181.978 1341.31 179.957 1346.43 177.936L1346.76 177.808C1350.8 176.211 1354.85 174.61 1358.85 172.9C1362.53 171.594 1366.13 170.077 1369.73 168.556L1369.87 168.498C1374.35 166.604 1378.84 164.71 1383.47 163.22L1383.68 162.66C1390.95 160.006 1398.11 157.029 1405.26 154.052V154.05C1411.83 151.317 1418.4 148.584 1425.06 146.1C1430.09 144.04 1435.16 142.1 1440.25 140.19C1443.44 138.932 1446.63 137.664 1449.82 136.395V136.394L1450.06 136.3C1459.7 132.465 1469.33 128.634 1479.08 125.11C1479.9 124.798 1480.72 124.485 1481.54 124.171L1481.59 124.15L1481.6 124.147C1486.08 122.428 1490.58 120.704 1495.17 119.23C1509.02 113.91 1523.03 108.87 1537.1 104.11C1541.73 102.28 1546.48 100.73 1551.24 99.24C1580.19 88.63 1609.63 79.29 1639.06 70.09C1660.12 63.2215 1681.44 57.2013 1702.76 51.1812L1702.77 51.1797C1711.09 48.83 1719.41 46.4802 1727.72 44.08M688.34 341C666.81 340.58 645.35 339 623.92 337.02C617.069 336.346 610.209 335.767 603.349 335.189L603.324 335.187C592.488 334.274 581.652 333.361 570.85 332.07C545.12 329.24 519.57 324.97 494.06 320.55C458.5 313.71 423.16 305.84 387.91 297.57C351.132 289.013 314.807 278.675 278.503 268.343L278.445 268.327L278.443 268.326C275.906 267.604 273.368 266.882 270.83 266.16C261.466 263.223 252.077 260.376 242.687 257.53L241.782 257.256C237.184 255.861 232.585 254.467 227.99 253.06C226.99 252.73 225.98 252.42 224.97 252.12C217.617 249.804 210.29 247.406 202.961 245.007L202.572 244.88C196.993 243.054 191.413 241.228 185.82 239.44C184.515 238.96 183.18 238.553 181.845 238.147C179.539 237.445 177.233 236.743 175.08 235.66C174.815 235.595 174.423 235.498 174.03 235.4C173.873 235.361 173.716 235.322 173.568 235.285C173.344 235.23 173.139 235.179 172.98 235.14C171.99 234.72 170.97 234.37 169.93 234.07C165.787 232.511 161.573 231.128 157.361 229.746L157.205 229.695C155.716 229.206 154.226 228.717 152.74 228.22C149.146 226.67 145.423 225.46 141.701 224.251L141.662 224.238L141.661 224.237L141.614 224.222C138.685 223.27 135.757 222.318 132.89 221.2C128.877 219.649 124.823 218.226 120.771 216.804L120.663 216.766C117.803 215.763 114.944 214.76 112.1 213.71C111.158 213.372 110.211 213.046 109.265 212.72L109.022 212.636C106.433 211.746 103.845 210.855 101.34 209.76C78.19 201.09 54.71 193.34 31.15 185.88C29.8306 185.529 28.5174 185.154 27.2042 184.779L27.056 184.737C25.0548 184.165 23.0526 183.594 21.03 183.1C16.5448 181.733 12.0181 180.497 7.48997 179.259L7.42612 179.242L7.39438 179.233C4.92775 178.559 2.4608 177.885 0 177.19V341H688.34Z" fill="#10ADF4"/>
</svg>

Comments

[Андрей Шубников]

А в чем вопрос-то?

[intriga93]

Андрей Шубников, как получить такую свг в фигме
из пнг

[Андрей Шубников]

intriga93, svg из png получить нельзя. В фигме можно экспортнуть как svg, если волна в векторе нарисована. Если нет, то как вариант можно с помощью этого ресурса сделать https://getwaves.io/

[intriga93]

Андрей Шубников, допустим я перевела пнг в свг(через вектор мэждик) - получилась нормальная свг

но все-равно
цвет нужно задать в свг-шке
она не идет как обрезка

можно исправить?

Answer 1

[RAX7]

Можно еще для svg задать атрибут preserveAspectRatio="none" и высоту через css, тогда она будет растягиваться непропорционально.

Comments

[intriga93]

RAX7, это ок
спасибо
но как такую получили? просто таких в макете не один

[RAX7]

intriga93, Adobe Illustrator инструмент "перо". В фигме тем же пером такое не сложно нарисовать.

[intriga93]

RAX7, извиняюсь
не подскажете в чем ошибка? свг не показывается
https://jsfiddle.net/5fvc82L7/

а если не генерировать разметку через js
то все работает -https://jsfiddle.net/0ngyr3pq/1/

просьба написать даже если не найдете или не будет времени найти

спасибо

[RAX7]

intriga93, Как задать viewBox программно?
Откуда это задание? последние время здесь часто появляются вопросы с этим графиком.

[intriga93]

RAX7, с работы. я делаю делаю и не что-то не то
но вроде уже подсказали
а что?

[RAX7]

intriga93, просто я думаю это какой-то конкурс или тестовое задание.