How To Combine Two Svg Paths Together (without Spaces)

I was able to merge two separate paths together using this technique. However, my animation is still treating this as two separate paths. Is there a way to combine these two paths

Solution 1:

The answer is

M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31

H3511.9 means draw a horizontal line until x point at 3511.9 (with whatever y was previously inherited)

M3809.63,496.31 means move the "cursor" to an x, y coordinate.

I changed H3511.9 to H3809.63 and removed M3809.63,496.31 and continued with c21.41... which is a draw curve command.

These resources helped me to understand the draw commands for the dpath attribute.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

https://www.youtube.com/watch?v=k6TWzfLGAKo

Solution 2:

I found the easiest solution was:

1. Open the SVG file in Inkscape (Free software, cross platform https://inkscape.org)
2. Select the paths to merge
3. From the Path menu, choose Union
4. Save the file

Solution 3:

For those who came upon this question while researching to make sure there would be no problems from merging paths like I was, the problem here is just a typo.

In the above merged snippet, the ending of the first path was changed from its original 23.41H3511.9 to 23.41H3809.63.

Putting paths together by putting a space (or no space at all, just don't have a comma between the paths when placing them in the d attribute value) should always work without modification.

(On a side note, Raphael's answer made SVGs a lot less cryptic to me now after reading his links and tips)

Solution 4:

I found an awesome online editor for path manipulations: yqnn.github.io/svg-path-editor/

1. Paste your path segments

2. [optional] Check parsed path commands (e.g. Remove the M between segments)

3. [optional] Convert to either 'abs' or 'rel' commands

4. [optional] Set 'minify output' checkbox

5. Copy output

   m3322.09 361.23v112.22c0 14 2 23.41 23.41 23.41h464.13c21.41 0 166.41-1 166.41-1s13.07.87 82.08.87c31.75 0 63.51-36.21 95.26-75.31
   

---