-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to remove Transform="translate()" #20
Comments
Do you have a sample Sketch document? |
Here's a sketch file with an example https://www.dropbox.com/s/g066q77jv9gcw5y/svg-bug.sketch?dl=0 |
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. |
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. |
@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 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. |
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. |
thanks @peternowell , btw ito sounds spanish :) |
You can do so by changing the svgo config:
|
@mathieudutour That doesn't make sense, since it's a documented issue that SVGO doesn't do this consistently, see svg/svgo#624. |
Enabling Feel free to write a custom svgo plugin to go a bit further, I'd be happy to include it |
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. |
While SVGO (and SVGOMG)'s |
And—for the record—transforms aren't always a bad thing. I describe a workflow in this article about when they're essential. |
@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. |
@morewry what's your workflow for solving this? |
@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. |
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 :)The text was updated successfully, but these errors were encountered: