SVG images can be modified programmatically by ecmascript (javascript norm) loaded with the web page. So it is possible to declare flat SVG paths and then add a third dimension to them with javascript.

I developped a javascript API in order to be able to :

  • read a 2 or 3 dimensions declared SVG path.
  • apply transformations, rotations or translations, on it.
  • declare increments on the parameters of those transformations in order to make it move in a 3 dimensional space.

Examples

Make your own

You can create your own SVG 3D icon for 0.5 USD. In order to do that, you will have to fill that form :

form to fill for SVG 3d icon creation

More explanations on the different parameters to fill can be found below, inside Explanation. You will have all the time needed and indefinite number of tries to make your creation.

That functionality has been tested with Firefox 3, javascript enabled, please use it to be sure everything will work.

Ready to buy ?

Benefits

I found several javascript APIs for SVG on the web but in general they create everything from scratch in a programmatic way. Here I use the SVG elements declared in the page and I modify it, without dynamically creating new markups. The form displayed above is generated from a schema published there. The schema of the declaration of the transformations is there.

I think that is a better approach that the SVG stays visible in the web page, and declared (not programmed) as if it was usual 2D SVG elements.

Increments of the different transformations parameters are applied directly on the markups. That way, those values stay visible, and it is possible to create more complicated animations modifying those parameters with additional javascript, applied directly on the DOM.

Explanation

First step is to parse the actual declared SVG. That is done by svg3d_parsing.js. Then an interval timer is set which will trigger the method transform() every 50ms (value by default).

The transform() method will parse the transformations declared and apply them on the original path declaration ("d" attribute). The new coordinates, result of the transformation, are not taken in account in the following step, that way the algorithm is more robust and it does not keep long decimal numbers resulting from the calculations. Transformations are applied from last to the first. That may be changed in the future.

Attributes available on <g> element (I am not sure getAttributeNS is supported by browsers so prefix of those attributes is hardcoded to "z:") :

  • z:focalDistance, defines the distance from the observer to the screen.
  • z:zRatio, I use it in order to reduce value of z coordinates, that way the image is not too much distorted.
  • z:xOrigin, defines the x coordinate of the center of the axes, after projection on screen. Rotations are applied around (0,0,0) point so that may be useful to translate the image after transformation.
  • z:yOrigin, defines the y coordinate of the center of the axes, after projection on screen.
  • z:rotationTime, defines the interval time between two transformations, in miliseconds.
  • z:sortAlgo, which allows you to choose which sorting algorithm will be used, depending on the image and performance needed, see Ordering SVG.
  • z:showDirectorVector, for debugging purposes, will display the calculated director vectors of each SVG face.

Attributes available on <path> elements (same way, the prefix is hardcoded to "z:") :

  • z:threeD="true", tells the parser whether coordinates are declared in 3 dimensions or not.

Transformations available inside <path> elements (I am not sure getElementsByTagNameNS is supported by all browsers, so only the localname of the markups is read) :

  • rotation, with attributes (no prefix on those attributes) :
    • rotX and incRotX, defines the initial rotation angle in radian around x axe and its increment.
    • rotY and incRotY, defines the initial rotation angle in radian around y axe and its increment.
    • rotZ and incRotZ, defines the initial rotation angle in radian around z axe and its increment. The z axe is directed to the back of the screen.
  • translation, with attributes (no prefix on those attributes) :
    • x and incX, defines the initial x coordinate of the translation and its increment.
    • y and incY, defines the initial y coordinate of the translation and its increment.
    • z and incZ, defines the initial z coordinate of the translation and its increment. The z axe is directed to the back of the screen.
  • optimizedrotation, that is a way to declare directly the values of cosinus, sinus, which will be used in rotation matrix. That is useful when declaring a Pi or Pi/2 rotation, which will result as 1, or 0 as values in the matrix. The attributes allowed are (no prefix on those attributes) :
    • cosX and incCosX, defines the value of the cosinus of the rotation angle around x axe, and its increment.
    • cosY and incCosY, defines the value of the cosinus of the rotation angle around y axe, and its increment.
    • cosZ and incCosZ, defines the value of the cosinus of the rotation angle around z axe, and its increment.
    • sinX and incSinX, defines the value of the sinus of the rotation angle around x axe, and its increment.
    • sinY and incSinY, defines the value of the sinus of the rotation angle around y axe, and its increment.
    • sinZ and incSinZ, defines the value of the sinus of the rotation angle around z axe, and its increment.

Participation

All those developments are released under Cecill licence.

The project Forms Generator is available on a svn, contact me for more information. In the future, a project might be created on sourceforge.

Projects svg 3d, XSD to RelaxNG converter, javascript SAX parser, javascript RelaxNG validator, javascript datatype library are published on Google code. Project javascript SAX parser is also published on Github.

Requirements

In order to have javascript working as expected, please use last version of firefox.

For the applets, you will need to have java installed on your computer.