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

About BTH User Agreement Privacy Site Map Contact News Feeds

SVG Example Code to Skew Elements

By Stephen Bucaro

SVG Example Code to Skew Elements

<svg width="240" height="280" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border-style:solid;">
   <rect x="10" y="10" width="80" height="80" stroke="#000" fill="red" transform="skewX(45)" />
   <rect x="10" y="100" width="80" height="80" stroke="#000" fill="green" transform="skewY(45)" />
</svg>

To skew means to slant at an angle. With SVG you can skew the x-axis or the y-axis. To skew the x-axis, use the skewX(a) transform. To skew the y-axis, use the skewY(a) transform. In either case you would provide as a parameter the angle in degrees to skew. The syntax of the skew transform is shown below.

transform="skewX(a)"

transform="skewY(a)"

In experimenting with the skew tramsforms, I find that an element skewed along one axis greatly effects the location of an element skewed along another axis on the same canvas. I don't know the reason for this, but upon inspection of code generated by inkscape for placing oppositely skewed elements on the same page, it uses the matrix transform instead.

More Graphics Design Tips:
• Inkscape - How to Join Two Segments at Endnodes
• Inkscape Text Kerning
• Graphics Design for Beginners - Cropping Images
• Inkscape - How to Use Bitmap Image Fill Pattern
• Inkscape Grouping
• Image Processing Filters - How to Sharpen a Photograph
• Inkscape Shadows and Highlights
• Beginning GIMP: From Novice to Professional
• What is the Pantone Color System?
• Paint.Net Ink Sketch, Oil Painting, and Pencil Sketch Artistic Effects