We need more traffic. Please use the social buttons above to spread the word!

SVG Tutorial

Pike's 3D SVG Cube

3D SVG Cube Explanation

SVG has no 3D support. In fact, it is almost anti-3D. SVG assumes once an object is declared it will remain layered in the same position. This makes sense for a static SVG image. It saves on memory, speeds up the rendering a bit and in general simplifies the SVG viewer.

As far as 3D calculations are concerned there are no shortcuts or tricks used in this SVG example. Like in every 3D application the vertices for the cube are calculated for each frame. The JavaScript then takes those values and updates the position of the polygons of the cube. The trick is that of the 6 predefined polygons are used and the closest cube face is chosen to be polygon which renders on top of all the others. Surprisingly, this works quite well.

Could this idea be extended to render larger scenes? Possibly. It should be possible by dynamically creating the polygons based on demand to create a small generic 3D engine. Animation would likely prove impossible for more polygons than around 20 on lower end systems. Provided that animation isn't required then scenes of 200+ polygons could be rendered and adding flat light shading would be possible as well. More advanced shading methods would be impossible as SVG doesn't provide a way to specify color interpolation from vertices.

Source code may be freely downloaded and examined.

Related Topics