下一节:

  SVG 教程

  • 什么是 SVG？

    SVG 代表可缩放矢量图形。
    SVG 以 XML 格式定义了基于矢量的图形。
    SVG 用于为 Web 定义基于矢量的图形
    可以对 SVG 文件中的每个元素和每个属性进行动画处理
    SVG 是 W3C 的推荐
    SVG 与其他 W3C 标准集成，例如 DOM 和 XSL
    SVG 1.0 于 2001年9月4日成为 W3C 建议。
    SVG 1.1 于 2003年1月14日成为 W3C 建议。
    SVG 1.1（第二版）于 2011年8月16日成为 W3C 建议。

  • SVG的优势

    与其他图像格式（如JPEG和GIF）相比，使用 SVG 的优点是：
    • 可以使用任何文本编辑器创建和编辑 SVG 图像
    • 可以搜索，索引，脚本化和压缩 SVG 图像
    • SVG 图像可扩展
    • SVG 图像可以任何分辨率高质量打印
    • SVG 图像可缩放
    • 缩放或调整大小的 SVG 图形不会失去任何质量
    • SVG 是开放标准
    • SVG 文件是纯 XML

  • 学习SVG的先决条件

    在继续之前，您应该对以下内容有一些基本的了解：

  • 示例

    使用我们的“尝试一下”编辑器，您可以编辑 SVG，然后单击按钮以查看结果。 
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>我的第一个 SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
    尝试一下
    可以使用任何文本编辑器来创建SVG图像，但是使用诸如 Inkscape 之类的绘图程序创建 SVG 图像通常更为方便。
下一节: