How to Use Translate in SVG

SVG Translate Tutorial

Centered arrows
Image courtesy Westend61 / Getty Images

Translate is the SVG function that changes the coordinates of the image. Learning how to use translate in SVG will allow you to move your image along both the X-axis and Y-axis. Translate is a type of transformation that alters the location and shape of your structure to create animation.

About Translate

Translate can be used alone or in combination with other transformation functions to create action in an image.

Shapes in SVG use a coordinate system to define the structure of the form. For example, a rectangle provides starting coordinates plus that shape's width and height measurements. When you apply the translate function, you change one or more coordinates to move the image. The action can take the rectangle from one place on the page to another place on the page. It can even change the shape.

Translate Syntax

Begin the transformation by instructing the parser to look at the DTD for the function details. This is done with the attribute transform.

<rect x="50" y="50" height="110" width="110" style="stroke: #000000; fill: #cccccff" transform=

After transform, you list the name of the function or translate.

<rect x="50" y="50" height="110" width="110" style="stroke: #000000; fill: #cccccff" transform= "translate(30)" />

Translate works by detailing the number of pixels to move from the starting coordinates.

In the sample code above, the rectangle will move 30 pixels to the right. The first coordinate will always be the X-axis path. Defining a move along the Y-axis is optional. If you only provide the details for one coordinate, the parser assumes you mean the X-axis and defaults the movement of the Y-axis to 0.

Transform="translate(30)" is the same thing as transform="translate(30,0)"

To move only along the Y-axis, you must set the x coordinate to 0.

Transform="translate(0,30)" moves the shape 30 pixels downward on the SVG grid.