Как в svg объединить несколько path?

Question

[kirillleogky]

Как объединить данные path в svg в один path?
Из этого:

<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.6717 3.26371C17.6196 3.36223 17.5548 3.51836 17.4617 3.65629C17.2454 3.98218 16.9359 4.05039 16.4639 3.87305C15.1329 3.3683 13.7656 2.98329 12.3463 2.77866C8.81756 2.26785 5.36307 2.62557 1.9812 3.87608C1.23757 4.15195 1.01337 4.05645 0.732341 3.3592C0.661294 3.18337 0.59656 3.00603 0.52867 2.8302C0.337631 2.33303 0.433938 2.09808 0.975479 1.89042C2.06014 1.47662 3.16533 1.13102 4.30209 0.900626C8.24444 0.101816 12.13 0.194278 15.9444 1.33414C16.4591 1.48874 16.9644 1.67518 17.4633 1.87375C18.0601 2.11021 18.1106 2.26482 17.8517 2.86203C17.8027 2.98026 17.7475 3.09697 17.6717 3.26371Z" fill="black"/>
        <path d="M12.2357 13.6931C13.6393 11.045 15.0824 8.41367 16.4528 5.75047C16.7907 5.09414 16.8159 5.16235 16.1623 4.85768C15.8797 4.72581 15.586 4.61213 15.286 4.51663C10.9585 3.15396 6.61034 3.15244 2.29065 4.8213C1.37334 5.17599 1.4065 5.0608 1.81226 5.97026C2.58589 7.70429 3.38636 9.42621 4.1742 11.1542C5.42937 13.9114 6.68455 16.6685 7.96499 19.4788C8.19076 19.9759 8.91071 19.982 9.17121 19.4894L12.2357 13.6931Z" fill="black"/>
        <path d="M8.77809 6.73617C9.36226 6.73313 9.94643 6.74981 10.619 6.7589C10.0633 7.32731 9.58962 7.83964 9.05597 8.32621C9.24385 8.94161 9.36858 9.54943 9.53751 10.2603C8.9865 10.039 8.48917 9.86471 8.01709 9.64038C7.73132 9.50547 7.52766 9.55246 7.27504 9.7192C6.81087 10.0254 6.323 10.2982 5.79567 10.615C5.89514 10.0405 5.96777 9.48274 6.09408 8.93706C6.15249 8.68696 6.07671 8.55812 5.88567 8.41715C5.45465 8.09884 5.03941 7.75931 4.55945 7.3834C5.32518 7.21515 5.98671 7.05902 6.67193 6.93321C6.92612 6.29659 7.21347 5.69029 7.53082 4.98242C7.83395 5.53265 8.11183 6.00708 8.3597 6.49819C8.45443 6.6816 8.57284 6.73768 8.77809 6.73617Z" fill="white"/>
        <path d="M8.93438 12.8633C9.30383 12.6557 9.67959 12.4601 10.1075 12.2297C9.97326 12.7845 9.86906 13.2756 9.71749 13.7713C10.0711 14.0941 10.3822 14.4352 10.7627 14.8262C10.3301 14.8808 9.948 14.946 9.56276 14.9702C9.33067 14.9854 9.22016 15.087 9.12385 15.281C8.94702 15.6387 8.74335 15.9828 8.5302 16.3693C8.37232 15.9706 8.20654 15.5932 8.07708 15.2022C8.01866 15.0233 7.92077 14.9687 7.7471 14.946C7.35239 14.896 6.96084 14.8278 6.51245 14.7596C6.934 14.3836 7.2924 14.0517 7.67763 13.7303C7.59395 13.2377 7.54501 12.7527 7.47554 12.1934C7.87814 12.4344 8.23496 12.6375 8.57915 12.8603C8.70861 12.9421 8.80492 12.9361 8.93438 12.8633Z" fill="white"/>
    </svg>

В один path?

Comments

[Вадим]

А редактор у Вас есть под рукой? Inkscape или illustrator?
Или делать нужно программно?

Answer 1

[Максим]

Просто перечисляем всё от M до Z в одном path d="" либо на js получаем все d генерируем новый path вставляем новый d в path и всё вроде

Comments

[Adamos]

На самом деле все немного сложнее - здесь получилось похоже только потому, что фон белый.
Но в оригинале звезды белые, а здесь - прозрачные, просто вырезаны из нижней фигуры.
Впрочем, возможно, ТС это и имел в виду.

[Максим]

Adamos, я не знаю - по идее ..что бы без cli-path сделать clip-path мы должны нарисовать d в обратном направлении ... а в этом случае автор дал четыре пути - я просто их сложил в один d и всё

я вообще думал что надо на javascript - и просто как вариант этот предложил сделать руками ! если потребуется сделать stars белыми то либо перерисовать эти отрезки отвечающие либо подложить rect выше