SVG Animations

SVG Animations

SVG Animations

One of the coolest feature of svg elements is they capacity to be vivified effectively with the movement elements. SVG illustrations can be enlivened utilizing liveliness elements. The liveliness elements were at first characterized in the SMIL Animation particular.

The animation elements are:

• animate
• set
• animateMotion
• animateColor
• animateTransform

<animate> - which permits you to invigorate scalar attributes and properties throughout some undefined time frame.

<set> - which is a helpful shorthand for vivify, which is valuable for doling out activity esteems to non-numeric attributes and properties, like the perceivability property.

<animateMotion> - which moves an element along a movement path.

<animateColor> - which adjusts the color worth of specific attributes or properties after some time. Note that the <animateColor> element has been censured for basically utilizing the quicken element to target properties that can take color esteems. Despite the fact that it's actually present in the SVG 1.1 particular, it is obviously noticed that it has been expostulated; and it has been totally eliminated from the SVG 2 determination.

<animateColor> recently used to animate the fill of an element yet it's utilization is expostulated since <set> and <animate> can deal with color based movements.

<animateTransform> – permits you to energize one of SVG's change attributes after some time, for example, the change attribute.

Animation Attributes

• xlink:href - The xlink:href attribute is used to identify the element which is to be animated by means of id.
  If this attribute is not specified, the element to be animated will be the immediate parent element of the animation element.
• attributeName - It is used to specify the name of the target attribute of the element to apply the animation.
• attributeType - It is used to specify the namespace in which the target attribute and its associated values are defined.
  Values: CSS, XML, auto;
  The values are case-sensitive and the default value is auto.
• begin - It is used to specify when the animation should begin. This attribute accepts any one of the value lists.
• end - Defines an end value for the animation that can constrain the active duration. This attribute accepts any one of the value lists.
• min - It is used to specify the minimum value of the active duration.
  Values: clock-value | mean;
• max - It is used to specify the maximum value of the active duration.
  Values: clock-value | mean;
• from - It specifies the starting value of the animation.
• to - It specifies the ending value of the animation.
• by - It specifies a relative offset value for the animation.
• dur - Accepts any one of the clock-values used to specify the duration of the animation.
• repeatCount - Specifies the number of iterations of the animation function.
  Values: numeric value, "indefinite"(The animation will repeat forever).
• repeatDur - Specifies the total duration for repeat.
  Values: value lists, indefinite(default).
• fill - Specifies the position of the element after the animation.
  Values: freeze, remove;
  The default value for the fill attribute is remove.
• calcMode - Specifies the interpolation mode for the animation. This can take any of the following
  values: discrete, linear, paced, spline;
  The default mode is 'linear', however if the attribute does not support linear interpolation (e.g. for strings), the calcMode attribute is ignored and discrete interpolation mode is used.
• restart - Specifies how to restart the animation.
  Values: always, whenNotActive, never;
  The default value is always.
• values - Specifies a semi-colon seperated list of values for use on the keyTimes and keySplines attribute.
• keyTimes - Accepts a semicolon-separated list of time values used to control the pacing of the animation.
  Each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation function.
  Each time value in the keyTimes list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the simple duration of the animation element.
  For animations specified with a values list, the keyTimes attribute if specified must have exactly as many values as there are in the values attribute.
  For from/to/by animations, the keyTimes attribute if specified must have two values.
• keySplines - A set of Bézier control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing.
  The attribute value is a semicolon-separated list of control point descriptions.
  Each control point description is a set of four values: x1 y1 x2 y2, describing the Bézier control points for one time segment.
  The keyTimes values that define the associated segment are the Bézier anchor points, and the keySplinesvalues are the control points. Thus, there must be one fewer sets of control points than there are keyTimes.
  Just like keyTimes, the values must all be in the range 0 to 1.
• additive
  Controls whether or not the animation is additive.
  Values:
  sum(Animation will add to the underlying value of the attribute and other lower priority animations).
  replace(Animation will override the underlying value of the attribute and other lower priority animations).
  The default value for additive is replace.
• accumulate
  Controls whether or not the animation is cumulative.
  Values:
  sum(Specifies that each repeat iteration after the first builds upon the last value of the previous iteration).
  none(Specifies that repeat iterations are not cumulative).
  The default value for accumulate is none.

SVG permits the two attributes and properties to be energized. On the off chance that a given attribute or property is inheritable by relatives, activities on a parent element, for example, a 'g' element engenders the attribute or property liveliness esteems to relative elements as the movement continues; subsequently, relative elements can acquire vivified attributes and properties from their ancestors.

Values List

Here is a list of values that are use in animation attributes.

• clock-value - Clock values are values based on real time.
  The following is the grammer for clock-value.
  clock-val = Full-clock-val | Partial-clock-val | Timecount-val,
  where:
  Full-clock-val is of this format (Hours : Minutes : Seconds),
  Partial-clock-val is of this format (Minutes : Seconds),
  Timecount-val accepts a numeric value with any one of these suffix(es): "h" for hours, "min" for minutes, "s" for seconds, "ms" for milliseconds.
  For Timecount values, the default metric suffix is "s" (for seconds).
  The following are examples of legal clock values:
  Full clock values: 01:02:03 = 1 hour, 2 minutes and 3 seconds.
  Partial clock value: 01:02 = 1 minute and 3 seconds
  Timecount values:
  1h = 1 hour
  2min = 2 minutes
  3s = 3 seconds
  4ms = 4 milliseconds
  0.1234 = 123.4 milliseconds
• offset-value - Accepts a clock-value used to describe the element begin as an offset from the document begin.
  Negative begin times are entirely valid and easy to compute, as long as there is a resolved document begin time.
  Eg: offset-value = "±5s".
• syncbase-value - Describes a syncbase and an optional offset from that syncbase.
  The element begin is defined relative to the begin or active end of another animation.
  A syncbase consists of an ID reference to another animation element followed by either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element.
  Eg: syncbase-value = "begin ±3s".
• event-value - Describes an event and an optional offset that determine the element begin.
  The animation begin is defined relative to the time that the event is raised.
  Eg: event-value = "click ±2s".
• repeat-value - Describes a qualified repeat event.
  The element begin is defined relative to the time that the repeat event is raised with the specified iteration value.
  Eg: repeat-value = "repeat(4) ±6s".
• accessKey-value - Describes an accessKey that determines the element begin.
  The element begin is defined relative to the time that the accessKey character is input by the user.
  Eg: accessKey-value = "accessKey(K) ±3s". Once the "K" keyboard key is pressed, the animation will be fired.
• wallclock-sync-value - Describes the element begin as a real-world clock time.
  The wallclock time syntax is based upon syntax defined in Representation of dates and times [ISO8601].
  Eg: wallclock-sync-value = "wallclock(11:30:05 AM)".
• indefinite - Specifies that the begin of the animation will be determined by a beginElement() method call or a hyperlink targeted to the element.

SVG's movement elements were created as a team with the W3C Synchronized Multimedia (SYMM) Working Group, designers of the Synchronized Multimedia Integration Language (SMIL)
Just not many of the svg elements can't be energized. An illustration of such element is the <defs>, <desc> and so forth.

<animate>

The energize SVG element is utilized to animate a single attribute or property over time. This element acknowledges the movement attributes. The below example tells the best way to make a path element change it's shape after some time.

Example Code

Note the path picked by the activity and furthermore notice that thei start was set to 5s = with a full-clock-value.

You can also set the start access Key to any key that you need and the liveliness start will be set off once the key is squeezed. Note that accessKey isn't upheld in some program renditions.

<animateTransform>

The animateTransform SVG element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.

This element accepts the animation attributes and the type attribute which is used to specify the type of transformation which is to have its values change over time. If the attribute is not specified, then the effect is as if a value of translate were specified. The "type" attribute accepts any one of these values: translate | scale | rotate | skewX | skewY.

Example Code

The following example shows how to make a scaling circle element.

The <animateTransform> animation element can also be used to rotate an svg drawing. Note that the small black <circle> was used to represent the center of rotation.

<set>

The set SVG element is used for setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. This element is non-additive. The additive and accumulate attributes are not allowed, and will be ignored if specified.

Example Code

The following example shows how to change the fill of a rectangle with <set>.

With <set> the fill immediately changes to red after 2s without being animated but with <animate> it will follow an opacity defined mode of animation.

As you can see in the above examples, the set element does'nt animate a property rather it changes/sets the value of a property overtime.

<animateMotion>

The animateMotion SVG element is used to move a referenced element along a motion path.

<animateMotion> Elements

mpath

The mpath element is used to define the motion path for the <animateMotion>element. It accepts the xlink:href attribute used to reference the <path> to use.

This element is only applicable if the path attribute of <animateMotion> was not specified. We want the green circle to move along the path.

Example Code

The below code shows how to achieve that with <animateMotion>.

In the above code, the cx and cy attributes of <circle> was defined by the cordinates of the <path> overtime.

Alternatively, the "path" attribute of <animateMotion> can also be used to directly define the motion path for the referenced element eg:

If the "path" attribute is defined, then they will be no need for the <mpath> element.

For Output

Output is not available for now in SVG Tutorial, so please copy code which you want to see the output & Try our CTLive HTML Editor

Conclusion

Try learning these elements, we will post more about SVG Animations in the future posts.