初识SVG

最新推荐文章于 2023-05-10 00:15:00 发布

原创最新推荐文章于 2023-05-10 00:15:00 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了SVG（可缩放矢量图形）的基本概念及其与HTML5 canvas的区别。SVG支持文本、图像和矢量图形形状，能够通过脚本实现动态效果和动画。文章还探讨了SVG的不同呈现方式，包括内联到HTML和作为独立文件。

SVG概述

　　可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 SVG允许三种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。 SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。

　　SVG绘图是交互式和动态的。例如，可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件，动态创建和修改都比较困难。而SVG是文本文件，动态操作是相当容易的。而且，SVG直接提供了完成动画的相关元素，操作起来非常方便。

　　SVG与其他Web标准兼容，并直接支持文档对象模型DOM。这一点也是与HTML5中的canvas相比很强大的地方(这里注意，SVG内部也是用一个类似的canvas这样的东西来展示SVG图形，到后面你会发现很多特性和HTML5的canvas还有点像；文中如果没明确说明是SVG的canvas的话，都代指HTML5中的canvas元素)。因而，可以很方便的使用脚本实现SVG的很多高级应用。而且SVG的图形元素基本上都支持DOM中的标准事件。可将大量事件处理程序(如“onmouseover”和“onclick”)分配给任何SVG图形对象。虽然SVG的渲染速度比不上canvas元素，但是胜在DOM操作很灵活，这个优势完全可以弥补速度上的劣势。

　　SVG既可以说是一种协议，也可以说是一门语言；既是HTML的一个标准元素，也是一种图片格式。

SVG的呈现方式
　内联到HTML
　　SVG是标准的HTML元素，直接写到HTML中就可以了，看下面的例子：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
  
  <title> My First SVG Page</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="200px">
    <rect x="0" y="0" width="100%" height="100%"
          fill="none" stroke="black"/>
    <circle cx="100" cy="100" r="50"
            style="stroke: black; fill: red;"/>
  </svg>
</body>
</html>

结果:

　独立SVG文件
　　独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。在浏览器中嵌入这个svg文件就可以使用了。
1.独立的SVG文件/页面，定义的模板基本就像下面的一样：

　　把这样的文本文件保存成以svg为扩展名的文件，例如sun.svg，这样的文件可以直接用浏览器打开浏览，也可以作为引用嵌入到别的页面中。
2.HTML引用外部的SVG文件。
　　使用object或者img元素嵌入svg图形就可以了，例如下面的小例子：

<!DOCTYPE html>
<html>
<head>
  <title> My First SVG Page</title>
</head>
<body>
  <object data="sun.svg" type="image/svg+xml"
          width="300px" height="300px">
    
    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>
  </object>

  <img src="sun.svg" alt="svg not supported!" />
</body>
</html>