How to combine two svg paths?-CodePudding

I tried this tool, but I couldn't join these lines and make them a single path Can't I join these kind of lines or am I doing it wrong? this is the code

<svg width="1200" height="800" version="1.1" viewBox="0 0 317.5 211.67" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="#000" stroke-width=".26458px">
    <path d="m19.333 167.93-0.12636-2.9063 8.5925-8.5925-0.12636-7.3289 4.6753-4.6753v-17.564l5.4335-5.0544-0.12636-10.235"/>
    <path d="m32.348 126.87-2.9063-3.159 0.12636-19.839"/>
  </g>
</svg>

CodePudding user response：

Jake Archibald’s svgomg could merge these two paths via "merge paths" option.

Quite often, you can simply concatenate path commands (d property).
In your case – both paths are starting with a relative MoveTo command (note the lowercase command letter "m") while using a lot of "short hand" commands.

Sometimes the more verbose/basic notation (including command letters for every path segment) can be helpful – or an overdone minification can decrease your code’s readability:

<svg width="1200" height="800" version="1.1" viewBox="0 100 317.5 211.67" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" stroke="#000" stroke-width=".26458px">
        <path d="
                 M 19.333 167.93
                 l -0.12636-2.9063 
                 l 8.5925-8.5925
                 l -0.12636-7.3289 
                 l 4.6753-4.6753
                 v -17.564
                 l 5.4335-5.0544
                 l -0.12636-10.235
                 
                 M 32.348 126.87
                 l -2.9063 -3.159 
                 l 0.12636 -19.839"/>
    </g>
</svg>

The code above hasn’t changed any coordinate values but added some svg command "breakpoints".
Once your code is unraveled you can optimize it (via svgomg etc.)

You don’t need all the indentations and whitespace – the point is rather to remember most svg path commands are based on pairs of x/y coordinates (except "v" and "h" ... and probably some I’ve forgot ...).

<svg width="1200" height="800" version="1.1" viewBox="0 100 317.5 211.7" xmlns="http://www.w3.org/2000/svg">
  <path d="M19.3 168v-3l8.5-8.6-.1-7.3 4.6-4.7V127l5.5-5-.1-10.3
 m-5.4 15.2-2.9-3.2.2-19.8" fill="none" stroke="#000" stroke-width=".3"/>
</svg>

CodePudding user response：

I'm not really adding anything new. Like @herrstrietzel writes you can use the MoveTo (m/M) command. I don't know how you construct the path but in your case is can be a lot simpler -- something like this example. I also used the SvgPathEditor.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="m 1 65 v -3 l 9 -9 v -7 l 5 -5 v -18 l 5 -5 v -10 m -5 15 l -3 -3 v -20" fill="none" stroke="#000" stroke-width=".3"/>
</svg>