CODEWITHSUNDEEP
javascripthtmlsvg
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

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 without using spaces?

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


svg {
  fill: none;
}

path {
  stroke: tomato;
  stroke-width: 100;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623">
 <path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31"/>
</svg>

The originally separate paths can be viewable here:

svg {
  fill: none;
}

path {
  stroke: tomato;
  stroke-width: 100;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623">
 <path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3511.9" />
 <path d="M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31" />
</svg>

The goal is to merge these paths to match the above svg snippet -- without using spaces in the path.

Upvotes: 17

Views: 48223

Answers (4)

Exodus 4D
Exodus 4D

Reputation: 2822

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

enter image description here

Upvotes: 28

TechplexEngineer
TechplexEngineer

Reputation: 1928

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

Upvotes: 11

Luke
Luke

Reputation: 658

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)

Upvotes: 2

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

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 d path attribute.

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

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

Upvotes: 9

Related Questions