| Developer track |
|
|
|
Reflections demo
|
|
The Reflections demo, created by Republik One for Adobe Systems, is an interactive triptych of visual and poetic meditations—a series of personal reflections inspired by the passage of the seasons. All three panels use a JPG file as a background image and combine it with SVG elements. The artist uses of a variety of text and filter effect techniques to fully express his ideas.
|
|
 |
|
| The user interface is intentionally aesthetic and slightly mysterious. Rows of rectangles form the user interface buttons. As the mouse pointer is moved over and away from a button, its label first appears and then dissolves out of view. Each of the three panels has buttons labelled "introspections" that change text between English and Japanese. There are also three buttons labelled "reflections" that navigate the user among the three panels. For the first panel (titled "faith"), there are additional buttons to apply several filter effects. |
|
 |
|
| Rendering Text including Multibyte Characters |
| The Reflections demo suite exhibits text in a variety of different fashions. Several text manipulations are simple transformations. The "E" in the word "REFLECTIONS" is reversed by putting the "E" in its own <tspan> element and setting its rotate attribute, similar to this: |
|
<text>
<tspan>R</tspan>
<tspan rotate="180">E</tspan>
<tspan>FLECTIONS</tspan>
</text>
|
|
 |
|
| The "REFLECTIONS" text example also explicitly changes the text-rendering property; in this case, to the value "geometricPrecision," which favors geometric precision over legibility and rendering speed. The glyph outlines are drawn with comparable geometric precision to the rendering of path data. The default text-rendering property gives legibility more importance than either speed or geometric precision. |
|
|
The thoughts in the Reflections demo are expressed in both English and Japanese. To put non-European glyphs (other than ISO-8859-1), such as Japanese, Chinese, Hebrew, or Arabic characters, into an SVG graphic, you need to use Unicode character values. Unicode values can be entered using a Unicode-enabled editor or typed as numeric character references. The SVG viewer must support multibyte characters, and the Adobe SVG viewer supports US-ASCII, ISO-8859-1, UTF-16, and UTF-8 encodings.
|
|
|
Non-European fonts are sometimes displayed from right-to-left or from top-to-bottom. SVG provides a writing-mode attribute to support the inline progression direction. (SVG also supports bidirectionality.) In the Reflection panel entitled "snow", Japanese text is rendered in a top-to-bottom (tb) writing-mode direction, and the font-family and writing-mode properties may be set with code similar to this:
|
|
|
<text style="font-family:'HeiseiKakuGo-W3-83pv-RKSJ-H'; writing-mode:tb">
|
|
|
To display any characters, the correct font must be available. In this demo, two uncommon font families, Impact and the Japanese HeiseiKakuGo, are used. To ensure the text is viewed with the artist's chosen font, even if that font is not installed, a CEF (Compact Embedded Font) font is embedded with the SVG file.
|
|
 |
|
| Animation and Interaction |
| There are several instances of declarative animation (the <animate> and <animateTransform> elements) in the Reflections demo. The most obvious is in the second panel, "snow", where several "snowflakes" (<ellipse> elements filled with radial gradients) appear to fall along the left side of the screen. In the third panel, "renewal," two sets of text strings (and their mirror images) fade in and out every 15 seconds. |
|
|
A more subtle animated effect is the appearance and dissolving of button labels. The <animate> element varies the opacity of the label string. As the mouse pointer is moved over and out of a rectangular button, its label fades in and out.
|
|
|
Clicking on the buttons either navigates the user among the three panels or changes between the English and Japanese languages. All these actions are implemented with an <a> element and its xlink attribute.
|
|
Each of the three panels has two language versions, and changing the language not only changes currently visible text, but it also changes switching the destination of the navigation buttons. For example, by switching from English to Japanese, the "reflections" button labelled "renewal" would navigate the user to 03_renewal_j.svg, instead of 03_renewal.svg.
|
|
| Filter Effects |
| In the first panel (“faith”), there are additional buttons to apply several filter effects and to restore the original scene without filter effects. A filter effect consists of a series of client-side operations (individual filter elements) applied to a source graphic to produce a modified result.
The button labelled "filter 1" uses a filter effect that generates the following pixelation effect over a filter area, defined to be a rectangle over the bottom half of the graphic.
|
|
 |
|
| The second button labelled “filter 2” creates a filter effect that blurs the top half of the graphic. The blurred image is below on the left, and the original image is on the right. |
|
|
|
|
| The last button labelled "filter 3" separately uses the "lighten" and "darken" blending modes to process the background image. Then both blended background images are composited together, and what was once black appears cyan, and what appeared white is now an undersaturated shade of red. The effect is used over a filter area that is the center 20% of the entire view box. |
|
 |
|
| Return to demo |
|
|
