Achieving 3D Effects with SVG

For the SVG Open 2008 conference

Dr. Jun Fujisawa

Manager
Canon Inc.


              3-30-2 Shimomaruko
              Ohta-ku
              Tokyo
              146-8501
              Japan
              +81-3-3758-2111
            

Mr. Anthony Grasso

Software Engineer
Canon Information Systems Research Australia Pty. Ltd.


              3 Thomas Holt Drive
              North Ryde
              NSW
              2113
              Australia
              +612 8873 8821
            


Abstract


SVG Tiny 1.2 as a stand alone specification is very useful for simple 2D vector drawings and animations. However, by itself can produce limited psuedo 3D effects (aka 2.5D).

2.5D user interfaces are becoming increasingly popular on both consumer devices and personal computers. With the enhancement of the Filters, Compositing and Transformations module, SVG Tiny 1.2 can be used to produce graphically rich 2.5D interfaces.

The SVG Filters Module allows a series of graphical operations to be applied to a given bitmap to produce a modified result. The SVG Compositing module extends the Simple Alpha Compositing model in SVG Tiny 1.2. The Compositing module allows layered objects to be combined together in a variety of ways to produce different effects. The proposed Transformations module will allow vector paths to be transformed to give a perspective effect on an object.


Table of Contents

Introduction
SVG and User Interfaces
2.5D Effects
Virtual Light Sources
Projections
Using SVG for a 2.5D user interface
Creating virtual lighting effects
Creating virtual lighting effects using future features
Creating perspective effects
Creating perspective effects using future features
Bibliography

2.5D effects allow a 2D object to appear to be viewed in 3D space. Such effects can draw the attention of the viewer and create a better user experience when applied to user interfaces. Currently user interfaces are in a transition from a 2D appearance to a 3D appearance. The rapid advancements in mobile graphics hardware have lead to the adoption of graphically rich 2.5D user interfaces on portable devices.

The idea of using SVG for user interfaces is becoming increasingly popular for portable device vendors. The scalability of SVG allows a single GUI (Graphical User Interface) to be used on different devices of different screen sizes and resolutions. SVG Tiny 1.2 as a stand alone specification is very useful for 2D vector drawings and animations. However, by itself it can produce limited pseudo 3D effects (aka 2.5D).

The gradient feature is one that can be applied to an object to give the it 3D appearance on a UI. With the enhancement of the Filters, Compositing and Transformations module, SVG Tiny 1.2 can be used to produce graphically rich 2.5D interfaces.

This paper will provide overviews and examples of how SVG Tiny 1.2 and various modules can be used to produce 2.5D UI effects.

SVG has always been recognized as a graphical standard for the internet and web applications. In the past few years mobile vendors have recognized the standard to also be suitable for mobile devices and as result SVG is now being recognized also as a standard for GUIs (Graphical User Interfaces).

There are several benefits to using SVG for a GUI. These include:

  • Allowing easier customization of interfaces. End users can begiven the opportunity to customize their interface easily.

  • Less development time required to create the GUI. Potentially less work required by the designer to create the GUI.

  • Independent scalability for different sized displays. A GUI that was made for a small device can easily be used and scaled on a larger device. Allowing for reusability of GUIs and widgets.

Hardware developments in recent years have allowed for SVG Tiny 1.2 User Agents to be implemented embedded platform. These developments have made SVG a more viable solution for GUIs.

2.5D (pronounced two-and-a-half dimensional) also known as pseudo-3D is an informal term used to describe observations which are considered "between" 2D and 3D.

The concept is typically associated with computer graphics where 2D graphics are used by computer systems to visual simulate 3D computer graphics. Instead of using “real” 3D computer graphics the computer system can modify the 2D graphics to simulate a third dimension. This technique is commonly used in systems that are not powerful enough to handle the calculation intensive routines of 3D computer graphics.

2.5D user interfaces are becoming increasingly popular on both consumer devices and personal computers. One reason is pseudo-3D graphics are very quick to author and require fewer resources to develop.

Another reason for using 2.5D effects is that it is easier to perceive the environment that the objects exist in which allows a user to understand the relationship between themselves and how to interact with the object or graphic.

For these reasons a range of 2.5D effects are commonly used to form the GUIs of portable devices.

Pseudo 3D effects can be created by the presence of a virtual light source on an object or a group of objects. Such an effect is illustrated bellow in Figure 1.


In Figure 1 a spherical marble surface is created with the illusion of a lighting source. The original object is a circle with a radial gradient fill centered towards the bottom of the circle. The virtual lighting source is created through the use of an ellipse that is composited on the top half of the circle. A second ellipse is used at the bottom of the circle to simulate the shadow the object makes with the surface. Techniques such as the one illustrate in Figure 1 can be used to simulate a virtual lighting source and its direction.

Care should be taken when applying lighting effects to ensure that the effects caused on an object by a virtual lighting source approximately correspond to one another. For example the shadow effect of the object in Figure 1 is not directly centered below the object because of the perceived angle of the virtual lighting source. To gain a better understand of how the virtual lighting source effects the object, an approximate 3D view of the scene needs to be examined. If the object in Figure 1 were a 3D object and the image shown in the figure were a front view, then a side view of the object may look similar to Figure 2.


The angle of the virtual lighting source in Figure 2 is roughly 45º with the light rays causing a lighting effect that illuminates the top half of the object. The light rays from the lighting source illuminate roughly the front top half of the object and causing a resultant shadow more towards the back of the object (towards positive infinity in the z direction). The virtual lighting source is closest towards the top of the object which is denoted by the light ray of the shortest length. The other light rays are further away from the lighting source and thus their intensity could be consider to be not as strong as the closest light ray. This concept is portrayed in the lighting effect by using a gradient fill that has a solid white color at the top and gradually fades away as it nears the middle of the object. The gradient fill also helps give the illusion of a round contour on the object.

The shape of the lighting effect also defines the contour and depth illusion of the object. Using an incorrect object shape can reduce or hinder complete the virtual lighting effect. An ellipse is deliberately chosen as it spreads across the top half of the circle and hence spreading the gradient fill across the top half of the circle. The shape of the lighting effect helps define the virtual lighting source position and direction, as well as the contour of the object.

Objects can be made to appear 3D by giving the illusion they have depth. Depth is given to an object by showing several faces of the object at once which is commonly known as object projection. There are several projection techniques; multiview (orthographic), axonometric, oblique and perspective. Of the four types of projections, the perspective projection gives the most realistic impression of depth. A perspective projection produces a similar view to the way the human eye perceives their environment. Despite being effectively a 2D graphic (or drawing) a perspective view provides information about the third dimension (depth) of the environment. The depth information of a perspective drawing gives the user a reasonable grasp on how objects in the environment relate to one another, and thus producing a 3D illusion as illustrated in Figure 3.


The edges that make up the objects in Figure 3 appear to converge at a point in the distance this creates the illusion of a 3D environment. A property of a perspective projection is parallel lines are not preserved for a least one dimension, hence vertical lines that define the road would normally be parallel in a non-perspective projection.

Another property of perspective projections that helps to convey information about objects in the environment is the size of each object in the projection. To gain a better understanding of how sizing is effected in a perspective projection, an approximate 3D view of the scene needs to be examined. If the object in Figure 3 were a 3D scene and the image shown in the figure were a front view, then partial side view of the scene may look similar to Figure 4.


The tree objects in Figure 4 are drawn at the same height, where as in the perspective projection (Figure 4.5) the tree objects decrease in size the closer they are to the converging point. The resizing and position of the tree objects in this way adds to the depth illusion in the scene. Such techniques can also be used to create an illusion of depth in a GUI.

The gradient feature of SVG Tiny 1.2 can be used to achieve a virtual lighting source effect on an object to producing a pseudo 3D effect.

Example 1 illustrates how simple virtual lighting effects can be achieved on an object by applying a second overlapping object containing a simple gradient fill. The second object that used to achieve the virtual lighting effect is highlighted in bold in the syntax below. Figure 5 illustrates the rendered output of Example 1.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- vitual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>
          

The strong white color used at the first stop of the linear gradient is positioned such that it is at the top of the button object. The gradient white slowly fades as the opacity of the gradient changes. This gives the illusion of a virtual lighting source shining down from above button object.

The color and chosen for the linear gradient is very close to sRGB white which gives the illusion that the virtual lighting source is closer or more intense. Colors closer to grey could be chosen to give the illusion of a weaker virtual lighting source.

The effect created by the gradient also gives the illusion that the button object has a smooth rounded surface.

The SVG Filters Module allows a series of graphical operations to be applied to a given bitmap to produce a modified result. The modified graphical result is rendered to the target device. Using a combination of the graphical operations, simple 2D objects can be enriched to appear 3D.

Note

Filter effects perform operations to the bitmap of a given graphical object (i.e. per pixel operations). For this reason Filter effects should be applied to graphical objects sparingly. Excessive usage of filter effects or a filter effect applied to a large area can greatly reduce the responsiveness of a UI particularly for low end devices.

Example 2 illustrates how simple virtual lighting effects can be achieved on an object through the use of filter effects. The example syntax below contains an feSpecularLighting effect that provides a lighting source from a particular point. The lighting source point is specified by x, y and z coordinates using the fePointLight filter. The combined filter effects are then applied to the object that forms the button. Figure 6 illustrates the rendered output of Example 2.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <!-- vitual lighting effect -->
    <filter id="virtual_light" filterUnits="objectBoundingBox"
      x="-0.1" y="-0.1" width="1.2" height="1.2">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="alpha_blur"/>
      <feSpecularLighting in="alpha_blur" surfaceScale="5" specularConstant="1"
        specularExponent="15" lighting-color="#FFFFFF" result="spec_light">
        <fePointLight x="75" y="-400" z="250"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spec_light" operator="out"/>
    </filter>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636" filter="url(#virtual_light)" />

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>
</svg>
          

The filter effect applied to the button object in Example 2 places highlights on the outer rim of the button. This effect gives the illusion that the button object has a smooth flat surface and protrudes slightly out from its surroundings.

Example 3 illustrates how simple virtual lighting effects can be achieved on an object through the use of filter effects. The example syntax below uses a similar filter effects as Example 02 to provide a lighting source. This example adds a drop shadow of the object using the feOffset effect. The net effect simulates a lighting source from the top left hand corner. Figure 7 illustrates the rendered output of Example 3.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#990000" offset="0"/>
      <stop stop-color="#770000" offset="0.67"/>
    </linearGradient>


    <filter id="virtual_light" filterUnits="objectBoundingBox"
      x="-0.1" y="-0.1" width="1.2" height="1.2">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="alpha_blur"/>

      <!-- virtual shadow effect -->
      <feOffset in="alpha_blur" dx="4" dy="4" result="offset_alpha_blur"/>

      <!-- vitual lighting effect -->
      <feSpecularLighting in="alpha_blur" surfaceScale="5" specularConstant="1"
        specularExponent="20" lighting-color="#FFFFFF" result="spec_light">
        <fePointLight x="-5000" y="-10000" z="10000"/>
      </feSpecularLighting>
      <feComposite in="spec_light" in2="SourceAlpha" operator="in"
        result="spec_light"/>
      <feComposite in="SourceGraphic" in2="spec_light"
        operator="out" result="spec_light_fill"/>

      <!-- combine effects -->
      <feMerge>
        <feMergeNode in="offset_alpha_blur"/>
        <feMergeNode in="spec_light_fill"/>
      </feMerge>
    </filter>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#360000" filter="url(#virtual_light)"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>
</svg>
          

The shadow filter effect applied to the object button in Example 3 is constructed independently to the lighting effect and is positioned such that it corresponds to the position of the lighting effect.

Care should be taken when positioning virtual lighting sources and shadow effects that are independent of one another. If the two effects do not correspond then net visually the effect will not make sense and the desired effect could be lost.

The new filters 1.2 module is currently in a first working drafted state and the compositing 1.2 module is currently being drafted. Both modules will contain features that can be used to created pseudo 3D effects for GUI. The following examples are of possible features that may become part of the new modules.

The SVG compositing module extends the Simple Alpha Compositing model in SVG Tiny 1.2. The compositing module allows layered objects to be combined together in a variety of ways to produce different effects. Objects can be combined using any of the 12 Porter-Duff compositing operations available or any of the 12 compositing blend modes available.

The compositing module fixes the issues of the compositing operations provided by feComposite effect in the filters module. The feComposite effect cannot easily use the background without the background being included twice in the filter operation.

Compositing operations require two objects (a graphical object and background or two graphical objects) to form a result. This can be cumbersome as it requires multiple graphical objects to be used to form an effect. However, compositing operations are useful for achieving certain effects between overlapping objects that are used to form another object. Additionally, composting operations can be used to achieve a lighting effect for a group of objects being used to create a widget or a marker object.

Note

Compositing operations are performed on the bitmap of the graphical object and the background (i.e. per pixel operations). For this reason compositing operations should be applied to UI graphical objects sparingly

Example 4 illustrates how simple virtual lighting effects can be achieved on an object using composition operations. The example syntax below uses a similar technique used in Example 1 where a secondary object is used to overlap a portion of the main object. The secondary object contains a simple gradient fill and is composited onto the main object using the comp-op attribute to achieve the virtual lighting effect. Figure 8 illustrates the rendered output of Example 4.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#888888" offset="0.4" stop-opacity="0.5"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- virtual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"
    comp-op="hard-light"/>
</svg>
          

Similar to Example 1, Example 4 uses a linear gradient to cover the top half of the button object. The gradient uses a color close to white as the first stop color which then transitions to a light grey color. The object that contains the linear gradient is composited with the main button object using the hard-light compositing operation.

The hard-light compositing operation emphasizes the lightness and darkness of colors by either multiplying or screening them, depending on the color value of the overlapping object. The result of the compositing operation is greyer colors appear in the gradient giving a linear transition of the colors from white to black.

The effect produces an illusion similar to Example 1, but the virtual lighting source has the illusion of being weaker or further away in Example 4.

Example 5 illustrates how simple virtual lighting and reflection effects can be achieved through the use of masking. The example syntax below contains a group of objects that make up the button with a virtual lighting source. A new group of objects is created with the use element then transformed such that the object is flipped below the original object. The flipped object has a mask applied to it such that only small portion is showing which produces a reflection effect. Figure 9 illustrates the rendered output of Example 5.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>

    <linearGradient id="reflection_fill" gardientUnits="objectBoundingBox"
      x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#000000" offset="0.8"/>
      <stop stop-color="#555555" offset="1"/>
    </linearGradient>

    <!-- mask to create reflection effect -->
    <mask id="reflection_mask" maskUnits="userSpaceOnUse">
      <rect x="0" y="0" width="220" height="100"
        fill="url(#reflection_fill)"/>
    </mask>
  </defs>

  <!-- button content -->
  <g id="svg_button">
    <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
        fill="url(#button_surface)" stroke="#363636"/>

    <text x="30" y="55" fill="white"
      font-family="Tahoma" font-size="20" font-weight="500">
      SVG Button
    </text>

    <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
  </g>

  <!-- virtual surface reflection -->
  <use xlink:href="#svg_button" mask="url(#reflection_mask)"
    transform="matrix(1,0,0,-1,0,182)"/>
</svg>
          

The SVG Filters 1.2 module is currently under development. The module will incorporate some new filter effects including the ability to specify a customized filter. A new possible effect that could be added to the filters module is a transforming effect ( feTransform).

The feTransform primitive would accept an input image and a transformation vector as inputs. The input image would be transformed relative to its current position in the image space by the specified transformation vector.

The example below illustrates how the new filter effects could be used with other effects to produce pseudo 3D effects.

Example 6 illustrates how simple reflection effects could be achieved using filter effects. The example syntax below contains a group of objects that make up the button with a virtual lighting source. The group of objects contains a filter effect that obtains the rendered output of the group and transforms the output using the feTransform element. The transformed output is composited with another object that creates a masking effect. The masking effect allows only a small portion of the transformed output to show. The combined effects produce a virtual reflection of the original group of objects. Figure 10 illustrates the rendered output of Example 6.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>

    <linearGradient id="reflection_fill" gardientUnits="objectBoundingBox"
      x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#FFFFFF" offset="0" stop-opacity="1"/>
      <stop stop-color="#FFFFFF" offset="0.2" stop-opacity="0"/>
    </linearGradient>

    <!-- object to mask the reflection -->
    <rect id="reflection_mask" x="0" y="0" width="220" height="100"
      fill="url(#reflection_fill)"/>

    <!-- reflection to match virtual lighting effect -->
    <filter id="reflection" filterUnits="objectBoundingBox"
      x="-0.1" y="-0.1" width="1.2" height="1.2">

      <!-- flip the original object -->
      <feTransform in="SourceGraphic" transform="matrix(1,0,0,-1,0,182)"
        result="reflected_graphic"/>

      <!-- specify the mask and translate it -->
      <feImage xlink:href="#reflection_mask" result="filter_mask"/>
      <feTransform in="filter_mask" transform="translate(0 182)"
        result="filter_mask"/>

      <!-- combine the mask and the flipped object -->
      <feComposite in="reflected_graphic" in2="filter_mask" operator="in"/>
    </filter>
  </defs>

  <!-- button content -->
  <g filter="url(#reflected_graphic)">
    <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
        fill="url(#button_surface)" stroke="#363636"/>

    <text x="30" y="55" fill="white"
      font-family="Tahoma" font-size="20" font-weight="500">
      SVG Button
    </text>

    <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
      fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
  </g>
</svg>
          

Projections that create an illusion of depth can be achieved in a limited number of ways in SVG. SVG paths and transformations are two features that can be used to produce different 3D effects.

Note:

That applying a 2.5D perspective does not change the Z-ordering of objects. Care needs to be taken when authoring objects that have the illusion of being 3D as some objects may overlap producing undesirable results.

SVG transformations give authors the ability to change the geometry of an object. Transformations are easy author and can be animated easily making them ideal for GUI interface construction.

Figure 12 illustrates the rendered output of a pseudo 3D GUI that is constructed using SVG shapes containing scale and translation transformations. All the square borders for each of the menu icons are the same size and position prior to the applied transformations. A scale transformation is used to resize some of the icons to a smaller size and a translation transformation is used to position some of the icons upwards, left and right. The positioning and sizing of the icons creates the illusion of depth in the GUI with the centre icon appears to be in front of the other icons.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" version="1.2" baseProfile="tiny"
  viewBox="0 0 200 170"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <radialGradient id="icon_background" gradientUnits="objectBoundingBox"
      cx="0.5" cy="0" r="1">
      <stop offset="0" stop-color="#555555"/>
      <stop offset="1" stop-color="#000000"/>
    </radialGradient>
    
    <rect id="icon_frame" x="0" y="0" width="100" height="100"
      fill="url(#icon_background)" stroke="#000000"/>
  </defs>

  <g font-family="Arial Black" font-size="100" text-anchor="middle"
    fill="#DDDDDD">
    <g transform="translate(45 10) scale(0.5 0.5)">
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">1</text>
    </g>

    <g transform="translate(10 30) scale(0.75 0.75)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">2</text>
    </g>

    <g transform="translate(105 10) scale(0.5 0.5)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">5</text>
    </g>

    <g transform="translate(115 30) scale(0.75 0.75)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">4</text>
    </g>


    <g transform="translate(50 55)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">3</text>
    </g>
  </g>
</svg>
          

As can be seen form the SVG syntax in Example 08 the rect object used for the icon frame and background can be defined once and transformed to different areas on the 2D Plane.

With the addition the Filters and Compositing modules to SVG Tiny 1.2 graphically rich pseudo 3D UI objects can be produced. However, the functionality in both modules only provides a means to modify the final bitmap displayed. The future transformations module will allow the manipulation of vectors and images to produce perspective projections of the objects. Options to specify a 3D Convergence Point may be available as well as functions to perform transformations in more than one axis. Figure 13 illustrates the coordinate system of the transformations module.


The Convergence Point ( ex, ey, ez ) would be defined by the perspective attribute. In Figure 13 The attribute would apply to shapes and text. The coordinate system will allow for 3D transformations to be performed on 2D objects. The 3D transformations are translated back to perspective projections on the 2D Plane. The transformations that could extend the current transformation list may include:

  • translate3d(<tx> <ty> <tz>) , which specifies a 3D translation by tx, ty and tz.

  • rotateX(<roate-angle> [cy cz]) , which specifies a clockwise rotation by <rotate-angle> degrees about the X axis.

    If optional parameters <cy> and <cz> are not supplied, the rotation is about the origin of the current user coordinate system. The operation corresponds to the matrix [1 0 0 cosθ 0 –sinθ 0 sinθ cosθ].

    If optional parameters <cy> and <cz> are supplied, the rotation is about the point (<cy>, <cz>). The operation represents the equivalent of the following specification: translate3d(0, <cy>, <cz>) rotateX(<rotate-angle>) translate3d(0, -<cy>, -<cz>) .

  • rotateY(<roate-angle> [cx cz]) , which specifies a clockwise rotation by <rotate-angle> degrees about the Y axis.

    If optional parameters <cxs> and <cz> are not supplied, the rotation is about the origin of the current user coordinate system. The operation corresponds to the matrix [cosθ 0 0 1 sinθ 0 -sinθ 0 cosθ].

    If optional parameters <cx> and <cz> are supplied, the rotation is about the point (<cx>, <cz>) . The operation represents the equivalent of the following specification: translate3d(<cx>, 0, <cz>) rotateX(<rotate-angle>) translate3d(-<cy>, 0, -<cz>) .

  • scale3d(<sx> <sy> <sz>) , which specifies a scale 3D operation by sx, sy and sz.

  • scale3d(<skew-angle>) , which specifies a skew transformation along the z-axis.

The examples below illustrate how the some of the proposed transformation effects could be used to produce pseudo 3D looking GUI.

Example 9 illustrates how groups of shapes can be transformed using a perspective transformation to achieve the illusion of depth. The perspective attribute is set such that the theoretical Convergence Point is behind the 2D Plane.

Similar to Example 8 the rect object used for the icon frame and background is defined once and transformed to different areas on the 2D Plane. In Example 7 paths were used to achieve a similar effect and a different path has to be defined for each shape. Example 9 shows that using the perspective transformation syntax can reduce the amount of authoring required to achieve an illusion of depth in a scene.

Figure 14 illustrates the rendered output of Example 9.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" version="1.2" baseProfile="tiny"
  viewBox="0 0 230 100"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <radialGradient id="icon_background" gradientUnits="objectBoundingBox"
      cx="0.5" cy="0" r="1">
      <stop offset="0" stop-color="#555555"/>
      <stop offset="1" stop-color="#000000"/>
    </radialGradient>
    
    <rect id="icon_frame" x="0" y="0" width="100" height="100"
      fill="url(#icon_background)" stroke="#000000"/>
  </defs>

  <g font-family="Arial Black" font-size="100" text-anchor="middle"
    fill="#DDDDDD">
    <g perspective="115 50 -200" transform="translate(0 10) rotateY(-90 0 50)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">1</text>
    </g>

    <g perspective="115 50 -200" transform="translate(30 10) rotateY(-90 0 50)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">2</text>
    </g>

    <g perspective="115 50 -200" transform="translate(90 10) rotateY(90 0 50)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">5</text>
    </g>

    <g perspective="115 50 -200" transform="translate(120 10) rotateY(90 0 50)" >
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">4</text>
    </g>

    <g transform="translate(60 10)">
      <use xlink:href="#icon_frame"/>
      <text x="45" y="80" comp-op="soft-light">3</text>
    </g>
  </g>
</svg>