HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML <svg> 矢量图形标签

HTML SVG是一个缩写,代表可缩放矢量图形。

HTML SVG 是一种模块化语言，用于在 XML 中描述图形。它用 XML 描述二维矢量和混合矢量/光栅图形。这是 W3C 的建议。SVG 图像及其行为在 XML 文本文件中定义。因此，作为 XML 文件，您可以使用文本编辑器创建和编辑 SVG 图像，但通常首选inkspace 等绘图程序来创建它。

SVG 主要用于矢量图形，如饼图、X、Y 坐标系中的二维图等。

<svg> 元素指定 SVG 片段的根。您可以为 SVG 文件中的每个元素和每个属性设置动画。

HTML SVG 圆示例

让我们看看通过 svg 标签绘制圆的例子。

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

输出：

HTML SVG 矩形示例

让我们看看通过 svg 标签绘制矩形的例子。

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

在这里，我们使用了 rect 标签的宽度和高度属性。

输出：

HTML SVG 多边形示例

让我们看看通过 svg 标签绘制多边形的例子。

<!DOCTYPE html>  
<html>  
<body>  
  <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>   
</body>  
</html>

在这里，我们使用多边形标签的点属性。

输出：

为什么 SVG 优于其他图像格式？

SVG 图像可以保存为尽可能小的尺寸。与 JPG 或 PNG 等位图图像格式不同，它不包含一组固定的点。因此，在任何分辨率下都可以轻松进行高质量打印。

SVG 图像可以放大到一定程度而不会降低图像质量。

SVG 图像及其行为在 XML 文本文件中定义，因此可以使用任何文本编辑器创建和编辑它们。



上一主题 HTML <sup> 上标标签 下一主题 HTML <table> 表格标签
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具