Rain SVG

-

Businesses win customers when they deliver what customers want.
Customers get what they want when they can customize products to their
own preferences.  At Rain, we recognize the profit potential that
clients can achieve with this concept and have created many
applications allowing users to design their own products.  How do we
do it?  Let’s talk SVG.

Suppose we create a simple product designer containing a single
rectangle.  The user can rotate, scale, position, and color the
rectangle. The rectangle will then be printed in spectacular fashion
on the customer’s very own poster.  So, Jim hops into the application
and moves the rectangle to the center of the poster, doubles its size,
colors it blue, then rotates it 45 degrees.  He then saves his design.

How is Jim’s design saved?  That is, how is Jim’s design described in
such a way that (1) he can later re-open it and continue modifying his
rectangle and (2) a printing shop can print his poster at virtually
any size without degrading its quality?

The most common way to save an image is by using a raster format such
as gif or jpg.  While there are very good use cases for such formats,
this is not one of them.  A raster format describes an image by using
a grid of pixels with each pixel carrying a color value.  For example,
the pixel at 1, 1 is red; the pixel at 1, 2 is green; and so on.  Put
all the pixels together and your eye sees an image.

Raster images don’t fulfill our requirements for a couple reasons.
First, raster images have no knowledge of internal elements.  It
doesn’t store information about which pixels belong to a rectangle and
which belong to a circle.  An application may be able to analyze the
pixels and make a good guess, but because the “grid of pixels” is only
two-dimensional, once elements begin to overlap and become more
complex even guessing turns impossible.  This would greatly restrict
the ability for our application to re-load a user’s work for further
editing.

Second, because raster images are a grid of pixels with each pixel
carrying a color value, the image cannot scale to an arbitrary size
without loss of apparent quality, otherwise known as pixelation.  To
illustrate, imagine an image one inch wide that has 300 pixels on the
first row of the pixel grid. You later decide you would like to print
the image at two inches wide instead of one inch wide.  The 300 pixels
now must be spread across an area twice as wide as the original.
While the image is made larger, no additional detail is available for
the added area.  The human eye begins to notice this extrapolation of
data resulting in a loss of apparent quality.

So how do we store the data then?  We use a vector format.  Rather
than storing image data in a pixel grid, vector graphics store data by
using points, lines, curves, and shapes.  Because the descriptors are
all based on mathematics, the image can be enlarged to an infinite
size without loss of quality.  Likewise, a certain knowledge of the
design’s individual elements is retained and can be used when loading
a design for further editing.

In 1999, a group of industry leaders collaborated to make a vector
specification called Scalable Vector Graphics (SVG). Although other
vector formats existed previously, they each carried various
restrictions or encumbrances.  SVG was designed as a lightweight, open
standard that could easily be used amongst a variety of applications
on a variety of platforms.  Design and printing applications could
easily store and exchange vector design information.

While SVG is a great format for storing design data, users still need
an environment where they can interact with design elements and have
all the functionality of a full application.  Using Flex, Rain is able
to leverage both the ubiquitous Flash player browser plugin for
interactivity and SVG for persistent storage.  Rain has developed a
library which translates what users see in the browser to a SVG file
stored on the server.  If users wish to continue editing their design,
the SVG can be loaded back into the product designer.  When the user
is ready to order, the SVG document can then be shipped off to the
printer.

While that might seem impressive, the real power of Rain’s SVG library
comes from the complementary tools built to empower clients and their
users.  For starters, users can rotate, scale, crop, pan, color, add
text, mask, draw, and drag-and-drop.  Clients can guide users by
specifying specific areas to drag-and-drop photos, enabling or
disabling certain tools for individual elements or types of elements,
and providing pre-built design templates.

Because the library is our own, we can tweak it as necessary.  We
understand that every product designer is unique and carries its own
set of business rules and capabilities.  We have experience
implementing product designers for a wide variety of products from
logos to shirts to sports trading cards to keychains.  Dream away and
we’ll make it happen, cap’n.

- Aaron Hardy, Senior Flex Developer