Category:SVG simplification by transforming

An SVG drawing without any ttansformation is always smaller, and better readable, than one containing transformations.
But transformations have not only advantages for cloning, they can e.g. be used in a drawing template.

The clock "5 before 12" contains both hands ready for any transformation, by just altering the degrees
every one of the 720 minutes of twelve hours can be drawn within seconds.

    <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"
    stroke="#000" stroke-width="2" stroke-linecap="round">
    <path fill="none" d="m35,13a23,23 0,1,0 2,0z"/>
    <path transform="rotate(357.5 36,36)" d="m36,36V25"/>
    <path transform="rotate(330 36,36)" d="m36,36V19"/>
    </svg>

As can be seen from the code, the short "hour hand" is -2.5 degrees before twelve o'clock, and the longer "minute hand" -30 degrees.
Every other position, or time, or degree, can be set swiftly:

The drawing is reduced to a very simple calcultion.

• 1 hour is a full rotation of the "minute hand",

• each minute is 360/60 = 6°

• 12 hours are a full rotation of the "hour hand",

• one hour means 360/12 = 30°, 1 minute is 30/60 = a half degree

For the above example '5 before 12' the minute is at 360-30 degrees, the hour 360-2.5