Part 1 – An SVG walk through: creating user customized menu buttons.


SVG graphic is a graphic file format were the graphics are created using SVG as a language. It is like flash and silverlight in that the graphics are interactive. It is already supported to a limited extent now, but there are powerful animation methods it has which are not yet supported. New versions of Firefox and IE are both promising additional support.

Created for the following objects: Allow the graphics to be customizable by the user – for site marketing reasons – the more time somebody spends customizing the page the more likely they will be returning to it, or show it to others. Be interactive (have links) but remove these (user) links from the main link structure.

SVG is a graphic language; One tells the system how to draw the image – This the feature which will make the graphics customizable without using a graphics program to create it then upload it. We need to write down the instructions in the same way we would explain to another person how to create the image. I’m going to use a tutorial for the source of instructions instead of creating them here – I’ll just be the translator to tell the computer how to create somebody else’s button and try to keep my design changes small.

First lets look at what we want to create: going down this list I like this one: Vista Styled Button. I was thinking of more of a standard web 2.0 button.


STEP ONE – his step two because of his method, normally step one is setting up the size – 300 x 50.

<g width=”300″ height=”50″>
</g>

To be a proper svg it must start with correct SVG tags

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”&gt;
<svg width=”400″ height=”100″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”&gt;

<g width=”300″ height=”50″>
</g>

</svg>

STEP TWO – we are going to fill a rounded corner rectangle 300×50 with a radial gradient; Start rounding 9 pixels from the corner.

<rect width=”300″ height=”50″ ry=”9″ />

We will want perl to generate the svg on the server so the graphics gets to be changed by the user. I do not want to overload this post, the Perl will be another post. The graphic in the perl will now look like this.

print <<“GRAPHIC”;
<g  width=”$config{width}”  height=”50″>
<rect width=”$config{width}”  height=”50″ ry=”9″ />
</g>
GRAPHIC

Now fill the rectangle with a gradient that has a lighter color at the top and bottom than the center. The colors for the graphic, (his numbers seem to dark) – I came up with 477b8d – 2e375c – 477b8d. The background color used will have a large effect on the perceived color (I’m using a black background). I’m not to concerned about matching the color because the color will be customizable.

<linearGradient id=”grad1″ x1=”0″ y1=”0″ x2=”0″ y2=”1″>
<stop offset=”0%” style=”stop-color: #477b8d” />
<stop offset=”50%” style=”stop-color: #2e375c” />
<stop offset=”100%” style=”stop-color: #477b8d” />
</linearGradient>

Use x1 … y2 to specify direction the gradient will go – This case top 0,0 to bottom 0,1

I need to drop it onto a black background, it greatly effects the perceived colors. layers by default in SVG are the first element first and each additional element is drawn on top.

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”&gt;
<svg width=”400″ height=”100″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”&gt;

<def>
<linearGradient id=”grad1″ x1=”0″ y1=”0″ x2=”0″ y2=”1″>
<stop offset=”0%” style=”stop-color: #477b8d” />
<stop offset=”50%” style=”stop-color: #2e375c” />
<stop offset=”100%” style=”stop-color: #477b8d” />
</linearGradient>
</def>

<g >
<!– black rectangle  background –>
<rect width=”400″ height=”100″ />
</g>

<!– Move rectangle by using a transform –>
<g transform=”translate(50,25)”>
<rect
style=”fill:url(#grad1)”
width=”300″
height=”50″
ry=”9″ />
</g>

Step 3 – Glow and Highlight

Glow is not a standard plug in available outside of protoshop. Duplicating the effect would be a line around the object “<rect fill=”none” stroke=”#7f99ef” stroke-width=”6″ />” which has a blur.

<filter id=”filter3610″>
<feGaussianBlur stdDeviation=”4″ />
</filter>

Because of the Blur A mask is also needed so the blur only blurs to the inside and the outside has a sharp edge. Any object can be used for a mask in this case our rect shape with the 9 pixel rounded corners.

<mask id=”Mask” width=”300″ height=”80″>
<rect
width=”300″
height=”50″
ry=”9″
fill=”white”/>
</mask>

Our SVG now looks like:

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”&gt;
<svg width=”400″ height=”100″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”&gt;

<def>
<linearGradient id=”grad1″ x1=”0″ y1=”0″ x2=”0″ y2=”1″>
<stop offset=”0%” style=”stop-color: #477b8d” />
<stop offset=”50%” style=”stop-color: #2e375c” />
<stop offset=”100%” style=”stop-color: #477b8d” />
</linearGradient>

<mask id=”Mask” width=”300″ height=”80″>
<rect
width=”300″
height=”50″
ry=”9″
fill=”white”/>
</mask>

<filter id=”filter3610″>
<feGaussianBlur stdDeviation=”4″  />
</filter>
</def>

<g >
<rect
width=”400″
height=”100″
/>
</g>

<g transform=”translate(50,25)”>
<rect
style=”fill:url(#grad1)”
width=”300″
height=”50″
ry=”9″
mask=”url(#Mask)” />

<!– Outside glow effect
<rect
fill=”none”
stroke=”#7f99ef”
stroke-width=”6″
style=”filter:url(#filter3610)”
width=”300″
height=”50″
ry=”9″
mask=”url(#Mask)” />
</svg>

Now just the highlight and text
The highlight is a transparent layer on the top, PSfreak’s version has no curve on the bottom, I prefer a small curve – 4.5 pixels. No blur is being used to soften the lighting – it is a hard edge.

<rect
style=”fill:#ffffff;fill-opacity:.1;”
width=”300″
height=”25″
ry=”4.5″
mask=”url(#Mask)” />

<text x=”20″ y=”30″ font-family=”Verdana” font-size=”20″ fill=”white” >
PSfreak Inspired Button
</text>

That is it, file size is less than 2k. I’ll add <a xlink:href=”http://www.psfreak.com/vista-styled-button&#8221; target=”_top”></a> to the entire button and here it is.

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”&gt;
<svg width=”400″ height=”100″ version=”1.1″
xmlns=”http://www.w3.org/2000/svg&#8221;
xmlns:xlink=”http://www.w3.org/1999/xlink”&gt;

<def>
<linearGradient id=”grad1″ x1=”0″ y1=”0″ x2=”0″ y2=”1″>
<stop offset=”0%” style=”stop-color: #477b8d” />
<stop offset=”50%” style=”stop-color: #2e375c” />
<stop offset=”100%” style=”stop-color: #477b8d” />
</linearGradient>

<mask id=”Mask” width=”300″ height=”80″>
<rect
width=”300″
height=”50″
ry=”9″
fill=”white”/>
</mask>

<filter id=”filter3610″>
<feGaussianBlur stdDeviation=”4″ id=”feGaussianBlur3612″ />
</filter>
</def>

<!– black background –>
<g >
<rect
width=”400″
height=”100″
/>
</g>

<a xlink:href=”http://www.psfreak.com/vista-styled-button&#8221; target=”_top”>
<g transform=”translate(50,25)”>
<rect
style=”fill:url(#grad1)”
width=”300″
height=”50″
ry=”9″
mask=”url(#Mask)” />

<!– Outside glow effect Layer –>
<rect
fill=”none”
stroke=”#7f99ef”
stroke-width=”6″
style=”filter:url(#filter3610)”
width=”300″
height=”50″
ry=”9″
mask=”url(#Mask)” />

<!– Highlight Layer –>
<rect
style=”fill:#ffffff;fill-opacity:.1;”
width=”300″
height=”25″
ry=”4.5″
mask=”url(#Mask)” />

<text x=”20″ y=”30″ font-family=”Verdana” font-size=”20″ fill=”white” >
PSfreak Inspired Button
</text>
</g>
</a>

</svg>

Advertisements

One response

  1. […] for example the Vista (TM) Button who owns it? That would be Microsoft (TM). A tutorial on how to create one is only teaching how to […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: