Removing transforms in SVG files

Question

I have been struggling with this for a while, and can't seem to find an answer (that works) anywhere. I have an SVG file which looks like this:

<svg

   xmlns:dc="http://purl.org/dc/elements/1.1/"
   ...
   width="72.9375"
   height="58.21875"
   ...>
   ...
   <g
     ...
     transform="translate(10.75,-308.96875)"
     style="...">
     <path
       inkscape:connector-curvature="0"
       d="m -10.254587,345.43597 c 0,-1.41732 0.17692,-2.85384 0.5312502,-3.5625 0.70866,-1.41733 2.14518,-2.82259 3.5625,-3.53125 1.41733,-0.70866 2.11392,-0.70867 3.53125,0 1.41732,0.70866 ... z"
       ... />
  </g>
</svg>

I want to remove the transform="..." line but still have my image stay where I've placed it (in InkScape). If I manually remove the transform, the image zips to another part of the screen (as expected), but I need to get rid of the transform altogether and, at the same time, have the image stay exactly where I want it. Is there a way to remove/flatten the transforms into the path coordinates themselves? (The only transforms I have to deal with are translate and scale, no matrices.)

This is similar to http://stackoverflow.com/questions/10126498/apply-all-transform-matrices — Erik Dahlström, Nov 11 '12 at 15:56
Cross-linking to http://stackoverflow.com/q/14684846/2171120 — mirabilos, May 12 '17 at 14:41

score 233 · Accepted Answer · edited Dec 11 '20 at 22:02

233

How to remove transforms in Inkscape

Open svg file in Inkscape
Go to Edit -> Select All
Go to Object -> Ungroup
Go to Edit -> XML Editor
Find "transform" attributes in layers and delete them

How to move all objects altogether without creating another transform attributes

Go to Edit -> Select All in All Layers
Go to Object -> Transform

In Transform panel

Uncheck Relative move and check Apply to each object separately
Set Horizontal and Vertical values according to your needs and click Apply

edited Dec 11 '20 at 22:02

Community

1
1

answered Jun 12 '14 at 08:43

Sergiy Seletskyy

16,236
7
69
80

25

Worked for me. Objects need to be ungrouped before they are transformed so the actual coordinates of paths are updated. – Rupert Angermeier Aug 21 '15 at 09:39
10

Hm, after setting it to 0 and clicking apply the transform shows up in the XML editor again. – escapedcat Dec 05 '15 at 21:00
Maybe I do it wrong, but it messes up the scene for me. It isn't the solution for the question I think :/ – Márton Tamás Oct 08 '16 at 18:56
9

Ungroupping the objects is necessary for this to worked for me, thanks! – Hai Zhang Dec 24 '16 at 18:16
Also does not work if the transformation is more complex, and/or not feasible reproducible by a human. – phihag Sep 01 '17 at 15:33
6

Didn't work for me. It will flatten and move the transform attribute to leaves (actually everything becomes a leaf after ungrouping), but it won't REMOVE the transform attribute and APPLY IT TO POINT GEOMETRY, without which I am back at square one. – Szczepan Hołyszewski Sep 09 '17 at 01:03
3

IMPORTANT: Like a comment above explained, you need to ungroup the objects for this to work correctly, otherwise the transform attribute will be set again automatically – Shadow Feb 28 '19 at 19:36
Also important: removing the groups in Ink Scape did not remove all the groups in the source (even though I selected in all layers). Once I removed the groups in a text editor, the solution worked! – Pauloco Nov 19 '20 at 11:54
Couldn't figure out how to do the "Find "transform" attributes in layers and delete them" step. Followed all other steps and it worked. Thanks! – OXiGEN Feb 03 '21 at 02:51
1

Any way to do this without having to ungroup objects ? – Softlion Feb 09 '21 at 09:18
7 years have passed since I wrote that answer, but I don't think the general principals have changed much since then @Softlion – Sergiy Seletskyy Feb 11 '21 at 11:34
1

@OXiGEN the "transform" attributes are not nodes, they're attributes of nodes. You have to click on a "g" node and see the attribute. It probably will help to find the transform in a text editor first so that you know which node you're looking for and don't have to try every one. – Tristan Reid Jun 06 '21 at 16:16
Once you follow this recipe, I recommend you to to save it as `Plain SVG` to keep it simple. Then I recommend to use [svgomg](https://jakearchibald.github.io/svgomg/) online service to simplify and clean the svg. – lepe Oct 01 '21 at 05:54
In my case I didn't know every global position of every object, so using Relative move was much easier: I just wrote the group transform translate values somewhere, cleared transform, and reinjected the translate values during Relative move. Make sure to use the same unit as the document! (e.g. mm vs px). Next time I'll just use the Apply Transforms extension from the other answer, though. – hsandt Aug 11 '23 at 16:45

score 93 · Answer 2 · edited Aug 16 '22 at 19:09

93

There is inkscape extension called Apply Transforms that recomputes paths with their transforms. This is exactly what I've been looking for.

After installing it you'll find it menu under Extensions > Modify Path > Apply Transform.

credits: Inkscape forum > Remove all transforms whilst keeping in-place

edited Aug 16 '22 at 19:09

panta82

2,763
3
20
38

answered Dec 21 '16 at 08:57

piotr_cz

8,755
2
30
25

This extension has been updated and now it works for rects too, at least in my testing. – sil Dec 10 '19 at 22:51
6

Absolutely. The power this little plugin gives you is unmeasurable! – brett Mar 30 '20 at 17:44
Works wonders! * move the group where you want it to be, * break the group (ctrl + u) * Extensions > Modify Path > Apply Transform * save And that's it. :) – Pic Mickael Aug 06 '20 at 13:57
1

Miserably fails under Inkscape 1.0.2. – Mike Nakis Feb 28 '21 at 22:53
Unfortunately, this extension couldn't handle some of the possible shorthand notations, especially using period characters as separators... – Oliver Giesen Jun 03 '21 at 11:00
1

Works great in v1.1 ! – Joe DF Jun 28 '22 at 16:54
Doesn't work with the SVG elements! Not yet supported! – Chef Lax Apr 08 '23 at 05:37

score 58 · Answer 3 · edited Oct 29 '15 at 10:18

58

I worked out what the problem was. I was hoping not to have to resort to Robert's answer, although I am glad for confirmation that it would work! In the end Duopixel's answer was actually the closest, although it turns out something else was going on as well.

When you're working with different paths in Inkscape documents, I believe its default behaviour is to group them together under an <svg:g.../> tag. When modifying paths in a group, Inkscape will automatically add a transform to the group to represent these changes. However, if you open the XML editor and drag your path outside the <svg:g.../> tag and make it its own <svg:path.../> tag, Inkscape is free to edit the individual points at will. In the end it did turn out to be a grouping problem even though I was only working with one path! Hope this helps others in similar situations.

edited Oct 29 '15 at 10:18

PhiLho

40,535
6
96
134

answered Nov 18 '12 at 08:50

Ephemera

8,672
8
44
84

7

Awesome! Thank you! That is exactly what it was doing. I just deleted the group tag leaving the inner contents, saved it, and reopened it in inkscape. Of course the image was outside the view box (or whatever it's called), but then I just set the x,y and it's fixed. What a pain. Thank you for sharing this! – johntrepreneur Feb 12 '13 at 23:02
1

In my case I've combined approaches from this answer with another one from [that answer](https://stackoverflow.com/a/24180005/697625). – quasiyoke Nov 25 '16 at 00:59
This should be upvoted and brought to top. This solves the issue elegantly and worked for me. And even if the graphics are misplaced outside the canvas you can always resize it (Edit > Resize Page To Selection) – mandarin Aug 22 '18 at 14:37

methodofaction · Answer 4 · 2016-04-12T16:42:39.210

57

Load your SVG in Method Draw http://editor.method.ac (File > Open Image)
Ungroup your elements (Object > Ungroup elements) you might have to do this more than once.
Select your path
Reorient the path (Object > Reorient Paths).
Save your image (File > Save Image) If it appears in a new window you can right click and "Save Image as..."

edited Apr 12 '16 at 16:42

answered Nov 11 '12 at 16:29

methodofaction

70,885
21
151
164

1

There is no Object > Reorient Paths. Which version are you referring to? – 0__ Jun 28 '14 at 20:31
1

@0__ If this menu item is disabled it means that your path is still within a group. Ungroup again. – methodofaction Jun 30 '14 at 03:09
Works perfectly until you have a `transform="rotate"` in your svg. – Tim Aug 13 '20 at 12:34

score 45 · Answer 5 · edited Jul 23 '19 at 23:37

45

Open your svg on Inkscape:

Select the group that contains all those transforms you want to get rid off
Press CTRL + U (ungroup)
Press CTRL + G (group again)

This way you will get rid of the transforms applied to the group and they will get transferred to the paths that are contained within this group.

edited Jul 23 '19 at 23:37

TylerH

20,799
66
75
101

answered May 17 '17 at 10:06

rmartrenado

1,516
1
18
42

UTF_or_Death · Answer 6 · 2014-08-28T17:57:00.330

24

For groups regrouping can do the job quickly. Select the group and press Ctrl+Shift+G (degroup) and then Ctrl+G (group).

For some objects who have a similar problem, spirals and stars for an example, the quick way is to press Ctrl+Alt+C (stroke to path) - this however converts the object to a pure path and removes all the extra-attributes, such as sodipodi:cx, sodipodi:revolutions and so on.

edited Aug 28 '14 at 17:57

answered Aug 01 '14 at 14:23

UTF_or_Death

864
11
19

score 20 · Answer 7 · answered Nov 20 '17 at 16:52

20

SVGO is an excellent open-source command line tool for this and a bunch of other optimisations. There's an equally excellent online web UI for it called SVGOMG

The relevant options in this case are moveGroupAttrsToElems (SVGOMG: Move group attrs to elements) to move transform attributes from groups to path elements, plus convertPathData (SVGOMG: Round/rewrite paths) to flatten transform into d.

answered Nov 20 '17 at 16:52

Rob Hogan

2,442
19
23

3

SVGO is incredible. This should really be the accepted answer, especially since stackoverflow is for the programmer's point of view, and this is by far the best solution for a programmer developing a site containing SVGs. Putting this in your deployment pipeline is much better than having to teach your artists to remove the transforms by hand (or having to do it yourself) and getting a bug report each time they forget – UTF_or_Death Jul 14 '18 at 15:16
8

Except this doesn't work anymore. I remember it working better once, but see this issue about this exact feature https://github.com/svg/svgo/issues/624 for SVGO – morewry Aug 17 '18 at 23:19

score 18 · Answer 8 · answered Nov 11 '12 at 22:04

18

In my experience, if you're using Inkscape, it suffices to move the path element slightly (e.g. with cursor keys), and Inkscape will delete the transform attribute and adjust the path data accordingly. (Annoying if you actually want to keep the transform attribute.)

So, you could simply select the path (make sure it's the path and not the surrounding group), hit the right and the left cursor key, and you're done.

answered Nov 11 '12 at 22:04

Thomas W

14,757
6
48
67

1

This doesn't seem to work for a element. I'm trying to get rid of the transform attribute. – Max Spring Jan 30 '13 at 17:45
6

Maybe try ungrouping first and regrouping afterwards. – Thomas W Jan 31 '13 at 06:12
1

Wow, worked like a charm! This should be the accepted answer. No extra tools needed, no complicated steps. Other answers don't work if the path is nested in a transformed `` and I want to keep the transform on the ``. – tomekwi Mar 14 '15 at 22:46
Doesn't work for a path created by the circle tool, either – sdaau Jul 02 '15 at 04:39
1

The best answer. Maybe one source of confusion is the Preferences > Transforms > Store Tranformations option, which I don't see mentioned elsewhere here. It should be set to "optimised". Then just ungroup, move, re-group, and dud transforms are removed. – Mr5o1 May 09 '16 at 23:28

score 17 · Answer 9 · answered Oct 13 '15 at 11:05

17

Whilst I prefer Inkscape, Affinity Designer (~$40 / Mac) saved me hours of effort when working with Android Vector Drawables.

Open an SVG, File -> Export -> SVG -> More -> Flatten transforms worked great.

answered Oct 13 '15 at 11:05

snodnipper

2,580
1
29
19

1

It's strange to use a pay app in a opensource app – sainf Sep 30 '20 at 10:51
I tried it. Unfortunately like most/all solutions out there, this does not support removing transforms from or elements – Chef Lax Apr 08 '23 at 06:22

score 9 · Answer 10 · edited Jul 23 '19 at 23:36

9

Inkscape has the option to clear the transformation data but still leave the value of the object unmodified.

In Inkscape, select the object and 'Path' menu, 'Simplify'. Now, you will have the transformations removed.

edited Jul 23 '19 at 23:36

TylerH

20,799
66
75
101

answered Jul 11 '13 at 12:55

Kumar

165
1
2

18

It will, however, alter the outline of your paths, and reduce the number of vertices in complex shapes. – Charlie Nov 14 '13 at 23:09
1

This often makes the markup larger than before the transforms. – Charlie Feb 18 '16 at 18:55

score 9 · Answer 11 · edited Jul 23 '19 at 23:36

9

It should be mentioned that there is the "Optimized" mode in preferences:

Inkscape Preferences > Transforms > Store transformation > Optimized

Which is supposed to minimise the occurrence of transform attributes as much as possible, (but doesn't).

This seems to be on by default anyway.

According to a discussion, one instance where this Optimized mode lacks zeal is when the page is resized. This causes a translate transform to be applied to the layer <g> element. It seems that evacuating the children to another layer is the best solution at the moment.

edited Jul 23 '19 at 23:36

TylerH

20,799
66
75
101

answered Mar 10 '15 at 14:45

Evgeni Sergeev

22,495
17
107
124

2

To resize the page without creating annoying `translate` transforms on every layer, try opening the `.svg` file in a text editor and manipulate the height and width attributes that appear at the top. – februaryInk Mar 16 '15 at 23:59

score 7 · Answer 12 · answered Feb 18 '16 at 19:00

7

Select the elements in question
Object > Ungroup (repeat until everything is ungrouped; see XML editor for nested nodes)
Path > Object to Path (converts polygons to paths)
Object > Transform > Uncheck relative move > Apply

answered Feb 18 '16 at 19:00

Charlie

8,530
2
55
53

Doesn't seem to work in Inkscape 0.91. The `` with the `transform` attribute stays just as it was. Also, my object (just like that shown in the question here) is already a path. – O. R. Mapper Apr 12 '16 at 19:04
Can you paste a link to your SVG? – Charlie Apr 13 '16 at 20:15

score 6 · Answer 13 · answered Nov 11 '12 at 13:56

6

In this case just add the translate to the m values for each child so -10.254587 + 10.75 = -0.504587 and -308.96875 + 345.43597 = 36.46722.

Since all the terms in the example are relative (i.e. lower case) that's all. If any were absolute (upper case) e.g. M or C they would have to be adjusted too.

For scale you'd basically multiply all the child values by the scale.

answered Nov 11 '12 at 13:56

Robert Longson

118,664
26
252
242

I did that, but in the the Inkspace XML editor (or any other editor) the transform is still added. Weird. – escapedcat Dec 05 '15 at 21:34
1

In which way would you adjust C if you had the 2 subpaths e.g. M 8.0 12.0 C 11.3 13.1 14.9 13.55 16.0 13.0 C 2.4 9.8 2.8 10.2 8.0 12.0 C 7.6 7.8 7.6 8.1 5.0 9.0 and M 3.0 5.0 C 2.4 5.5 3.3 6.4 5.0 7.0 Which you want to transform into one path? – Setup Jan 14 '16 at 15:03
@Anton use the [ask question](http://stackoverflow.com/questions/ask) button if you have a question that's not covered by the existing answers. It's hard to ask and answer in comments as there's very limited formatting available. – Robert Longson Jan 14 '16 at 15:15
2

@RobertLongson well you did cover it. All I wish for is you to elaborate "If any were absolute (upper case) e.g. M or C they would have to be adjusted too." – Setup Jan 14 '16 at 16:02

score 6 · Answer 14 · answered Oct 17 '14 at 15:08

To remove the transform attribute from a g element (group) in Inkscape, you can to move the group to its final place, ungroup it and then regroup all elements. Now a new group has been created, and if you don't move it again, it will not get a transform attribute attached to it.

score 5 · Answer 15 · edited Jul 23 '19 at 23:36

5

In my case saving as optimized SVG solved the problem. So in Inkscape use:

File -> Save as... -> Optimized SVG.

edited Jul 23 '19 at 23:36

TylerH

20,799
66
75
101

answered Jan 20 '19 at 12:05

Michał Stochmal

5,895
4
36
44

What was your problem BTW? I came here after trying everything. But the problem still persists. – Vishal Kumar Sahu Feb 06 '19 at 13:34
@VishalKumarSahu I couldn't import my android app icon (SVG) as an asset due to `transform` attribute not being supported by Android Studio. – Michał Stochmal Feb 06 '19 at 14:12
Yup and it's the same case in web too. Transform creates problem in output but is quite helpful during object arrangement as a group. I have to do calculations to solve the purpose. – Vishal Kumar Sahu Feb 06 '19 at 14:44

score 4 · Answer 16 · answered Mar 06 '15 at 15:28

4

If anyone lands here looking for a solution to do this in Sketch 3, select the layer and then click on Layer->Paths->Flatten.

answered Mar 06 '15 at 15:28

Joel Worsham

1,140
1
7
19

score 4 · Answer 17 · answered Feb 05 '20 at 20:22

4

This works if you are using Inkscape:

Select everything and ungroup
Save as "Optimised Svg (*.svg)"

In all cases I have tried, this has remove any transform attributes. Not sure if it works for more complex SVG.

answered Feb 05 '20 at 20:22

Max888

3,089
24
55

I tried and didn't remove the transforms for me. But I won't down vote because I might have done something wrong. – Csaba Toth Jan 13 '23 at 08:23
Did not work for me. Probably because I am using the & element – Chef Lax Apr 08 '23 at 05:53

score 3 · Answer 18 · answered Aug 15 '14 at 20:39

Found it:

Set your desired page size*
If your current layer has a transform (check with the XML editor, it's the top group under the SVG element) then create a new layer and move all objects to it
Ungroup any groups (this may not be needed, YMMV)
Select all objects and apply a null transform (such as scale by 100% 100%, or arrow right + arrow left) while having Store transformation: Optimized in Preferences / Transforms
If you had to undo any groups, you can now regroup them
Save a copy as Optimized SVG and set your desired numeric precision

*: Or at least place the objects where you need them, relative to the top left corner of the page. It's unfortunate that SVG coordinates reference the top left corner, while Inkscape resizes the page relative to the bottom left!

I needed the "move to another layer" trick since the transform I wanted to push down was on a layer's . Inkscape's coordinate system is quite annoying. — Mutant Bob, Feb 03 '15 at 18:22

score 3 · Answer 19 · answered May 28 '16 at 20:13

3

I was able to get rid of a matrix(...) transform (due to mirroring) by combining the path with a rectangle and then removing the nodes of the rectangle. The translate(...) part stayed though.

answered May 28 '16 at 20:13

Emily L.

5,673
2
40
60

This is the only solution what I found too. Combine with a new clean path, then remove the unnecessary part. – Márton Tamás Oct 08 '16 at 18:55

score 1 · Answer 20 · answered Jan 24 '14 at 14:36

I tried the solution posted here, namely to remove the group tags in the SVG-file and reopen it in Inkscape (0.48.3.1 in my case). Alas, after I translated the paths again using the select and transform mode (F1) and saved it, the group tags reappeared! Inkscape saves all transformations applied to the path in a surrounding group element. Unless you use the path-node selection tool (F2), hit ctrl+a and move the nodes of the path to their right place. After I had done this instead and saved afterwards Inkscape didn't add the group tags, because this translation applied directly to the path model. Hope this helps.

score 1 · Answer 21 · edited Aug 17 '18 at 21:26

Ive been having this issue for years. The solution is clearly to be able to dynamically play with transforms in the browser, if its not going to be "fixed" in inkscape.

A user Mc at Inkscape forums gave me this solution.

The solution builds the current transform between an SVG element and its SVG root element, and then returns a full set of BBox information based on the total of the transforms.

It would also be possible to easily change which element the calculations are relative to, should you want to do in browser work between two parts of the same SVG file.

Finally I can actually have a panning SVG viewport.

score 1 · Answer 22 · edited May 23 '17 at 10:31

1

In my case the groups are actually caused by layers. Deleting all layers in the document removed the group and transform (possibly combined with ungrouping objects and regrouping them etc as in Removing transforms in SVG files (answer-35490189 from @Charlie above))

edited May 23 '17 at 10:31

Community

1
1

answered Nov 29 '16 at 22:20

Jamie Pate

1,783
20
18

score 1 · Answer 23 · answered Aug 24 '17 at 12:10

My specific problem was with symbols that were defined outside the page, thus requiring a transformation to be shown on the page.

To move the symbols to the page without requiring a transformation, I had to go through these steps in Inkscape:

Open the Symbols window (Shift+Ctrl+Y)
Remove the symbol from the document library. (There's a button for that in the window.)
Now the graphic shows up in the document, outside the page boundary.
Ungroup the graphic. (This is a vital step!)
Move the graphic inside the page boundary.
Add the graphic back to the symbol library.

score 1 · Answer 24 · answered Oct 27 '17 at 02:24

This seems random, but nothing else I tried worked, so here you go random other person. Some of my paths had a sort of margin around them that could only be seen when selecting them (). I think this was created when I pasted a layer from another inkscape file and rotated it 90 deg. This made a pattern fill on the shapes have a different transform (lines spaced further apart). It also made align objects not work as expected. Using the Apply Transform mentioned by @Piotr_cz fixed the transform problem, but the strange margin remained. I accidentally got rid of it by changing the Blur on Stroke to any value and changing it back to zero.

score 1 · Answer 25 · answered Jul 03 '20 at 12:01

Inkscape 1.0 on Kubuntu 20.04

Although this thread is rather old, I'd like to post my experience/solution. I came across this problem when trying to create a template for FreeCAD's TechDrawing workbench. These templates must not contain any transforms.

In my case I had to add a company logo from an external .svg file (entirely made with Inkscape). That logo contains graphic as well as text elements. When copying that logo into the template, transforms were created, that caused the template not to work correctly in FreeCAD.

First, this solution suggested on www.freecadweb.org/... does not work for me. That's why I searched the web and found this discussion.
Second, none of the solutions suggested above did work for me, but they put me on the right track. Charlie's answer came close, but Object > Transform > Uncheck relative move > Apply did show no difference.

What worked for me was:

As mentioned by others, ungroup everything.
Convert text objects to path - that seemed to be essential in my case!
Delete all existing transforms in the xml-Editor and observe what happens with the related objects. In my case, the corresponding elements changed their position.
Correct these changes manually but do not group anything.
Save as normal svg (normal = no optimisation or other special settings were used)

Works fine when I use that template in FreeCAD.

One strange detail: Although my solution connotes that text elements were the problem in my case, it cannot be that easy. In fact, the base document (the one into which I copied the logo) contains a lot of text elements, and I did not convert any of them. So it could be the combination of "external source" and text elements. I merely post this detail as a hint to others, who might have related problems.

score 0 · Answer 26 · answered Jun 05 '18 at 12:18

Somehow I had no luck with any of the approaches. If there is <defs> section in your svg and usages like this:

<g transform="matrix( *** ) "><use xlink:href="#***"/></g>

you may have to delete all usages and take everything out from defs section. Then, you can use inkscape to place it all in the correct way and then apply transforms using the mentioned plugin. Hope it helps someone.

Kalnode · Answer 27 · 2023-05-11T11:41:32.420

Remove a top-level `<g transform...` in Inkscape

I did all the tricks listed here, but still had a stubborn top-level <g transform="translate(-56.397 -53.655)">, wrapping everything, that would not disappear. I removed all groups and converted everything to path, as well selected all raw vectors and copy-pasted into a new document.

Below is what I did to remove it:

Edit / XML Editor
Move layers out of <svg:g id="layer1...
Observed in artboard that composition has shifted (out of view, likely)
Select everything
Edit / Resize Artboard to Selection
Save new Optimized SVG and top-level <g transform... is gone!

Removing transforms in SVG files

27 Answers27

Remove a top-level `<g transform...` in Inkscape

Linked

Related

Removing transforms in SVG files

27 Answers27

Remove a top-level <g transform... in Inkscape

Linked

Related

Remove a top-level `<g transform...` in Inkscape