3

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:

  1. Open SVG in Inkscape;
  2. Save it as EMF;
  3. Open saved EMF;
  4. Select all;
  5. Path → Stroke to Path;
  6. Path → Combine;
  7. Path → Union;
  8. 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):

sample image

1
  • Have you tried Edit > Clone > Unlink Clone?
    – Billy Kerr
    Commented Nov 7, 2017 at 8:17

1 Answer 1

3

The following should accelerate this a bit:

  1. Select everything – Ctrl + A.
  2. Unclone – Shift + Alt + D
  3. Ungroup – Ctrl + Shift + G
  4. Repeat steps 2 and 3 until nothing changes anymore.
  5. Path → Stroke to Path – Ctrl + Alt + C
  6. Path → Union – Ctrl + +
3
  • Yup, that works. Thank you. Still have to do Path -> Combine before Union though: otherwise on some images union does not work properly.
    – n0rd
    Commented Nov 10, 2017 at 3:30
  • Still have to do Path -> Combine before Union though – The only possible explanation for this is how you treat overlaps – which you can change.
    – Wrzlprmft
    Commented Nov 10, 2017 at 6:29
  • I have to repeat steps 2 and 3 a few times and then it works. Thanks!
    – greatgumz
    Commented Apr 25, 2018 at 22:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.