SVG in ODOO

responsive scaleable vector graphics animation

Sebastian Schiller

responsive SVG in ODOO
 

Why SVG?

ODOO runs fast as hell and if you use flash applications this fasteness could vanish! The solution or this problem could be SVGs (scaleable vector graphics). This graphics are small and resizable to any resolution. And they are creatable in the applications runtime. SVGs are animateable. You can create animations like you do with flash, but you don’t need any plugins to play the animation. For sure SVGs need a modern browser, but on mobile devices are not brwosers from grandfather anymore. And this is the next cool improvement, the SVGs and theire animations are reponsive. cool examples of transitions between svg icons you can see on http://alexk111.github.io/SVG-Morpheus/
 

Basic Implementation
 

Animation in SVG can be done through <animate> element

reload
<svg>
  <rect width="200" height="200" fill="slategrey">
    <animate attributeName="height" from="0" to="200" dur="3s"/>
  </rect>
</svg>

As you can see from the code snippet above, we add the <animate> inside the element that is going to affected. This <animate> contains some of the following attributes.

attributeName: This attribute specifies which element’s attribute will be affected in the animation.

from: This attribute is optional, we can specify an exact value or leave it to let it start from where it was.

to: This attribute specifies the animation direction. Depending onthe specified value inattributeName, the results may vary. But in this example it will extend the height.

dur: This attribute specifies the animation duration. The value of this attribute is expressed inClock Value syntax For example, 02:33 represents 2 minutes and 33 seconds, while 3h is equal to 3 hours, but we don’t need that long so we specified the duration for just 3s or 3 seconds.

 

The same thing goes to <circle> element, but this time we target the circle’s radius attribute (r).

reload

<svg>
  <circle r="100" cx="100" cy="100" fill="slategrey">
    <animate attributeName="r" from="0" to="100" dur="3s"/>
  </circle>
</svg>

Moving Element
 

In moving SVG elements, we only need to target the element’s coordinate x and y.

reload
<svg>
  <rect x="0" y="0" width="200" height="200" fill="slategrey">
    <animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
  </rect>
</svg>

In the example above, we move the rectangle from 0 to 200 in 3 seconds, the rectangle will appear moving horizontally from the left to the right. Also, if you look carefully we also added another attribute to the <animate> element, namely fill.

fill attribute here is nothing to do with the background color like in the other SVG elements. This attribute specifies how the animation will act after the duration ends. In this example we freeze the affected element so it stays where the animation ends.

It also works similarly to the <circle> element, we can use cx or cy, like so:

reload
<svg>
  <circle r="100" cx="100" cy="100" fill="slategrey">
    <animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>
  </circle>
</svg>

Animate Multiple Attributes
 

So far, we only target one attribute to be animated, but it is also possible to animate more than one

reload
<svg>
  <circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">
    <animate attributeName="r" from="0" to="100" dur="3s"/>
    <animate attributeName="stroke-width" from="0" to="10" dur="7s"/>
  </circle>
</svg>

As you can see, it works in a similar way, only now we have two <animate> elements inside the <circle> to target the radius and the stroke width to be affected.

Following A Path
 

We can animate an element to follow a Path. Here is an example.

reload
<svg>
  <defs>
    <path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79    .047,166.19s68.095,38.572,107.144-18.095 c39.047-56.667,72.381-92.382,113.333-42.381    S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/>
  </defs>
  <circle r="15" cx="15" cy="15" fill="slategrey">
    <animateMotion dur="3s">
      <mpath xlink:href="#thepath"/>
    </animateMotion>
  </circle>
</svg>

The Path is better defined within a <defs> element, like shown above. In order for the element to follow the Path, we need to define the animation with <animateMotion> and link the path id with <mpath> element, as follows

Transformations
 

We can also use transformation like scale, translate and rotate for the Animation, and to do so we will use <animateTransform>

reload
<svg>
  <rect width="200" height="200" fill="slategrey">
    <animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>
  </rect>
</svg>

Transformations in SVG shares similar principles with CSS

SVGs and Javascript
 

We are able to manipulate svg objects with javascript, the example below is a scg with an inline javascript code, that means we include the script in the SVG file and only loading the SVG as an object. We have to create a separate script tag inside the SVG and fill it like that

<script>
  <![CDATA[
    function init(evt) {
      if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument;
    }
    var timerFunction = null;
    function startAnimation() {
      if(timerFunction == null) {
        timerFunction = setInterval(animate, 20);
      }
    }
    function stopAnimation() {
      if(timerFunction != null){
        clearInterval(timerFunction);
        timerFunction = null;
      }
    }
    function animate() {
      var circle = document.getElementById("circle1");
      var x = circle.getAttribute("cx");
      var newX = 2 + parseInt(x);
      if(newX > 500) {
        newX = 20;
      }
      circle.setAttribute("cx", newX);
    }
  ]]>
</script>

the script is starting the animation and stopping it too. Also its incrementing the position of the circle svg by 2. Now we can test the script in the example below. Just "start" and "stop" the animation by clicking on the buttons

StartStop {C}{C}{C}{C}{C}{C}{C} {C} {C}{C} {C}{C}{C} {C}{C}{C}{C} {C}{C}{C}{C}{C} {C}{C}{C}{C}{C}{C}

as you can see, with simple methods your are able to animate svg objects, and your are able to make your website looking more fancy and cool. Just convert your favorite image into SVG (e.g. with Photoshop, GIMP or any program you prefer) and try to manipulate the object with javascript or standard SVG animation or transform tags.

another example that shows the possibilities of javascript combined with event handlers. Just try it!

Draw path

they are some libraries to help us with creating animations through javascript. The most common is http://raphaeljs.com .On this website we got some really cool examples what you can do with SVGs. This library is created to support older browsers too (e.g. IE 6). Another cool library is the http://snapsvg.io . This library is created for modern browsers and inlcuded functions like masking, clipping, patterns, full gradients, groups, and more. SNAP makes working with your SVG assets as easy as jQuery.

a last cool example is the drawing of the logo from our company

reload