SVG file editing tool?

Help
1

I am trying to move edge when node is positioned in svg file but since each component in svg is independent. So when I place node from one position to another then it’s edge does not get moved along with it.

Please can you suggest tools for editing svg files.

svg_file_editing

2

I assume you mean interactively editing an SVG (a human dragging and dropping things with the mouse) as opposed to programmatically (a script making regular changes to thousands of nodes/graphs at once).

Inkscape is pretty good, if challenging to master. It will let you do things like “group” a selection of elements so you can drag and drop them together, or “anchor” the end of a line to some other shape so that it adjusts automatically when you move the shape.

3

Graphviz has a bit of semantics in svg.

For example, if you render a simple graph:

graph { A -- B }

you will see in the svg source code the presence of comments about the nodes and edges:

<svg width="62pt" height="116pt" viewBox="0.00 0.00 62.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
        <polygon fill="white" stroke="none" points="-4,4 -4,-112 58,-112 58,4 -4,4" />
        <!-- A -->
        <g id="node1" class="node">
            <title>A</title>
            <ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18" />
            <text text-anchor="middle" x="27" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">A</text>
        </g>
        <!-- B -->
        <g id="node2" class="node">
            <title>B</title>
            <ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18" />
            <text text-anchor="middle" x="27" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">B</text>
        </g>
        <!-- A&#45;&#45;B -->
        <g id="edge1" class="edge">
            <title>A&#45;&#45;B</title>
            <path fill="none" stroke="black" d="M27,-71.7C27,-60.85 27,-46.92 27,-36.1" />
        </g>
    </g>
</svg>

Theoretically, you could, for example, use JS to track which node was clicked and dragged, get its sibling comment <!-- A -->, search for comments in svg for which edges this name is associated with (<!-- A&#45;&#45;B -->) and move these edges <g id="edge1" class="edge">, but I don’t know the production ready solution. There is something similar here: graphysics.

If you have saved the original DOT file from which the SVG is produced, you can load this DOT file into a program for visual editing and after editing save result in SVG or in a DOT, maybe QVGE can do this, but I have not used it.

1 Like