Front End

Appearance

一个简单的SVG示例 ​

SVG图片可以非常简单，也可以非常复杂。下面是一个简单的例子：

xml
<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>
<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>

正如你看到的，这个例子代码是纯XML。

这个例子画了一个宽100像素高100像素的矩形。边框颜色（矩形轮廓）是HTML颜色值#ff0000。填充色为#0000ff。

SVG图片结果如下：