SVG的基础使用：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
</head>
<body>
<!-- <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Figure of a Cat.</desc>
<circle cx="70" cy="95" r="50" style="stroke:black;fill:none"></circle>
<circle cx="55" cy="80" r="5" style="stroke:black;fill:#339933"></circle>
<circle cx="85" cy="80" r="5" style="stroke:black;fill:#339933"></circle>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke:black"></line>
<line x1="75" y1="95" x2="135" y2="135" style="stroke:black"></line>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
<polyline points="108 62,90 10,70 45,50 10,32,62" style="stroke:black;fill:none"></polyline>
<polyline points="35 110,45 120,95 120,105,110" style="stroke:black;fill:none"></polyline>
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke:black;fill:#ffcccc"></path>
<text x="60" y="165" style="font-family:sans-serif;font-size:14pt;stroke:none;fill:black">Cat</text>
</svg>
<svg width="4cm" height="5cm" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 80">
<rect x="10" y="35" width="40" height="40" style="stroke:black;fill:none"></rect>
<polyline points="10 35,30 7.68,50 35" style="stroke:black;fill:none"></polyline>
<polyline points="30 75,30 55,40 55,40 75" style="stroke:black;fill:none"></polyline>
</svg>
-->
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" >
<line x1="10" y1="10" x2="200" y2="10" style="stroke:black;stroke-width:5;" />
<line x1="10" y1="20" x2="200" y2="20" style="stroke:black;stroke-dasharray:9,5;" />
<line x1="10" y1="30" x2="200" y2="30" style="stroke:#9f9;stroke-width:5;" />
<line x1="10" y1="40" x2="200" y2="40" style="stroke:rgb(255,128,64);stroke-width:5;" />
<line x1="10" y1="50" x2="200" y2="50" style="stroke:rgb(60%,20%,60%);stroke-width:5;" />
<line x1="10" y1="60" x2="200" y2="60" style="stroke:rgb(60%,20%,60%);stroke-width:5;stroke-opacity:0.1" />
<rect x="10" y="70" width="30" height="50" style="stroke:black;fill:none;" />
<rect x="50" y="70" width="30" height="50" style="stroke:black;stroke-width:2;stroke-opacity:0.5;stroke-dasharray:9,5;fill:#9f9;fill-opacity:0.5" />
<rect x="90" y="70" width="30" height="50" ry="10" style="stroke:black;fill:none;" />
<ellipse cx="150" cy="100" rx="10" ry="20" style="stroke:black;fill:none;" />
<polygon points="15,150 55,150 45,160 5,160" style="stroke:black;fill:none;" />
<polyline points="5 20,20 20,25 10,35 30,45 10,55 30,65 10,75 30,80 20,95 20" style="stroke:black;fill:none;" />
</svg>
</body>
</html>