Как / чем собрать несколько svg в один svg

Question

Имею вот такие 3 svg

svg {
  width: 50px;
  height: 50px;
  display: block;
}

<svg viewBox="0 0 33 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6 0C16.5 0 16.4 0 16.3 0C8.50002 0 1.90002 5.5 0.400024 12.8C2.60002 14.1 6.20002 17.2 15 14.6C19.4 13.3 25 11.6 32.4 17.6C32.4 17.3 32.4 17 32.4 16.6C32.7 7.6 25.5 0.2 16.6 0ZM14.1 11.7C8.40003 13.4 5.40002 12.4 3.90002 11.5C5.90002 6.5 10.7 3 16.2 3H16.5C22.1 3.1 26.9 6.8 28.7 11.8C24 9.5 19.5 10 14.1 11.7Z" fill="#5AA5DC"/>
</svg>

<svg viewBox="0 0 33 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 2.90002C8.9 4.30002 4.7 3.90002 0 0.900024C0 2.00002 0.1 3.60003 0.2 4.60003C2.6 6.50003 8.3 7.80002 14.4 5.80002C25.2 2.20002 30.2 7.90002 31.4 9.00002C31.7 8.00002 32 6.80002 32.2 5.80002C25.9 0.200024 19.3 1.10002 13.5 2.90002Z" fill="#5AA5DC"/>
</svg>


<svg viewBox="0 0 31 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8 2.20002C8.39999 3.70002 5.19999 3.60001 0.799988 1.30001C3.79999 14 14 24.5 14.5 25L15.5 26.1L16.6 25.1C17.1 24.6 26 16 30.2 5.10002C30.4 4.80002 24.5 -1.69998 12.8 2.20002ZM15.7 21.8C13.6 19.4 8.69999 13.4 5.69999 6.20002C7.79999 6.40002 10.4 6.20002 13.8 5.20002C20.8 3.20002 24.4 4.70002 26.6 6.10002C23.2 13.4 17.9 19.4 15.7 21.8Z" fill="#5AA5DC"/>
</svg>

Я бы хотел собрать в один svg, я взял их из Figma. У меня там можно было только экспортировать 3 слоя по отдельности (вроде как)

Answer 1

Есть также хорошее решение -> vectr.com
UPD: или идётё в Google, пишите svg редактор онлайн и находите нужные ссылки

Answer 2

Для объединения трех SVG с разными viewBox можно воспользоваться командой symbol,
которая имеет свой viewBox. То есть в одном svg будут три symbol с разными viewBox

Так как все, что находится внутри symbol невидимо, то вызываем содержимое с помощью <use>

<style>
svg {
  width: 50px;
  height: 80px;
  display: block;
}
</style>
<svg  xmlns="http://www.w3.org/2000/svg"  style="border:0px solid;">
<symbol id="s1" viewBox="0 0 33 18" >
<path d="M16.6 0C16.5 0 16.4 0 16.3 0C8.50002 0 1.90002 5.5 0.400024 12.8C2.60002 14.1 6.20002 17.2 15 14.6C19.4 13.3 25 11.6 32.4 17.6C32.4 17.3 32.4 17 32.4 16.6C32.7 7.6 25.5 0.2 16.6 0ZM14.1 11.7C8.40003 13.4 5.40002 12.4 3.90002 11.5C5.90002 6.5 10.7 3 16.2 3H16.5C22.1 3.1 26.9 6.8 28.7 11.8C24 9.5 19.5 10 14.1 11.7Z" fill="#5AA5DC"/>
</symbol>

<symbol id="s2" viewBox="0 0 33 9"  >
<path d="M13.5 2.90002C8.9 4.30002 4.7 3.90002 0 0.900024C0 2.00002 0.1 3.60003 0.2 4.60003C2.6 6.50003 8.3 7.80002 14.4 5.80002C25.2 2.20002 30.2 7.90002 31.4 9.00002C31.7 8.00002 32 6.80002 32.2 5.80002C25.9 0.200024 19.3 1.10002 13.5 2.90002Z" fill="#5AA5DC"/>
</symbol>


<symbol id="s3" viewBox="0 0 31 27" >
<path d="M12.8 2.20002C8.39999 3.70002 5.19999 3.60001 0.799988 1.30001C3.79999 14 14 24.5 14.5 25L15.5 26.1L16.6 25.1C17.1 24.6 26 16 30.2 5.10002C30.4 4.80002 24.5 -1.69998 12.8 2.20002ZM15.7 21.8C13.6 19.4 8.69999 13.4 5.69999 6.20002C7.79999 6.40002 10.4 6.20002 13.8 5.20002C20.8 3.20002 24.4 4.70002 26.6 6.10002C23.2 13.4 17.9 19.4 15.7 21.8Z" fill="#5AA5DC"/>
</symbol> 
<use xlink:href="#s1" transform="translate(0, -21)" />
 <use xlink:href="#s2" transform="translate(0, -6)" />
  <use xlink:href="#s3" transform="translate(0, 19)" />
</svg>

Answer 3

можно эти три svg в figma объединить в группу и потом скопировать svg

БЛОГ НА HUSL

Как / чем собрать несколько svg в один svg

Ответы (3 шт):