How do I translate an SVG path without a transform attribute?

Paste the SVG, set X/Y offsets (defaults 16 and 12), then click Bake Translation. Path d is rewritten so you do not need transform="translate(...)".

Why bake translate into path d?

Some exporters, icon pipelines, and boolean ops prefer flattened geometry with offsets baked into d.

Yes. After baking, translate() is stripped from the path transform attribute when present.

Use Rotate SVG Path or other transform-based tools when you want a wrapper instead of rewriting coordinates.

FAQ

Quick answers

How do I translate an SVG path without a transform attribute?: Paste the SVG, set X/Y offsets (defaults 16 and 12), then click Bake translation. Path d is rewritten so you do not need transform="translate(...)".
Why bake translate into path d?: Some exporters, icon pipelines, and boolean ops prefer flattened geometry with offsets baked into d.
Will existing translate() transforms be removed?: Yes. After baking, translate() is stripped from the path transform attribute when present.
Prefer keeping transform and not editing d?: Use Rotate SVG Path or other transform-based tools when you want a wrapper instead of rewriting coordinates.

Source

X Y

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B