這只是一個入門的實力，但無不展示了SVG足夠的強大。如果再配合其他的技術，諸如javascript等，可以想象很多超難的圖形都能在網頁上展現出來。
Step1. //HTML5.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 width="400" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Reusing items</desc>
<defs>
<polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75" fill="none" stroke="purple" stroke-width="4"/>
<radialGradient id="irisGradient">
<stop offset="25%" stop-color="green" />
<stop offset="100%" stop-color="dodgerblue" />
</radialGradient>
<g id="eye">
<ellipse cy="50" rx="50" ry="25" fill="none" stroke="black"/>
<circle cy="50" r="25"/>
<circle cy="50" r="10" fill="black"/>
</g>
</defs>
<g>
<use xlink:href="#eye" x="125" fill="url(#irisGradient)"/>
<use xlink:href="#eye" x="250" fill="dodgerblue"/>
<use xlink:href="#lens"/>
<use xlink:href="#lens" x="125"/>
<line x1="65" y1="50" x2="310" y2="50" stroke="plum" stroke-width="2"/>
</g>
</svg>
Step2. //HTM5.jsp
<html>
<head>
<title>Hello World!</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<!-- 下一句嵌入SVG內容 -->
<embed src="HTML5.svg">
</body>
</html>
Step3. //http://127.0.0.1:8080/HTML5.jsp
