Related
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.)
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
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
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.
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..."
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
In my case saving as optimized SVG solved the problem. So in Inkscape use:
File -> Save as... -> Optimized SVG.
If anyone lands here looking for a solution to do this in Sketch 3, select the layer and then click on Layer->Paths->Flatten.
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.
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 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.
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.
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))
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.
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.
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.
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.
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.
I've an svg dynamically created on a page. As things "happen" (user clicks) the svg expands and collapses certain elements. It may fit in the viewport, it may not. In the case that its too big to fit on a page, the user must scroll to where s(he) wants to go/see. Now this is fine, however I have a requirement that the last element "selected" becomes the center of the page/viewport. i.e. If they click on an item, thats what they need to see without scrolling.
Could anybody tell me the best way to attack this. I've googled around but can't find what I'm looking for (though I'm not long at all this so I might have been searching the wrong stuff).
Is there a way to do this purely programmatically with javascript? Or am I obliged to pass by CSS to get the solution I want. Any tips/links/advice much appreciated.
thanks and have a nice day
G
I had a similar thing and I used the viewBox property to handle this. You could also use a wrapping <g> element, which you translate. However, from my point of view the basic approach is the same and you basically need to do two things:
keep track of the x and y offset and the dimensions of the viewport. (Using the viewBox will give you that »for free«)
Compute the center of the Element. Therefore I used the getBoundingClientRect()method which yields the AABB of of the Element in absolute coordinate space, relative to top-left edge of the whole page.
With these things, all that remains is to calculate the vector from the viewport center to the object's center.
Here you can find the reference of the viewBox and here a nice tutorial about it, because it can be a bit confusing at the beginning.
Another pro for the »viewBox« approach is: There is no dependency on special DOM elements, it just works on the root <svg> element. I once implemented both methods, I started out using a wrapping <g> element, what worked fine but gave me some performance issues. So I decided to change and use the viewBox, with the result, that the performance in Firefox grow, but slowed down in Chromium.
Edit
Here you can find a little fiddle, that outlines the approach. But be aware of the following: getBoundingClientRect() yields the position of the Element on the whole Page, so if your <svg> is not positioned at (0,0) (top: 0px; left: 0px), than that will include the offset of the svg itself. The offset of the viewBox must not include this offset, so you need to cancel that out somehow. For sake of simplicity I just used the client Bounding Rect of the SVG, what works because there are no transformations applied.
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.)
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
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
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.
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..."
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
In my case saving as optimized SVG solved the problem. So in Inkscape use:
File -> Save as... -> Optimized SVG.
If anyone lands here looking for a solution to do this in Sketch 3, select the layer and then click on Layer->Paths->Flatten.
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.
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 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.
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.
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))
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.
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.
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.
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.
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.
I'm using sprites for my navigation for this particular project. The sprites are working fine, and the original list items are floated left so that they stay in order. However, I'm trying to line it up with the right side of the page, not the left. I've tried to float the unordered list container to the right, the nav container and then a div outside of that and all of them break the sprite. Does anyone know why?
http://lrroberts0122.github.com/DWS/lab4/index.html
http://lrroberts0122.github.com/DWS/lab4/css/main.css
Thank you very much for your help.
I ended up finding that I needed to float the h1 element left and give it a width of 340 and a height of 100 to match the other half. After that, the navigation floated in nicely.
I have a part A in a document with some text and listings/figures in between. The figures and listings are positioned using htb.
Following this part A, there is the bibliography. However a couple of figures do not fit and are therefore are offset to another page, which is fine. But: I do want to limit the offset space to part A and not have the figures be placed within the bibliography text. Also, I don't want to force page of float for all figures (hp positioning or something). A page of floats at the end of part A and before the bibliography would be fine.
So my questions is, is there a way to exclude some parts of a LaTex document from being used for positioning floats that did not fit someplace before?
Maybe I'm missing something, but couldn't you just put a \clearpage right before the bibliography? That forces out all floats that haven't found a place yet.