Some SVG Examples

This section shows a few short examples of SVG code, including how to use SVG to create a rollover and how XLink is used in SVG.

SVG Rollovers

In a conventional HTML Web page, it is necessary to use JavaScript to produce rollover effects. In SVG, rollover effects can be produced using SVG declarative syntax alone. Listing 15.2 shows a simple rollover with a message about SVG.

Listing 15.2. Mouseover.svg: A Message About SVG
<?xml version='1.0'?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg> 
<rect id="myRect" x="20" y="30" rx="10" 
  ry="10" width="250" height="50" 
  style="fill:white; stroke:blue; stroke-width:4"> 
<set attributeName="fill" from="white" to="#FFFF00" 
  begin="mouseover" end="mouseout" /> 
</rect> 
<text x="35" y="65" 
  style="fill:blue; stroke:none; font-family:Arial,sans-serif;  
  font-size:28; pointer-events:none " visibility="visible"> 
<animate begin="myRect.mouseover" 
  attributeName="visibility" from="visible" 
to="hidden" dur="0.1s" fill="freeze" /> 
<animate begin="myRect.mouseout" 
  attributeName="visibility" from="hidden" 
to="visible" dur="0.1s" fill="freeze" /> 
SVG is cool! 
</text> 
<text x="35" y="65" 
  style="fill:red; stroke:none; font-family:Arial,sans-serif; 
  font-size:28; pointer-events:none; visibility:hidden;"> 
<animate begin="myRect.mouseover" 
  attributeName="visibility" from="hidden" 
to="visible" dur="0.1s" fill="freeze" /> 
<animate begin="myRect.mouseout" 
  attributeName="visibility" from="visible" 
to="hidden" dur="0.1s" fill="freeze" /> 
SVG is RED HOT! 
</text> 
</svg>

When the document loads a simple text message, SVG is Cool! is visible against a white background inside a rectangle. When the rectangle is rolled over, its fill color changes to yellow, the first text message is hidden, and the message SVG is RED HOT! is displayed. The change in text is achieved by animating the visibility property of the two text elements in the document.

Figure 15.2 shows a composite image that includes both the rolled-over and unrolled-over versions of the rectangle.

Figure 15.2. Rolled-over and unrolled-over versions of the rectangle.


XLink Links in SVG

SVG uses XLink linking mechanisms to link to external resources and uses a subset of XPointer to address fragments in the same SVG document.

Listing 15.3 shows an example of using XLink in an SVG document.

Listing 15.3. SVGLink.svg: An Example of Using an XLink Link in SVG
<?xml version='1.0'?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg> 
<rect x="0" y="0" width="100%" height="100%" 
  style="fill:#FFFFFF" /> 
<a xlink:href="http://www.XMML.com/" > 
<text x="20" y="30" 
  style="fill:#666666; stroke:none; font-family: 
  'Times New Roman', serif; font-size:24" > 
Link to the XMML.com all-SVG Web site. 
</text> 
</a> 
</svg>

The SVG a element uses an xlink:href attribute to specify the resource to be traversed to. As you can see in Figure 15.3, rolling over the text causes a pointing-finger cursor to appear. Clicking the text links to the www.XMML.com all-SVG Web site.

Figure 15.3. An XLink hyperlink to an external resource.


Using XPointer to Reference Definitions

SVG documents, other than very short ones, likely will include a definitions section contained in a defs element.

Listing 15.4 shows an example of using a bare names XPointer (now called shorthand form in the XPointer drafts that came out after the SVG 1.0 Recommendation was completed) to reference the definition of an SVG filter that applies a drop shadow to the text.

Listing 15.4. Reference.svg: Applying an SVG Filter on Mouseover
<?xml version='1.0'?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg>  
<defs> 
<style type="text/css"> 
<![CDATA[ 
text {font-family:Arial, sans-serif; 
font-size:16; 
fill:black; 
stroke:none; 
} 
text.big {font-family:Arial, sans-serif; 
font-size:35; 
fill:black; 
stroke:none; 
} 
]]> 
</style> 
<filter id="myFilter" width="140%" height="140%" y="-20%"> 
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" 
  result="Blur" /> 
<feOffset in="Blur" dx="3" dy="3" result="OffsetBlur" /> 
<feMerge> 
<feMergeNode in="OffsetBlur" /> 
<feMergeNode in="SourceGraphic" /> 
</feMerge> 
</filter> 
</defs> 
<text x="20" y="20" > 
Mouse the text below and watch a drop shadow being applied to 
  it. 
</text> 
<text class="big" x="20" y="120" filter="none"> 
<set begin="mouseover" end="mouseout" 
  attributeName="fill" from="black" to="red" /> 
<set begin="mouseover" end="mouseout" 
  attributeName="filter" from="none" to="url(#myFilter)" /> 
Sams Teach Yourself XML in 10 Minutes 
</text> 
<text class="big" x="20" y="220" filter="none"> 
<set begin="mouseover" end="mouseout" 
  attributeName="fill" from="black" to="red" /> 
<set begin="mouseover" end="mouseout" 
  attributeName="filter" from="none" to="url(#myFilter)" /> 
Sams Teach Yourself XML in 10 Minutes 
</text> 
</svg>

Figure 15.4 is a composite image with both rolled-over and unrolled-over text.

Figure 15.4. A drop shadow created using SVG filter elements in response to rolling over the text


This short chapter has been able to indicate only a few of SVG’s capabilities. Appendix B, “XML Tools,” gives some information about Web sites and mailing lists where you can explore SVG further.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset