0

So basically I want to convert this:

transform="translate(...)"

into x/y coordinates. On an <image> element

Additional info:

Similar but more specific than this question: Removing transforms in SVG files

My question is specifically about <image> elements.

I have an svg element like this:

<image width="42" height="55" id="Piz_Buin" xlink:href="assets/svgs/pin.svg"  
    transform="transalte(1.0909,269.65)">
</image>

And I want the output to be something like this:

<image width="42" height="55" id="Piz_Buin" xlink:href="assets/svgs/pin.svg"  x="1.0909" y="269.65">
</image>

So basically I want to convert this: transform="matrix(1.0909 0 0 1.0909 32.8309 269.65)" into x/y coordinates. On an element

How do I achieve this?

Things I have tried but didn't work:

  • Use Inkscape to move the elements around -> exports as transforms
  • Use Inkscape "Apply Transforms" plugin -> doesn't support <image> elements
  • Use Adobe Illustrator to move the elements around -> exports as transforms
  • Use Affinity Designer -> doesn't even support creating <image> elements from svgs
  • Tried using <use> elements instead but same issues as above

I have looked at the svggo github project and it has the convertTransform command, but after reading the API it seems this command is not at all helpful.

Chef Lax
  • 89
  • 2
  • 10
  • That's not possible in a general case, presumably that's why these tools don't offer that option. – Robert Longson Apr 08 '23 at 09:32
  • Thank you for your comment. I posted this question in case someone comes up with a soltuion he can post it here for everyone to see it. I guess as of now there is no publicly known way to convert transforms into x/y on `` elements – Chef Lax Apr 08 '23 at 09:35
  • 1
    because you can't scale or skew with just x/y. – Robert Longson Apr 08 '23 at 09:36
  • But is there a way to apply just translate-transforms? I edited my question to say just that – Chef Lax Apr 08 '23 at 09:37
  • 1
    Even just translate runs into the problem that if you used a pattern, gradient or clipPath or filter on the element they would all need to be adjusted too. – Robert Longson Apr 08 '23 at 09:38
  • But there is the apply transform plugin for inkscape. And it applies transforms for `` elements, it works. But it doesn't work for `` elements. But the problem here would be that you cannot modify the referenced svg, correct? So that narrows this use case down to an svg with ``s with only the transform="translate" property and no other properties that would cause it not to work and that's why noone has written a script yet, since it''s a very specifc use case? Thank you for clarifying! So: theoretically this is totally possible? But just a narrow use case so noone did it – Chef Lax Apr 08 '23 at 09:43

1 Answers1

-1

EDIT:

What you could try is simply not moving/scaling anything inside a group. Look here: https://github.com/svg/svgo/issues/624#issuecomment-1517490815 This will not apply the transform but it will prevent it from appearing in the first place.

Note: this solution only works for moving <image> elements that do not already have x/y properties (which then have default x=0, y=0)

After thinking about this, this is a very easy task actually, I was overthinking. You can just do it from within IntelliJ Idea.

In IntelliJ's regex replace, you can follow these steps:

Open the Find and Replace dialog (Ctrl + R or Cmd + R).

Make sure the "Regex" option is enabled (the icon should be blue).

Enter the following regex pattern in the "Find" field:

transform=translate\(([^,]+),\s*([^)]+)\)

Enter the following replacement string in the "Replace" field:

x="$1" y="$2"

Click "Replace All" or use the other replace options as needed.

The regex pattern captures the X and Y values inside the translate() function using capturing groups ([^,]+) and ([^)]+), which will match any character except a comma and a closing parenthesis, respectively. The replacement string references these captured values using $1 and $2 and formats them as x="<x>" y="<y>".

Here is a screenshot: enter image description here

Note that the image example is not applied to <image> but to path. I just showed it for you to see the visual controls. But it should be done on <image> elements.

For adding onto x/y from translate (like here https://github.com/svg/svgo/issues/624#issuecomment-265243746) you could probably write a script to do something similar like above. It's probably easier than you might think with the help of ChatGPT. That would be one solution I can come up with.

Chef Lax
  • 89
  • 2
  • 10