<SVG> | HTML绘图标签的定义与用法

由 hcduguo

定义与用法

  • SVG是表示可伸缩矢量图形的缩写。
  • SVG是一种模块化语言，用于描述XML中的图形。它描述了XML中的二维矢量和矢量/栅格混合图形。
  • SVG主要用于向量类型图，例如饼图，X，Y坐标系中的二维图等。

语法格式

<svg width=”” height=””>……</svg>  

示例代码

<svg width="100" height="100">  
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  
</svg>

效果展示：

<svg width="200" height="100">  
  <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />  
</svg>

效果展示：

<svg height="210" width="500">  
  <polygon points="100,10 40,198 190,78 10,78 160,198"  
  style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />  
</svg>

效果展示：

浏览器支持

主流浏览器都支持<svg>标签。

为什么SVG比其他图像更受青睐？

SVG提供了目前网络流行的PNG和JPEG格式无法具备的优势：

  • SVG文件比JPEG和PNG格式的文件要小很多，因而下载也很快。
  • 可以任意放大图形显示，但绝不会以牺牲图像质量为代价；
  • 可在SVG图像中保留可编辑和可搜寻的状态；
  • SVG图像及其行为在XML文本文件中定义，可以使用任何文本编辑器来创建和编辑。

相关