SVG 介绍

什么是 SVG ?

一种图像文件格式,英文全称 Scalable Vector Graphics,意为可缩放的矢量图形

它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。

主流浏览器均支持 SVG。加载慢是 SVG 的一个缺点。但是 SVG 也有自身的优点,比如它实现了 DOM 接口(比 Canvas 方便),不需要安装第三方插件就可以在浏览器中使用(比 Flash 方便)。

为什么要用 SVG ?

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

SVG 与 Flash

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

基础

一个简单的例子

1
2
3
4
5
<svg version="1.1" baseProfile="full"  width="300" height="200" mlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

最后样子是这样的 👉 链接 🔗

该图绘制流程包括以下几步:

  1. 从 SVG 根元素开始:
    • 应舍弃来自 (X)HTML 的 doctype 声明,因为基于 SVG 的 DTD 验证导致的问题比它能解决的问题更多。
    • versionbaseProfile属性是必不可少的,供其它类型的验证方式确定 SVG 版本。
    • 作为 XML 的一种方言,SVG 必须正确的绑定命名空间 (在 xmlns 属性中绑定)。
  2. 绘制一个完全覆盖图像区域的矩形 ,把背景颜色设为红色。
  3. 一个半径80px的绿色圆圈绘制在红色矩形的正中央 (向右偏移150px,向下偏移100px)。
  4. 绘制文字“SVG”。文字被填充为白色, 通过设置居中的锚点把文字定位到期望的位置:在这种情况下,中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置,确保最后的样式是美观的。

想了解更多?请参考文末详细教程

现实中的使用

更多

SVG 是一个庞大的规范,想了解更多的绘画方法请访问 👉 SVG教程- MDN

参考文章