A set of custom SVG-SMIL snippets for Sublime Text 2/3

Install Package Control for Sublime

SVG-SMIL-Snippets in sublime.wbond

SVG-Snippets in sublime.wbond

GitHub

SVG animation with SMIL

SVG-X animation with SMIL

Type the snippet shortcode and then press Tab to complete the snippet.

The snippets are listed below in alphabetical order. The '$1' indicates the position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little hard to explain, but any snippet that has a `$1/$2/$3/etc. uses this technique.

I like better use <animate attributeName="x" values="100; 200".... instead of <animate attributeName="x" from="100" to="200"....""

animapath

  <animate attributeName="d" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animafill

  <animate attributeName="fill" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animahe

  <animate attributeName="height" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animalinex1

  <animate attributeName="x1" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animalinex2

  <animate attributeName="x2" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animaliney1

  <animate attributeName="y1" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animaliney2

  <animate attributeName="y2" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animamotionmpath

  <animateMotion dur="$1" repeatCount="$2" rotate="$3">
        <mpath xlink:href="$4"/>
</animateMotion>

animamotionpath

  <animateMotion path="$1" begin="$2" dur="$3" calcMode="$4" keyPoints="$5" rotate="$6" fill="$7"/>

animamotionvalues

  <animateMotion values="$1" begin="$2" dur="$3" calcMode="$4" keyPoints="$5" rotate="$6" fill="$7"/>

animaopa

  <animate attributeName="fill-opacity" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animapoints

  <animate attributeName="points" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animaradius

  <animate attributeName="r" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animarx

  <animate attributeName="rx" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animastroke

  <animate attributeName="stroke" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animastrokedash

  <animate attributeName="stroke-dasharray" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animastrokeoff

  <animate attributeName="stroke-dashoffset" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animastrokelinejoin

  <animate attributeName="stroke-line-join" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animastrokeopa

  <animate attributeName="stroke-opacity" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animastrokewi

  <animate attributeName="stroke-width" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>```

###animarotate

```html
<animateTransform attributeName="transform" type="rotate" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animascale

  <animateTransform attributeName="transform" type="scale" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animaskewx

  <animateTransform attributeName="transform" type="skewX" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animaskewy

  <animateTransform attributeName="transform" type="skewY" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animatranslate

  <animateTransform attributeName="transform" type="translate" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animaview

  <animate attributeName="viewbox" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animawi

  <animate attributeName="width" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animax

  <animate attributeName="x" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>

animay

  <animate attributeName="y" values="$1" begin="$2" dur="$3" calcMode="$4" keyTimes="$5" fill="$6"/>


3,731 0 8