SVG 教程



  • 什么是 SVG?

    SVG 代表可缩放矢量图形。
    SVGXML 格式定义了基于矢量的图形。
    SVG 用于为 Web 定义基于矢量的图形
    可以对 SVG 文件中的每个元素和每个属性进行动画处理
    SVGW3C 的推荐
    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 图像通常更为方便。