Applying translate transforms in SVG files from `<image>` or `<use>` elements

Question

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.

Answer 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:

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.