SVGEditor

Free online SVG editor — preview, share, React & PNG

Open source

Translate SVG Path Coordinates

Shift numbers in the path d attribute by X and Y

X only? Translate horizontallyY only? Translate vertically

FAQ

Quick answers

How do I translate SVG path coordinates online?
Paste or upload the SVG, set X and Y offsets (defaults 24 and 16), then click Translate. Numbers in the path d attribute shift and the preview updates.
Is this the same as a transform translate?
This page rewrites coordinates in d. For baking an existing translate() away, see Translate SVG Path Without Transform.
Need horizontal or vertical only?
Open Translate SVG Path Coordinates Horizontally or Translate SVG Path Coordinates Vertically for a single-axis offset.
Want to center the path instead?
Use Center SVG Path to move the graphic to the middle of the viewBox.
Translate horizontally → Translate vertically → Bake translate → Center path →

Privacy Terms

Open full editor →

Source

Type or paste SVG markup. The preview on the right updates as you type.

Ready

Live preview

PNG export · 2× for retina