结果图：
将以下代码保存至sample.svg文件中：
<!-- SVG图形一开始生命命名空间 --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <!-- 图形的坐标系 --> <defs> <!-- 设置后面要用到的一些定义 --> <linearGradient id="fade"> <!-- 设置一种渐变色命名为“fade” --> <stop offset="0%" stop-color="#008"/> <!-- 深蓝 --> <stop offset="100%" stop-color="#ccf"/> <!-- 渐变到浅蓝 --> </linearGradient> <!-- 画一个具有宽的黑色边框并且渐变色为填充色的矩形 --> </defs> <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="url(#fade)"/> </svg>
以下为html显示文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG矢量图</title> </head> <body> <object data="./sample.svg" type="image/svg+xml" width="300px" height="300px" /> </body> </html>