Combine several SVG

Question

I need to know how to combine multiple from a SVG file. Right now I have three icons and somehow I can not find any logic behind that.

I read that I need to remove the last part and combine it with the following.

Example:

From

<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>

TO

<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>

But the output is empty.
And if I only take one path of both I will see only this path.

Is there any easy explanation how to do that?

Are you expecting people to visually compare those two strings of numbers to tell what is different? Are they different? — Sean, May 22 '20 at 17:03
It's empty probably because you didn't set a viewBox attribute. I suppose the paths are falling outside the svg canvas. Please edit the question by adding the svg label as you have it. — enxaneta, May 22 '20 at 17:20

score 1 · Answer 1 · edited Nov 05 '21 at 08:13

You can visualize your paths if you put them in a suitable <svg> element. It needs to have a "sensible" viewBox attribute in it. For your example the following works: <svg viewBox="0 0 620 840">. I also added two rectangles (<rect>) to show the extent of your overlaying symbols.

Note: To actually combine two paths into one is a slightly more complex task. This can be done with a suitable graphical SVG-editor, like Inkscape (or many others ...).

<svg viewBox="0 0 620 840">
    <rect x="0" y="0" width="480" height="440" style="stroke:black;fill:none"/>
    <path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
    <rect x="80" y="300" width="540" height="440" style="stroke:black;fill:none"/>
  <g style="fill:none;stroke:red">
    <path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
  </g>
</svg>

I combined the two paths of your second part using Inkscape, put it through the online SVG optimizer SVGOMG! (thanks for the hint, Danny '365CSI' Engelman) and ended up with this:

  <svg xmlns="http://www.w3.org/2000/svg" 
width="400" viewBox="-1 0 515 390">
<path d="M54.4 2a54.4 54.4 0 106.2 108.4
c9.1 2.2 18.9 3.5 28.3 5.2
a40 40 0 0132.4 32.4l35.4 199.7a49.9 49.9 0 0049.2 41.3
h210c22 0 41.5-14.4 47.9-35.5l47-155.8
c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3
c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20
a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8z
m97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 21.3H206
c-14.6 0-27-10.4-29.5-24.8z" 
stroke="red" fill="gray"/>
</svg>

After that, process your SVG file with [SVGMO](https://jakearchibald.github.io/svgomg/) the 5 digit precision in above SVG is like stuffing 100.000 pixels into 1 — Danny '365CSI' Engelman, May 26 '20 at 11:51
Thanks, that's a good one! SVGMO is what I've been looking for for quite a while. Very helpful. — Carsten Massmann, May 26 '20 at 20:25
Recently found this great online editor: https://yqnn.github.io/svg-path-editor/ Helps in getting rid of translates and scaling viewBox — Danny '365CSI' Engelman, Aug 23 '20 at 11:59

Danny '365CSI' Engelman · Answer 2 · 2020-08-23T12:16:36.257

If you then take your path:

M54.4 2a54.4 54.4 0 106.2 108.4c9.1 2.2 18.9 3.5 28.3 5.2a40 40 0 0132.4 32.4l35.4 99.7a49.9 49.9 0 0049.2 41.3h210c22 0 41.5-14.4 47.9-35.5l47-155.8c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8zm97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 1.3H206c-14.6 0-27-10.4-29.5-24.8z

and multiply it by 10 using: https://yqnn.github.io/svg-path-editor/

You get rid of all decimal notation and make the file even smaller:

M 544 20 a 544 544 90 1 0 62 1084 c 91 22 189 35 283 52 a 400 400 90 0 1 324 324 l 354 1997 a 499 499 90 0 0 492 413 h 2100 c 220 0 415 -144 479 -355 l 470 -1558 c 8 -30 3 -63 -15 -89 c -20 -25 -49 -40 -80 -40 H 1482 l -72 -403 c -70 -244 -136 -383 -492 -487 A 542 542 90 0 0 544 20 z m 0 200 a 344 344 90 1 1 0 688 a 344 344 90 0 1 0 -688 z m 974 1827 h 3360 l -431 1429 a 298 298 90 0 1 -287 213 H 2060 c -146 0 -270 -104 -295 -248 z

The viewBox ofcourse needs to be multiplied as well. As the (default) stroke-width="1"

<svg width="400" viewBox="0 0 5150 3900">
<path d="M544 20a544 544 90 1 0 62 1084c91 22 189 35 283 52a400 400 90 0 1 324 324l354 1997
         a499 499 90 0 0 492 413h2100c220 0 415-144 479-355l470-1558c8-30 3-63-15-89
         c-20-25-49-40-80-40h-3531l-72-403c-70-244-136-383-492-487a542 542 90 0 0-374-938z
         m0 200a344 344 90 1 1 0 688a344 344 90 0 1 0-688z
         m974 1827h3360l-431 1429a298 298 90 0 1-287 213h-2100c-146 0-270-104-295-248z" 
stroke="red" stroke-width="10" fill="gray"/>
</svg>

You can save 30 bytes more in the path if you now divide everything by 6

M90 3a90 90 90 1 0 10 180c15 4 31 6 47 9a66 66 90 0 1 54 54l59 332a83 83 90 0 0 82 69h349c37 0 69-24 80-59l78-259c1-5 0-10-2-15c-3-4-8-7-13-7h-588l-12-67c-12-41-23-64-82-81a90 90 90 0 0-62-156zm0 33a57 57 90 1 1 0 114a57 57 90 0 1 0-114zm162 303h558l-72 237a49 49 90 0 1-48 35h-348c-24 0-45-17-49-41z

Combine several SVG

2 Answers2