How to remove Transform="translate()"

[dariusgarza]

Uneven pixel positioning yields Transform="translate()" but I don't want that meta data. Is there a way to nix it from svg exports? Thanks :)

[bomberstudios]

Do you have a sample Sketch document?

[dariusgarza]

Here's a sketch file with an example https://www.dropbox.com/s/g066q77jv9gcw5y/svg-bug.sketch?dl=0

[username1290]

Yes, also came here to comment on this, Android Studio doesn't like files with transform translate. I solved it by exporting the SVG from Sketch, opening in in Illustrator and exporting to SVG again using the Screen panel.

[saivan]

Yes, it would be great to remove these. There is no good reason for the svgs exported by sketch to have any translation information. The x and y values of all children should just be appropriately offset.

[peternowell]

@dariusgarza, @sogen, and @saivan, you can do this via SVGOMG. Make sure to turn on the optimization round/rewrite transforms. I also suggest turning on shapes to (smaller) paths and round/rewrite paths. You can also run an SVG through SVGito (a few optimizations not in SVGO) before SVGOMG, to remove fill-rule attributes and convert any <use> elements to what they reference.

After those steps, you might try out this web-app for converting SVGs to VectorDrawable. I haven't used it personally, but it's an alternative to Android Studio's converter.

I spent nearly a year making SVGito and a whole course about exporting SVGs from Sketch... including a section about SVG to Android Studio / VectorDrawable conversion. I don't have the space here to cover all of the dozens of best practices covered in the course, but the tips above would be a good place to start.

[saivan]

Wow, thanks peter. This is actually pretty awesome. I actually did try this, but it leaves some of the translations alone. A tool like affinity gets rid of every transformation except for transformations applied to text since they can't be discarded.

[username1290]

thanks @peternowell , btw ito sounds spanish :)
EDIT:
(checks profile) I see you're based in Latam, cool 👍

[mathieudutour]

You can do so by changing the svgo config:

• make sure you use the latest version of the plugin
• Plugins > SVGO Compressor > About SVGO Compressor
• Reset settings
• Plugins > SVGO Compressor > About SVGO Compressor
• Edit settings
• Enable moveGroupAttrsToElems and convertPathData

[morewry]

@mathieudutour That doesn't make sense, since it's a documented issue that SVGO doesn't do this consistently, see svg/svgo#624.

[mathieudutour]

Enabling moveGroupAttrsToElems and convertPathData does remove some translate. As you pointed out, svgo doesn't support more out of the box and since this plugin uses it, we can't do much.

Feel free to write a custom svgo plugin to go a bit further, I'd be happy to include it

[morewry]

I've found a lot of misinformation on this, with conversations ending in "just use this configuration and it will work." Which isn't always the case--so my comment is mostly for people like me who may be running into times it's not working. It's not a criticism of you or your plugin. Information is helpful to people, too. That's why more than just pushing commits counts as participation on GitHub.

[peternowell]

While SVGO (and SVGOMG)'s convertPathData should "bake" most transforms into path data (perhaps also a good idea to turn on the option to convert elements to <path>s), transforms can be almost entirely avoided when exporting from Sketch if you remove all groups, and Flatten any layers with a rotation or flip transform. And always have your design in an Artboard and export the Artboard as SVG—not a layer, slice, or group within it. Again, I've covered these and dozens of other tips in my course about exporting SVGs from Sketch—which I made for people like us (power users). I always create my design in one Artboard, then—when I'm ready to export as SVG—I duplicate that Artboard, and go through a checklist to ensure I'm getting the cleanest (and most optimizer-friendly) SVG possible. I've even made a free web app of that checklist.

[peternowell]

And—for the record—transforms aren't always a bad thing. I describe a workflow in this article about when they're essential.

[morewry]

@peternowell Agreed, those are great tips, and we are doing those things to the extent we're able...and of course transforms aren't always a bad thing. They're a feature, not a bug. Unnecessary transforms, however, are not a super desirable thing.

I don't think this optimization is something anyone needs to be excessively concerned about, unless they have real problems that stem from it, like we do. The unnecessary transforms we're left with weren't a problem--until we needed to convert to Vector Drawable for Android. Then they became a problem, resulting in icons being off center and cut off.

As I think we're all aware, when 20 factors need to be lined up just right for something to work, it's going to fail frequently. In our case, for example, we have procedural limitations. We can't remove all groups or merge or flatten in our saved files, we need the groups and separate shapes for certain purposes in our Sketch library and for ongoing maintenance. And we're trying to automate, not add more manual steps. 😉

If I knew how to solve this before hitting SVGO's limitations in a way that was viable for us, I would. In Illustrator and InkScape, I knew a few ways to get rid of positioning transforms applied when visually adjusting the placement. Sketch is comparatively very stubborn about keeping them. To my mild dismay, because I really do have to solve this somehow and I don't know matrix math.

I'm going to go over that list again just in case, but I'm pretty sure we've tried everything we can do from it already.

[username1290]

@morewry what's your workflow for solving this?
Inkscape so far didn't help in my case, and SVGO (CLI) is kind of hit and miss

[morewry]

@sogen We ended up adding manual steps. The person exporting the icons was asked to select all icons and hit ungroup multiple times, then proceed with export. Couldn't find any other way with our tools, needs, and constraints.