Category:SVG simplification by transforming

Category:SVG simplification techniques#%20T
Time example

An SVG file without any transformation 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.[clarification needed]

    <?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:

Easy calculation

The drawing is reduced to a very simple calculation.

  • 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

Pages in category "Category:SVG simplification by transforming"

Category:Hidden categories Category:SVG simplification techniques