Animación SVG - ¿Como se hace?

La respuesta rapida es no.Desde que murio flash no hay ninguna herramienta "diseñador friendly" para animar, (mas alla de los gifs), y menos aun que permita interacción.
Ni siquiera la exportacion a html 5 desde flash funciona correctamente y hay problemas de incompatibilidad con otros js, si pones mas dedos animaciones en la misma pagina peta, etc.

Como dices, este tipo de animaciones suelen ser una combinación de csss3, jquey, javascript y librerias particulares que normalmente son bastante dificiles de programar si no conoces bien javascript.
Si quieres cosas sencillas puedes juguetear con la exportacion html de flash, o el convertidor de flash a html 5 que esta en:
https://developers.google.com/swiffy/

O si conoces un poco de javascript, jugar con la clase .animate() de jquery.

Gracias por tu respuesta @montaycabe, veré lo que me indicas.

Entornos de animación específicos de SVG no conozco realmente pero no vas muy desencaminado con lo de snap.svg. Creo que mejoraba su rendimiento en combinación con Velocity pero ahora no recuerdo bien > http://julian.com/research/velocity/

Tienes algunos entornos mas "user friendly" como Hype 3 (http://tumult.com/hype/), el Edge Animate de Adobe...

La verdad es que al ver el gráfico que ponías de ejemplo pensé claramente en Lazy Line Painter pero no sé si encajará con lo que buscas > http://lazylinepainter.info/ Yo lo he usado en alguna ocasión para hacer pruebas de animaciones simples > https://dribbble.com/shots/1371403-MSA-SVG-Anim-test-GIF y es bastante sencillote.

SAludos!

Que bien @skeku, me diste bastante para investigar, gracias por tu respuesta.

Buenas,

Lo que tu buscas se llama SVG Drawing, y antes de nada comentarte que para implementar este tipo de animaciones mínimo tienes que controlar un poco de javascript. La web que nombras está desarrollada en Laravel por lo que ya te contaré si controlan ésos.
Hay muchos tipos de animaciones SVG, nosotros en concreto utilizamos una, puedes verlo aquí: http://www.zeybix.com/proyecto/desarrollo-web-iligraf
No es la misma que la web de tu ejemplo pero es una animación svg, ésa en concreto la puedes encontrar aquí:
http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/
Tendrías que cogerla e implementarla en tu web para que funcione correctamente.

Ahora mismo no recuerdo donde lo vi pero hay programas con los cuales tu les das una imagen y te devuelve un mapa de coordenadas para el dibujado en la web, por lo que con el mapa y javascript puedes realizar ése tipo de animaciones a medida.

De todas formas si lo que quieres es eso en concreto no te lies, busca en internet que ya estará hecho solo tienes que estudiar como lo hace e implementarlo.

Espero te sirva de algo la info.

Un saludo.

Excelente, gracias @zeybix

https://maxwellito.github.io/vivus/

Ale ya lo tienes, solo queda sincronizarlo con el scroll.

@microbians CREMA! Tengo que echarle un vistazo pero parece más amistoso que el Lazy Line Painter y trae algún extra.

De hecho lo que comentáis del scroll ya os lo ofrece pues tiene una opción de que se lance la animación cuando el svg "entre" en el viewport.

Recurso joyita!

@microbians Muy bueno , tambien se puede hacer con css una animacion simple aqui tienes algun ejemplo en codepen.

Ejemplo #1

Este lo hice yo en Javascript para animar el stroke .
Ejemplo #2

En Codepen hay mucho y algunos muy buenos , echale un ojo.