1. Computing

Discuss in my forum

How to Use Scale in SVG

SVG Scale Function

By

Scale is the transformation function that changes the size of a graphic. Learning how to use scale in SVG allows you to expand or contract the image. This is useful when displaying a premade image or during an animation. Scale is listed as a numerical factor value for the x-axis.

About Scale

Scale is a straightforward theory. If you have a graphic you want to display twice as large, you create a scale transformation. This can be done to show a static image or as part of an animation. Scale does not just work in one direction. Images can be made smaller as well as larger. To maintain the aspect ratio, you enter one value for the x-axis and the y measurement defaults to the same number. If you want the structure to change along both the x and y-axis, you record two values.

Scale Syntax

Like all transformation functions, scale begins with the attribute transform.

transform="scale(2)"

This sample code will enlarge the image by a factor of two maintaining the aspect ratio. In other words, both the width and height will grow to prevent distortion of the graphic. If you want to change both the width and height sizes, you present two different values using a comma to individualize each one. The x, or width, value is always first. A 0 denotes no change in the width even if you change the height, or y value.

transform="scale(2,4)"
transform="scale(0,2)"

The second line of code will stretch the image along the y-axis, but leave the x-axis sizing intact. To diminish the image, or make it smaller, you list a decimal factor. For example, if you want to reduce the image by half, you use .50 as you value.

transform="scale(.50)"
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. XML
  5. Specifications
  6. SVG
  7. SVG Animation
  8. SVG Scale Function Tutorial

©2014 About.com. All rights reserved.