I have a bunch of SVG images that are made in the following way: there is a “base shape” defined by a bunch of lines arranged in a tree-like fashion, that are cloned mirrored and transformed into a snowflake pattern with SVG’s <use>
nodes. Unfortunately some applications do not handle thick lines and <use>
nodes well, so I hoped to convert them to a more “simple” form of SVG with Inkscape.
Unfortunately, in their original form Inkscape seem to be unable to do anything with them: Path → Stroke to Path, Path → Object to Path, Path → Union or Path → Combine does not seem to do anything.
I figured out a way to do what I want, but it’s somewhat complicated:
- Open SVG in Inkscape;
- Save it as EMF;
- Open saved EMF;
- Select all;
- Path → Stroke to Path;
- Path → Combine;
- Path → Union;
- Save as SVG.
This way I end up with an SVG containing a single path like I want. Is there a way to achieve the same result faster?
Inkscape version is 0.92.2 if that matters.
The sample SVG looks like this (I didn’t find a way to insert SVG file as an image):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600px" height="600px" viewBox="-110 -110 220 220">
<defs>
<g id="primary">
<line x1="0" y1="0" x2="0" y2="-100" stroke="white" stroke-width="10" stroke-linecap="round"></line>
<line x1="0" y1="-20" x2="11.335980578361996" y2="-0.36550568466299893" stroke="white" stroke-width="10" stroke-linecap="round"></line>
<line x1="0" y1="-40" x2="-23.342175588425484" y2="0.42983407834691434" stroke="white" stroke-width="10" stroke-linecap="round"></line>
<line x1="0" y1="-60" x2="9.715489262346612" y2="-65.60924034092474" stroke="white" stroke-width="10" stroke-linecap="round"></line>
<line x1="0" y1="-80" x2="-22.326108656091357" y2="-92.88998484255117" stroke="white" stroke-width="10" stroke-linecap="round"></line>
</g>
<g id="mirrored">
<use xlink:href="#primary"></use>
<use xlink:href="#primary" transform="scale(-1, 1)"></use>
</g>
</defs>
<use xlink:href="#mirrored" transform="rotate(0)"></use>
<use xlink:href="#mirrored" transform="rotate(45)"></use>
<use xlink:href="#mirrored" transform="rotate(90)"></use>
<use xlink:href="#mirrored" transform="rotate(135)"></use>
<use xlink:href="#mirrored" transform="rotate(180)"></use>
<use xlink:href="#mirrored" transform="rotate(225)"></use>
<use xlink:href="#mirrored" transform="rotate(270)"></use>
<use xlink:href="#mirrored" transform="rotate(315)"></use>
</svg>
Which renders to this (if the renderer understands SVG well):