Title of the slide: "SVG Transformation example"

A set of transformed ducks, each labelled with the corresponding transformation sequences. The original image is in the middle.

Information on #SlideContent

The collection of all the transformation examples

• The object contains:
• the object "#Original (The original duck, without any transformation)"
• the object "#simpleTranslate (A simple translation)"
• the object "#scaleAndTranslate (A scaling first then a translation)"
• the object "#rotateAndTranslate (A rotation before a translation)"
• the object "#scaleSkewXTranslate (A scale, followed by a skew in X and a translation)"
• the object "#scaleSkewYTranslate (A scale, followed by a skew in Y and a translation)"
• the object "#Matrix (An example when a general matrix is used)"

Information on #duck

The generic duck drawing

• The object is a symbol definition

Information on #Original

The original duck, without any transformation

• The object is an instance of the predefined symbol "#duck"
• The object is labelled by: "<svg viewBox="0 0 300 200">"
• The object is in the middle of the full canvas

Information on #simpleTranslate

A simple translation

• The object is:
• an instance of the predefined symbol "#duck"
• the transformation "translate(200,190)" is applied
• The object is labelled by: "<g transform="translate(200,190)">"
• The object is positioned:
• relative to the object "#Original"
• at south-east of the referred object

Information on #scaleAndTranslate

A scaling first then a translation

• The object is:
• an instance of the predefined symbol "#duck"
• the transformation "translate(-300,-200) scale(1.5,0.5) " is applied
• The object is labelled by:
• "<g transform="translate(-300,-200)">"
• "<g transform="scale(1.5,0.5)">"
• The object is positioned:
• relative to the object "#Original"
• at north north-west of the referred object

Information on #rotateAndTranslate

A rotation before a translation

• The object is:
• an instance of the predefined symbol "#duck"
• the transformation "translate(500,-150) rotate(30)" is applied
• The object is labelled by:
• "<g transform="translate(500,-150)">"
• "<g transform="rotate(30)">"
• The object is positioned:
• relative to the object "#Original"
• at east of the referred object

Information on #scaleSkewXTranslate

A scale, followed by a skew in X and a translation

• The object is:
• an instance of the predefined symbol "#duck"
• the transformation "translate(160,-250) skewX(50)" is applied
• The object is labelled by:
• "<g transform="translate(160,-250)">"
• "<g transform="skewX(50)">"
• "<g transform="scale(0.5)">"
• The object is positioned:
• relative to the object "#Original"
• at north north-east of the referred object

Information on #scaleSkewYTranslate

A scale, followed by a skew in Y and a translation

• The object is:
• an instance of the predefined symbol "#duck"
• the transformation "translate(500,-250) skewY(30)" is applied
• The object is labelled by:
• "<g transform="translate(500,-250)">"
• "<g transform="skewY(30)">"
• "<g transform="scale(0.5)">"
• The object is positioned:
• relative to the object "#Original"
• at north-east of the referred object

Information on #Matrix

An example when a general matrix is used

• The object is:
• an instance of the predefined symbol "#duck"
• the transformation "matrix(.9 .3 .3 .8 -320 100) scale(0.9)" is applied
• The object is labelled by:
• "<g transform="matrix(.9 .3 .3 .8 -320 100)">"
• "<g transform="scale(0.9)">"
• The object is positioned:
• relative to the object "#Original"
• at south-west of the referred object