SVG 教程
1. SVG 教程 2. SVG 简介 3. SVG 实例 4. SVG 在 HTML 中 5. SVG 矩形 6. SVG 圆形 7. SVG 椭圆 8. SVG 直线 9. SVG 多边形 10. SVG 曲线 11. SVG 路径 12. SVG 文本 13. SVG Stroke 属性 14. SVG 滤镜 15. SVG 模糊效果 – 高斯模糊 16. SVG 阴影 17. SVG 渐变 – 线性 18. SVG 渐变- 放射性 19. SVG 参考手册

SVG 简介

SVG 简介


SVG 是使用 XML 来描述二维图形和绘图程序的语言。


学习之前应具备的基础知识:

继续学习之前,你应该对以下内容有基本的了解:

  • HTML
  • XML 基础

如果希望首先学习这些内容,请在本站的首页选择相应的教程。


什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 是 W3C 推荐标准

SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。

如需阅读更多有关 W3C 的 SVG 活动的信息,请访问我们的 W3C 教程


SVG 的历史和优势

在 2003 年一月,SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有:Sun公司(已被Oracle公司收购)、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比,使用 SVG 的优势在于:

  • SVG 可被非常多的工具读取和修改(比如记事本)
  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。


查看 SVG 文件

Internet Explorer9,火狐,谷歌Chrome,Opera和Safari都支持SVG。

IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器,这是免费提供的。


创建SVG文件

由于SVG是XML文件,SVG图像可以用任何文本编辑器创建,但它往往是与一个绘图程序一起使用,如Inkscape,更方便地创建SVG图像。