准备开始了!
这篇教程会帮你开始学习SVG.
这篇教程会帮你开始学习SVG.
可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用来描述二维矢量图形的XML 标记语言。 简单地说,SVG面向图形,XHTML面向文本。
SVG与Flash类似,都是用于二维矢量图形,二者的区别在于,SVG是一个W3C标准,基于XML,是开放的,而Flash是封闭的基于二进制格式的。因为都是W3C标准,SVG与其他的W3C标准,比如CSS, DOM和SMIL等能够协同工作。
文档
- SVG元素参考
- 了解所有 SVG 元素的细节。
- SVG属性参考
- 了解所有 SVG 属性的细节.
- SVG DOM API 参考
- 了解有关 SVG DOM API 的全部细节。
- 在 HTML 内容中应用 SVG 效果
- SVG与HTML, CSS 和 JavaScript一起工作,使用 SVG 增强常规 HTML 页面和web 应用。
- SVG in Mozilla
- SVG在Mozilla产品中的实现情况.
社区
- 浏览Mozilla论坛
工具
实例
- Google 地图 (route overlay) & 文档 (电子表格图表)
- SVG 气泡菜单
- SVG 创作指导方针
- Mozilla SVG 项目概览
- 与SVG、Mozilla有关的常见问题
- SVG Open 2009 上 SVG 和 Mozilla 主题的幻灯片和范例
- SVG 作为图片
- 使用 SMIL 的 SVG 动画
- Lion, Butterfly & Tiger
- SVG 艺术库
- 更多实例(SVG Samples croczilla.com、carto.net)
动画与交互
正如 HTML 一样,SVG 也有可被 JavaScript 访问的文档对象模型(DOM)和事件。这允许开发者创建丰富的动画和可交互的图像。
- 一些真正赏心悦目的 SVG svg-wow.org
- Firefox 扩展 (Grafox) 添加一个 SMIL 子集支持
- 交互式图片操作
- HTML transformations 使用 SVG 的
foreignObject
- 动画艺术
地图、图表、游戏与3D体验
少许的 SVG 即可极大地丰富网页内容,下面是一些大量使用 SVG 的范例。
- Tetris
- Connect 4
- US population map
- 3D box & 3D boxes
- jVectorMap (数据可视化的交互式地图)
- JointJS (JavaScript图表库)