1. Technology

What Can SVG Transformations Do

Defining SVG Transformations

By

The transformation component in SVG allows you to take one shape and change it. What can SVG transformations do? Transformations provide a way to alter the size, location and rotation of an image. As with most of the SVG processes, conversion is based on the x, y coordinates. Reviewing some of the key words in transformation may help put it into prospective.

Transform Attribute

It all starts with the attribute transform. In SVG, transform calls a specific function up to create the transformation. If you want your shape to turn, you must first use transform to identify the action and then supply a function call to define it.

<rect x="50" y="50" width="110"
style="stroke:#000000"

This code creates a basic rectangle. To build a transformation, add the transform attribute within the shape element information.

<rect x="50" y="50" width="110"
style="stroke:#000000"
<rect x="50" y="50" width="110"
style="stroke:#000000"
transform="function call"

Available Functions

  • Translate—move the shape from one place to another
  • Rotate—turn a shape
  • Scale—change the shape’s size
  • SkewX—slide the shape on the x axis. This mean the shape will only change horizontally. For example, a rectangle may slide on the top and sides either left or right. The shape goes from being a traditional rectangle to a parallelogram or trapezoid when it slants.
  • SkewY—slide the shape along the y axis. This is the same basic theory as SkewX, but the shift occurs  vertically.

Building the Transform

When creating a transform action, you must identify where the shape should end up. This is done differently for each function call, and each identifier is put in parenthesis. For example, translate requires you specify the number of pixels to move on either axis.

<rect x="50" y="50" width="110"
style="stroke:#000000"
transform="translate(30)"
This will move the rectangle 30 pixels to the right. All the function calls have different criteria. For instances, rotate requires the identify the angle of rotation and the fulcrum of the turn. In other words, what are the fixed coordinates?
<rect x="50" y="50" width="110"
style="stroke:#000000"
transform="rotate(45 50 50)"

The transformation rotates the rectangle 45 degrees using x50,y50 as the fulcrum.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. XML
  5. Specifications
  6. SVG
  7. SVG Animation
  8. Defining SVG Transformations Attribute and Terms

©2014 About.com. All rights reserved.