eRez Imaging Server 5

eRez SVG Templates Guideline

Version: 1.4

Last modified: 03-oct-2008

Support for SVG template overlays is possible from version 4 of the YaWah eRez server. This document contains guidelines on how to use SVG templates; this includes constructions of suitable SVG templates, security handling and administrations of SVG templates.

Table of contents. 1

Introduction.. 2

Behind the scenes. 3

Constructing SVG templates. 4

Speed. 4

How to create a SVG template. 4

Security. 8

Configuration and structure. 10

Using the SVG templates. 11

The rating example. 12

Creating the SVG template. 14

Creating and configuring the real-time SVG template. 17

Using the SVG real-time template from a web page. 18

Using Velocity to change the SVG template. 22

Introduction

Version 4 introduces the use of SVG template overlays on real time templates. A real time template can be configured to use a SVG template. This SVG template can contain a number of parameters. The content of these parameters is passed as parameters when the image is requested.

A real time template can be configured to allow that the SVG template file name can be passed as a parameter, thereby creating a flexible solution where the actual template used is determined at request time.

It is possible by parameters to control how the template is applied; this includes position and size which can be either absolute or relative to the image.

Behind the scenes

This section contains a description on how the SVG templates are applied to the images.

When a real time template is configure to use a SVG template the following process occurs:

As before an image is created based on the real time template and the corresponding parameters. Next any parameters are matched against the SVG parameter positive list for the real time template. Then the SVG template is loaded and the parameters in the template are substituted with the validated values passed in the request. The result is a new SVG graphic. This graphic is rendered on top of the image created.

Notice that this method allows for advanced features like semi transparent graphics etc. The result of this process is then returned as the finished image.

Constructing SVG templates

This section contains a guideline to construct SVG templates. This includes best practice and limitations.

Speed

An important issue to remember when creating an SVG template is speed. The template needs to be rendered on-the-fly every time a new variant of an image is requested. Also if the SVG template contains parameters, all the parameters most be substituted.

There are three factors that contribute to the speed with which a SVG template can be rendered. The first factor is the actual size of the SVG template. If the file is large, then it takes longer to parse the XML and it also takes longer to substitute the parameters. Therefore make the size of the file as small as possible.

The second factor is the resulting image size. It takes longer to render a large image (many pixels) than a small image. This can be more difficult to control, but for maximum speed make sure that you create art work that are readable at small sizes, and select parameters that render the SVG in small sizes.

The third factor is the actual SVG code. An SVG file basically contains a program in the SVG programming language. You can create an SVG template that takes forever to render. This does not make much sense, but the rule of thumb here is: keep the SVG artwork as simple as possible.

How to create a SVG template

There are several programs that can generate SVG. Any program that generates legal SVG files can be used.

Notice that eRez requires that the encoding of the SVG template is UTF-8 or UTF-16.

A commonly used program such as Illustrator can be used, but programs like Illustrator can crate SVG code that is correct, but depending on the usage, not suitable. Therefore it can be necessary to edit the SVG template.

Illustrator also has the option to generate an SVG file that it can edit again. It does so by adding a lot of Illustrator data to the SVG file. This is not a good solution because the eRez server will look in all the data after parameters to substitute and the server needs to throw away a lot of data when rendering the SVG. In this case it is recommend that one create the artwork and save this as an Illustrator file and when the artwork is done, save the artwork as a SVG file without Illustrator data.

One can add parameters to a SVG template. A parameter can occur at any point in the SVG template. This means that one can use parameters for SVG tags, and that way control things like colors, transparency and fonts.

A Parameter is any text that starts with a $ sign, e.g. $color or $price. The parameters are substituted with the text that is passed in the request. E.g. color=FF0000 for red. If the parameter for $color is not passed then the parameter is not substituted. Depending on where the parameter is placed in the SVG template, this may or may not be an issue. If the parameter is part of some SVG command then the SVG template will fail to render, otherwise it will just be passed on like it is, e.g. “the price is $price”. If it is acceptable that the parameter is substituted with an empty string one can use the “$!” construct. When using this construct, the parameter is removed if not specified, giving the result “the price is”.

Because you can use parameters to control things like color and fonts, the SVG template may not be a valid SVG file. Therefore it is recommended to test the SVG template first with out parameters that control SVG commands, to check if the basic artwork is in place. Then one can test the SVG template with parameters that control the SVG commands.

When using programs that generate SVG files you may discover that the SVG code generated does not look as expected. The SVG code is correct but there are many code variations that reach the same result. Not all of them are usable.

One example is text on a path. One solution would be to place each character on the path. Another would be to describe the path and the text and let the raster image processor place the characters. When saving a SVG file from Illustrator you have an option called "Use <textPath> element for Text On Path". When this option is turned off, each character is place separately, this gives the best precision. When the option is turned on it just describes the path and the text. The quality of the text is then up to the raster image processor.

Besides the possible quality issues, there are a number of implication of these different methods. The first issue is the size. When every character is placed individually, the size of the file increases dramatically. This has an impact on performance. The other issues of the non <textPath> solutions are that you cannot use parameters. Splitting the text into single characters makes it impossible to effectively substitute parameters. To complicate thing more, it is practically impossible to extend the text when the path information is no longer there. For these reasons the use of the <textPath> command is recommended. Only if there are severe quality issues and no use of parameters, can a non <textPath> solution be recommended.

Another Illustrator setting that is recommended is also related to the path problem above. There is an option that is called “use fewer <tspan> elements”. This is again an example of the two different ways you can place text. Place each character one by one, or place a number of characters. As above it is recommended to use fewer <tspan> elements. If the text contains parameters, one must use this option.

The ability to substitute text in the SVG template may yield a result that is not desirable. It may be necessary to change SVG templates generated by programs like Illustrator. In the following section is a simple example on how to modify some code generated by Illustrator.

Some of the control constructs and positioning of generated SVG code may not be useful when using parameters.

Look at the follow example of SVG code generated from Illustrator.

<text transform="matrix(1.1215 0 0 1 91.2012 11.7178)"

font-family="'Myriad-Roman'"

font-size="14">The price is $price</text>

The code writes a piece text "The price is $price". The text is placed inside a box specified with the matrix attribute. The text is centered. There is nothing wrong with this code, but the method used has a negative side effect when use with parameter substitution. When we substitute the $price parameter with some text e.g. "1234,50", the size of the text changes. In this case the text will grow right. This may not be an issue, but in this case we had specified we wanted to align our text in the middle. Illustrator could have used another method to do this, look at the following code.

<text transform="matrix(1.1215 0 0 1 91.2012 11.7178)"

text-anchor="middle" font-family="'Myriad-Roman'"

font-size="14">The price is $price</text>

The code is almost identical to the above code, but we just added the following attribute text-anchor="middle". The text will now be aligned around the center. The problem now is that the matrix coordinates does not match, and must be adjusted to fit new layout.

Security

This section contains information concerning security issues that could occur with something as dynamic as SVG templates.

As with any system, the eRez server is not more secure than the host system. The eRez server goes to great length to insure that the solution is safe and cannot compromise the host system, thereby insuring that the eRez server does not become a point of entry for misuse.

An SVG file is in fact a program that gets interpreted by a raster image processor. Because of this nature, there could be number of security concerns.

The security concerns can be categorized as following; access violations, denial of service attacks and defacements.

The eRez server does several things to counter these potential security issues. One of the basic methods is control of the location and usage of the SVG templates. One feature that could present a security problem is the ability to specify a SVG template file in a request to the server. This feature is controlled per real time template. Default it is turned off, but can be enabled if needed. To counter this issue the eRez server will not serve SVG templates that are not located in the SVG folder inside the eRez structure. This means that a person who wants to misuse the system can not place a file some where on the system and specify a path to that file.

Another security issue is denial of service attacks. A denial of service attack can occur when the SVG template contain SVG code that takes forever to render. The eRez server utilizes several methods to prevent this from happing. Though it will prevent a denial of service attack, the response time may become longer, but the system will continue answer requests. Normally this will not be a problem because it will require that some person places or replaces a SVG template with destructive code. Unless the system is generally compromised this will not be possible. Notice that the eRez Imaging Server as such cannot prevent DoS attacks. The eRez Imaging Server just utilizes methods that prevent that single request can be used for DoS attacks.

Another version of the above scenario occurs if you can do code injection. A special crafted SVG parameter would make it possible to inject SVG code into the SVG template. For that reason it is not allowed to use the " character in parameters. Any " will be stripped, this makes it impossible to escape the SVG template code, and therefore also impossible to inject SVG code into the template.

To further enhance security the eRez server utilizes a positive list method on parameters. You can have any number of parameters with any name in your SVG template, when configuring your real time template you must specify all the parameters that are used. This way parameters sent with the request is matched with the positive list and only parameters on the positive list are substituted.

Configuration and structure

This section contains information on how to setup the system to use SVG templates.

The SVG templates must be placed in the SVG folder in the template folder of the eRez applications. E.g. "C:\Program Files\yawah\erez\tomcat\webapps\erez\WEB-INF\templates\svg"

A real time template must be modified or created to take advantage of the SVG template overlay. Below is the SVG part of the configuration screen for a real time template.

There is a checkbox to turn the SVG template on and off; a text field for the file name of the SVG template; an option that allows the SVG template name to be overridden by the request for an image; the default anchor point of the SVG template; the default scale type of the SVG template; the default scale value in percent or pixels, depending on the scale type; the template parameters.

The template can contain any number of parameters. The parameters are declare by there name and a default value. Parameters are separated with a | character.

There are request commands for at runtime to control the placement, scale type and value and template name if override is allowed.

For a complete description of the SVG related parameters, see the http command reference.

Using the SVG templates

This section contains information on how to use the SVG templates when requesting an image from the eRez Imaging Server. For further reference look at the http command reference.

To use a SVG template one needs to use a real time template with SVG templates enabled. Depending on the configuration of that real time template, there are two ways to use the SVG template.

One way is to configure the real time template to use a specific SVG template. When the image is requested with this real time template the SVG template is automatically applied.

The other way to use a SVG template is to configure the real time template to allow the SVG file to be overridden. When you request an image with this real time template you can specify the name of the SVG template. By using this method one can use an arbitrary SVG template for overlay. Notice that you can not use parameters in a SVG template that are not on the positive list of the real time template.

When requesting an image with a SVG template one can control the scale and location of the overlay. There are two methods to control scale and five ways to control placement.

The two methods for scaling are relative and absolute. Each method can again be divided into three sub methods; height, width and fit.

When using the method of scaling relative to the requested image the scale value is expressed in percent. One can use the command "relh" to scale relative to the height of the requested image, "relw" to scale relative to the width of the requested image and "relf" to scale to fit. Scale to fit will look at the aspect between width and height and select scale to width or height in a way that the SVG graphic always will fit within the image.

When using the method of absolute scaling the scale value is expressed in pixels. Using the "absh" command will create SVG overlay with a height of the specified scale value in pixels, the "absw" does the same just applied to the width instead. When using the fit command "absf", eRez will look at the aspect ratio of the template and will fit the template within a quadrate of the size of the scale value in pixels.

The placement of the SVG template is controlled by the "anc" command. The SVG file can be placed relative to top left, top right, bottom left, bottom right corners or centered.

Special parameters

From version 4.1 two special parameters are available to the SVG templates. The parameters are $erez_image_width and $erez_image_height. The values are the size for the requested image in pixels.

The rating example

This section contains an example on how to use the SVG template feature of eRez.

The example is a simple image rating application. An image is shown and the user can then rate the image. The rating is then applied to the image being displayed.

This example is distributed with the eRez Imaging server.

During this example we will look at creating a SVG template with parameters, creating and configuring a real-time template for use with a SVG template, writing some HTML code that uses the real-time SVG template, and learn how to use Velocity features to change the behavior of the SVG template.

For this example we want to create at web page where the user is presented with an image and asked to rate it. When the user rates the image we want to reflect the rating on the image. The user can give a rating from none to five stars.

The end result will look like this.

And like this when the user has rated it with four stars.

Creating the SVG template

The first thing we need to do is create a SVG template. You can use any tool that supports SVG for the basic creation of the SVG template, or if you are a SVG expert you can handcraft the template. In this case the following code was created with Adobe Illustrator.

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [

<!ENTITY ns_svg "http://www.w3.org/2000/svg">

<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">

width="807.281" height="146.306"

viewBox="0 0 807.281 146.306" overflow="visible" enable-background="new 0 0 807.281 146.306" xml:space="preserve">

<g>

<polygon fill="#B2B2B2" points="76.917,120.749 30.044,145.392 38.996,93.196 1.075,56.233 53.48,48.619 76.917,1.13

100.354,48.619 152.759,56.233 114.838,93.196 123.79,145.392"/>

<polygon fill="none" stroke="#000000" points="76.917,120.749 30.044,145.392 38.996,93.196 1.075,56.233 53.48,48.619

76.917,1.13 100.354,48.619 152.759,56.233 114.838,93.196 123.79,145.392"/>

</g>

<g>

<polygon fill="#B2B2B2" points="240.278,120.749 193.405,145.392 202.357,93.196 164.436,56.233 216.841,48.618 240.278,1.13

263.715,48.618 316.12,56.233 278.199,93.196 287.151,145.392"/>

<polygon fill="none" stroke="#000000" points="240.278,120.749 193.405,145.392 202.357,93.196 164.436,56.233 216.841,48.618

240.278,1.13 263.715,48.618 316.121,56.233 278.199,93.196 287.151,145.392"/>

</g>

<g>

<polygon fill="#B2B2B2" points="403.641,120.749 356.768,145.392 365.719,93.196 327.798,56.233 380.203,48.619 403.641,1.13

427.077,48.619 479.482,56.233 441.562,93.196 450.514,145.392"/>

<polygon fill="none" stroke="#000000" points="403.641,120.749 356.768,145.392 365.719,93.196 327.798,56.233 380.203,48.619

403.641,1.13 427.077,48.619 479.483,56.233 441.562,93.196 450.514,145.392"/>

</g>

<g>

<polygon fill="#B2B2B2" points="567.002,120.749 520.129,145.392 529.08,93.196 491.16,56.233 543.564,48.619 567.002,1.13

590.438,48.619 642.844,56.233 604.923,93.196 613.875,145.392"/>

<polygon fill="none" stroke="#000000" points="567.002,120.749 520.129,145.392 529.08,93.196 491.16,56.233 543.564,48.619

567.002,1.13 590.438,48.619 642.845,56.233 604.923,93.196 613.875,145.392"/>

</g>

<g>

<polygon fill="#B2B2B2" points="730.364,120.749 683.491,145.392 692.443,93.196 654.521,56.233 706.928,48.619 730.364,1.13

753.801,48.619 806.206,56.233 768.285,93.196 777.237,145.392"/>

<polygon fill="none" stroke="#000000" points="730.364,120.749 683.491,145.392 692.443,93.196 654.521,56.233 706.928,48.619

730.364,1.13 753.801,48.619 806.207,56.233 768.285,93.196 777.237,145.392"/>

</g>

</svg>

The SVG file represents the maximum five stars that the user can rate. The SVG file can be used like it is created from Illustrator, but in that case all images would be rated five stars. To be useful we need to do a couple of tricks.

We want to control the appearance of the stars so we have a more general useable real-time template. For that purpose we can use the parameter facility. We want to be able to control the color and opacity of the stars and the color of the stroke.

If we look at the SVG file from Illustrator we see a pattern emerge. Each star is described within a <g> tag. The star consists of two polygons. One is the stroke and one is the fill. We could have created just one polygon to describe our star, but we intend to control the fill color opacity. If we used just one polygon the stroke would be affected by the opacity also. In this case we do not want this.

Looking at the <g> tag in more detail we see the first polygon is the fill polygon and the second polygon is the stroke polygon. The first polygon is filled with the color B2B2B2. The value is the RGB value in Hex that the color has. In this case it is a light grey color. After the fill color is the description of the polygon. The second polygon is the stroke polygon. We can see that there is no fill color, e.g. the polygon is transparent. Then we have a stroke color of 000000, which is the color black. After the fill and stroke color is the description of the polygon.

Our first goal was to control the opacity and the fill and stroke color of the star, so we need three parameters for doing this. We will call them stroke, color and opacity. We need to change the SVG to use the parameters.

After the changes the descriptions of a star look like this.

<g>

<polygon opacity="$opacity" fill="#$color" points="730.364,120.749 683.491,145.392 692.443,93.196 654.521,56.233 706.928,48.619 730.364,1.13

753.801,48.619 806.206,56.233 768.285,93.196 777.237,145.392"/>

<polygon fill="none" stroke="#$stroke" points="730.364,120.749 683.491,145.392 692.443,93.196 654.521,56.233 706.928,48.619

730.364,1.13 753.801,48.619 806.207,56.233 768.285,93.196 777.237,145.392"/>

</g>

A parameter starts with a $ sign. The color and stroke parameter is straight forward; we just replace the color value with our parameters. For the opacity parameter we need to add an attribute to the polygon tag, called opacity. The above example only shows the changes for one star, but we just need to do the same for all stars.

Notice! Check the http command reference for parameters. If you choose a parameter name that is part of eRez Imaging Server commands, the server will use the SVG parameter with unintentional side effects.

At this point we have a SVG file that can be used with a real-time template, but we still have some work to do before we have the final solution.

Creating and configuring the real-time SVG template

To use the SVG template with the eRez server, we need to create and configure a real-time template. To do this we go to the administrator console and select the real-time templates link, and create a new template named "rating".

To create a real-time template with SVG support, we need to check the check-box "Use SVG Template". We also need to specify the name of the SVG file; in this case we call the SVG file "rating.svg".

We will not allow the name of the template to be overridden.

The next decision to make is how the SVG template is placed on top of the image. We need to specify an anchor point, how the SVG should be scaled, and the size of the SVG. In this case we want to place the stars in the lower left corner, so we select "Left Bottom" as anchor point. As default we want to scale the SVG relative to the requested image at 20%. All these parameters can be overridden when we request the image, so the values specified is just sensible default values.

Finally we need to specify what parameters we allow to be passed to the SVG template, and some default values for these parameters.

We have three parameters, the color, the stroke and the opacity. We specify the parameters by name and assign a default values. The parameters are separated with a "|" character. As default value we assign "FFFFFF" to the color parameter, "1.0" to the opacity and "000000" to the stroke. The default star then becomes a white star with black border and no transparency. We want to add another parameter at this point, as we need to pass a value for the rating, so we add "rating" as parameter with the default value of 0.

The rating real-time template now looks like this.

This template is distributed with the eRez server. We have not covered all aspects of creating a real-time template here, for information on the other parameters look at the eRez Management Console documentation.

Using the SVG real-time template from a web page

We can now start using the SVG real-time template.

We will create a simple web page as described above. So we will make some HTML that looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Rating SVG Template Example</title>

</head>

<body>

</div>

<div>

<p>

Please rate the Image

</p>

<option value="2">2 Stars</option>

<option value="3">3 Stars</option>

<option value="4">4 Stars</option>

<option value="5">5 Stars</option>

</select>

</div>

</body>

</html>

The HTML contains two div tags, one for the image and one for the rating controls. The rating controls is a simple select tag with options for non to five stars. The div for the image just contains an img tag. We then need to create at eRez URL for the src attribute of the img tag. The easy way to this is to go to eRez client a select the image we want, and select the publish to web function, and publish to HTML. The publish to web function will look like this.

As template we select the template we made above and called rating. In this case we also know we want the image to be 500 pixels high, so we set the height to 500. In publish to web there is a field called Additional Parameters. Here we can enter the SVG parameters we want to control. In this case we want a default rating of 0. Notice that this is not strictly necessary as the default value for rating is 0, but we want to show in our HTML code that we want 0 to be the default value.

Entering the above and clicking on Update HTML Code updates the Image URL field to show this.

"http://localhost:8080/erez/erez?src=Samples/Flower.jpg&height=500&tmp=rating&rating=0" height="500"

We now copy and paste this into our HTML document and the img tag looks like this.

By testing the web page we find that that default scale values are not appropriate. We could of cause change the default values, but the default values may be sensible in other circumstances, so we just add some extra scale parameters to our URL. We want to scale the SVG relative to the width of the image, with a scale value of 50%. So we add a scale type parameter scl=relw, and a scale value parameter sclval=50. The URL now looks like this.

If we display our web page now, we get an image and a pop-up that can select between none and five stars. But we need to add some code that updates the image, when the user updates the rating. We will use some Javascript code for this.

Below is a Javascript function. The function creates a new img tag with a new URL for the selected rating. We just need to change the rating parameter, so we take the selected value and insert it to the image URL. Then the function replaces the old image with the new one.

function change(rating)

{

var newImg = document.createElement("img");

var div = document.getElementById("rateddiv");

var src = "http://localhost:8080/erez/erez?src=Samples/Flower.jpg&height=500&tmp=rating&rating=" + rating + "&scl=relw&sclval=50";

newImg.setAttribute("src", src)

newImg.setAttribute("alt", "");

newImg.setAttribute("id", "ratedimage")

newImg.setAttribute("height", "500");

div.replaceChild(newImg, document.getElementById("ratedimage"));

}

</script>

Then we just need to call the function when the user changes the rating. The final HTML looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Rating SVG Template Example</title>

function change(rating)

{

var newImg = document.createElement("img");

var div = document.getElementById("rateddiv");

var src = "http://localhost:8080/erez/erez?src=Samples/Flower.jpg&height=500&tmp=rating&rating=" + rating + "&scl=relw&sclval=50";

newImg.setAttribute("src", src);

newImg.setAttribute("alt", "");

newImg.setAttribute("id", "ratedimage");

newImg.setAttribute("height", "500");

div.replaceChild(newImg, document.getElementById("ratedimage"));

}

</script>

</head>

<body>

</div>

<div>

<p>

Please rate the Image

</p>

<option value="2">2 Stars</option>

<option value="3">3 Stars</option>

<option value="4">4 Stars</option>

<option value="5">5 Stars</option>

</select>

</div>

</body>

</html>

Using Velocity to change the SVG template

At this point we have a SVG template, a real-time template that uses our SVG template, and a web page where the user can rate an image and show the image by way of our real-time template. But at this point we do not use the rating parameter, so every request returns the same image, with the same SVG overlay.

We need to change the content of the SVG template according to the rating. Otherwise all images are rated five stars. There are other solutions to this problem than changing the content of the SVG, but as this example is constructed to show all aspect of using SVG templates with the eRez server, we will showcase the feature of modifying the SVG content with Velocity.

If we look at our SVG template again, we noticed that every star was described by a <g> tag. We can use this property to control what stars are shown. The eRez server uses Velocity to substitute parameters. The side effect of this is that we can use all of Velocity's features. In this case we will use the #if command.

Below is the description of the first star. We encapsulate the <g> tag within a #if - #end construction, and use an attribute called rate to check if show the star or not.

#if($rate > 0)

<g>

<polygon opacity="$opacity" fill="#$color" points="76.917,120.749 30.044,145.392 38.996,93.196 1.075,56.233 53.48,48.619 76.917,1.13

100.354,48.619 152.759,56.233 114.838,93.196 123.79,145.392"/>

<polygon fill="none" stroke="#$stroke" points="76.917,120.749 30.044,145.392 38.996,93.196 1.075,56.233 53.48,48.619

76.917,1.13 100.354,48.619 152.759,56.233 114.838,93.196 123.79,145.392"/>

</g>

#end

In this case if rate has a value greater than 0 the star are shown. We do this for all the stars incrementing the value we check against by one. So we show star number two if rate has a value greater than 1, and star number three if the value is greater than 2 and so on.

There is just one problem with setting the rate value. You may have notice that we call the attribute rate and not rating. The problem we have is that the parameter rating is a text value. So when you set the rating parameter in the URL to 3, you are sending a string with the character of 3, not the value of 3.

To solve this problem we introduce at second attribute called rate. In the start we set the rate value depending on the rating parameter. The Velocity code for this is shown below.

#set($rate = 0)

#if($rating == "1")

#set($rate = 1)

#elseif($rating == "2")

#set($rate = 2)

#elseif($rating == "3")

#set($rate = 3)

#elseif($rating == "4")

#set($rate = 4)

#elseif($rating == "5")

#set($rate = 5)

#end

Now the SVG template is finished, but as a finishing touch we want to add a drop shadow to the stars. We can do this in SVG by a filter function like the one below.

</feMerge>

</filter>

We can then apply the filter to the <g> elements like this.

The final SVG template now looks like this.

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [

<!ENTITY ns_svg "http://www.w3.org/2000/svg">

<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">

viewBox="0 0 807.281 146.306" overflow="visible" enable-background="new 0 0 807.281 146.306" xml:space="preserve">

</feGaussianBlur>

</feMerge>

</filter>

#set($rate = 0)

#if($rating == "1")

#set($rate = 1)

#elseif($rating == "2")

#set($rate = 2)

#elseif($rating == "3")

#set($rate = 3)

#elseif($rating == "4")

#set($rate = 4)

#elseif($rating == "5")

#set($rate = 5)

#end

#if($rate > 0)

<polygon opacity="$opacity" fill="#$color" points="76.917,120.749 30.044,145.392 38.996,93.196 1.075,56.233 53.48,48.619 76.917,1.13

100.354,48.619 152.759,56.233 114.838,93.196 123.79,145.392 "/>

<polygon fill="none" stroke="#$stroke" points="76.917,120.749 30.044,145.392 38.996,93.196 1.075,56.233 53.48,48.619

76.917,1.13 100.354,48.619 152.759,56.233 114.838,93.196 123.79,145.392"/>

</g>

#end

#if($rate > 1)

<polygon fill="none" stroke="#$stroke" points="240.278,120.749 193.405,145.392 202.357,93.196 164.436,56.233 216.841,48.618

240.278,1.13 263.715,48.618 316.121,56.233 278.199,93.196 287.151,145.392"/>

</g>

#end

#if($rate > 2)

<polygon opacity="$opacity" fill="#$color" points="403.641,120.749 356.768,145.392 365.719,93.196 327.798,56.233 380.203,48.619 403.641,1.13

427.077,48.619 479.482,56.233 441.562,93.196 450.514,145.392"/>

<polygon fill="none" stroke="#$stroke" points="403.641,120.749 356.768,145.392 365.719,93.196 327.798,56.233 380.203,48.619

403.641,1.13 427.077,48.619 479.483,56.233 441.562,93.196 450.514,145.392"/>

</g>

#end

#if($rate > 3)

<polygon fill="none" stroke="#$stroke" points="567.002,120.749 520.129,145.392 529.08,93.196 491.16,56.233 543.564,48.619

567.002,1.13 590.438,48.619 642.845,56.233 604.923,93.196 613.875,145.392"/>

</g>

#end

#if($rate > 4)

<polygon fill="none" stroke="#$stroke" points="730.364,120.749 683.491,145.392 692.443,93.196 654.521,56.233 706.928,48.619

730.364,1.13 753.801,48.619 806.207,56.233 768.285,93.196 777.237,145.392"/>

</g>

#end

</svg>

We now have a nice web page that can rate an image. In the process we looked at creating a SVG template, creating and configuring a real-time template, using the template from a web page, and finally we looked at changing the content of the SVG template by use of the Velocity features.

The SVG template, real-time template and HTML for the web page are all included with the standard eRez server.

Try http://localhost:8080/erez/html/samples/rate.html.