: How to split an SVG file with dozens of g elements into dozens of SVG files? I have an SVG file that has, say, 10 g elements that do not start at (0,0). For example: <?xml version="1.0"

@Lee3735518

I can think of a way to do this with Adobe Illustrator


Use the "release to layers" option on the layers panel to move each element into its own layer
Use the smart layer export script to export each layer into a new .svg file. If you use the option to "trim edges", they should all be at 0,0.

Vote Up Vote Down

@Twilah924

There are a couple ways I can think of to do this:

Option 1: Modify the d attribute on the Object

Difficulty rating: ★★★★☆

Conceptually, this is pretty simple. The nitty gritty details are the issue. in the <path> object within the <g>, you have the d attribute. This is the main thing you need to modify. What you'll need to do is decode that and translate it to the updated coordinates.



Option 2: Add a transform Attribute to the Object

Difficulty rating: ★★☆☆☆

If you have a good grasp with JavaScript, this is pretty easy. You can get the bounding box of the graphic using getBBox(). You can then use that rect to add a transform attribute to the object, like so:

transform = "translate(-100 -100)"


This would move the object 100 units to the left and 100 units up. Using the example you provided, I added the following script:

<script type="application/ecmascript"> <![CDATA[
var path = document.getElementById("collapse_x5F_top");
var x = path.getBBox().x;
var y = path.getBBox().y;

path.setAttribute("transform", "translate(-" + x + " -" + y + ")");
]]> </script>


This moves the graphic to the top right corner of the screen.

Live Demo (The red icon is the original, the black is the transformed object)

**Please note that while this code works for this example, it is not robust code that will work for every test case (for instance, if values of x and y are not initially positive)

Vote Up Vote Down