阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 学前必读

      写在前面

      包括Inkscape在内的很多免费应用原生支持SVG格式的文件。

      但是本教程建议在学习过程中使用XML或文本编辑器,因为想要理解SVG内部的原理,最好的方法就是动手写一些SVG的标记。你

      需要注意到你的最终目标。各种SVG浏览器是有差异的,因此很可能你制作了一个SVG图形,并且用一个工具调试正常后,却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持SVG标准的程度不同,另外,如果你将其他技术和SVG一起使用(比如JavaScript和CSS),也会出现类似的情况。

      所有的现代浏览器都支持SVG,在某些情况下甚至几个版本都支持SVG。

      SVG wiki上有一份比较详细的支持SVG的浏览器列表,Firefox 1.5以后的版本支持SVG的部分内容,并且支持的程度越来越高。希望通过这份教程。

      正式开始之前,你需要基本掌握XML和其它标记语言比如说HTML,如果你不是很熟悉XML,这里有几个重点一定要记住:

      • SVG的元素和属性必须按标准格式书写,因为XML是区分大小写的(这一点和html不同)
      • SVG里的属性值必须用引号引起来,就算是数值也必须这样做。

      SVG是一个庞大的规范,本教程主要涵盖的是基础内容,一旦掌握了这些内容,你就有能力使用元素参考和接口参考,从而学懂其他你需要学会的内容。

      SVG的种类

      自从2003年成为W3C推荐标准以来,最接近的“完整版”SVG版本是1.1版,它基于1.0版,并且增加了更多便于实现的模块化内容,SVG1.1的第二个版本在2011年成为推荐标准,完整的SVG1.2本来是下一个标准版本,但它又被SVG2.0取代。SVG2.0正在制定当中,它采用了类似CSS3的制定方法,通过若干松散耦合的组件形成一套标准。

      除了完整的SVG推荐标准,W3C工作组还在2003年推出了SVG Tiny和SVG Basic。这两个配置文件主要瞄准移动设备。首先SVG Tiny主要是为性能低的小设备生成图元,而SVG Basic实现了完整版SVG里的很多功能,只是舍弃了难以实现的大型渲染(比如动画)。2008年,SVG Tiny1.2成为W3C推荐标准。

      另外还有一些关于SVG打印规格的项目,增加对多页面和颜色管理的支持,但是这项工作已经终止。

      目录
      目录