Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

SVG Example Code to Scale Elements

<svg width="340" height="350" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border-style:solid;">
   <rect x="50" y="50" width="100" height="100" stroke="#000" fill="red" />
   <rect x="50" y="50" width="100" height="100" stroke="#000" fill="green" transform="scale(0.5)" />
   <rect x="50" y="50" width="100" height="100" stroke="#000" fill="blue" transform="scale(2)" />

   <rect x="50" y="50" width="100" height="100" stroke="#000" fill="yellow" transform="scale(0.5 2)" />
</svg>

The scale transform changes the size of an element. The syntax of the scale transform is shown below.

transform="scale(x, y)"

scale takes two parameters, the factor by which to scale the element on the x axis, and the factor by which to scale the element on the y axis. If one parameter is omitted, then both axis will be scaled by the single factor provided. The factors are interpreted as the ratio of the transformed dimension to the original. For example, 0.5 shrinks the axis by 50%.

In the example shown above, all squares have the same x and y axis locations and the same width and height dimensions. The red square has no transform applied. The green square uses the scale transform with a single parameter of 0.5. Note that not only does the scale parameter scale the element, it also scales the position of the element. In other words, the green square can be considered to be on its own layer with axis scaled to 0.5.

The blue square uses the scale transform with a single parameter of 2. Note again that the scale parameter scales the position of the element. The yellow square uses the scale transform with a parameter of 0.5 for the x axis and 2 for the y axis. Note that not only is the location of the element scaled, but the width's of the borders are also scaled.

More Graphics Design Tips:
• SVG Basic Shapes Tutorials
• How to Install the Free, Open-Source, Blender 3D Animation Application
• The Browser Safe Palette
• How to Create a Product Box in Photoshop
• Inkscape - Free Vector Graphics Illustration Package
• How to Create a Simple Video with Windows Movie Maker
• Free Replacement for Overpriced Photoshop
• Inscape Text in a Shape
• SVG Code for Outlined Letters Text
• Tips and Tricks for Getting Free Images

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2019 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268