详述如何使用SVG图形

SVG可缩放矢量图形(Scalable Vector Graphics),是一种用于描述二维矢量的图形。SVG严格遵从了XML语法,并用文本格式的描述性语言来描述了图像内容,我们可以通过浏览器的方式打开此类文件。如果用文本编辑器打开一个SVG图形,我们就会发现它实际上就是由一串XML代码构成的。正因如此,Google可以通过对SVG内容中的文本进行索引来达到精确搜索图片的效果。

不仅如此,SVG更为强大之处在于,可以在不失真情况下进行任意的缩放,文件容量也较小。同时,和传统Web字体不同的是,SVG可以使用多种颜色、渐变甚至复杂的过滤器来处理文字,因此SVG是制作Logo、图标、按钮及网页背景的理想选择。

SVG同样可以把多个图像集成到一个文件中。而且在交互性上要优于位图图片;你可以使用图片名称来引用SVG对象,相比于通过手动计算像素位置通过CSS样式定位图片,显然方便了很多。

那该如何在网页中使用SVG呢?

在页面里添加SVG图形分别有内联、外联两种方式。

1、内联方式:像HTML中的其它元素一样使用,在此基础上可以编写HTML,JavaScript和SVG的交互应用。

<body>
<svg width="200" height="200">
</svg>
</body>

通过内联方式添加一个圆环。(测试)

<body>
<svg width="200" height="200">
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
</svg>
</body>

添加文字。

<svg width="200" height="200">
<text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
font-size="40px" font-weight="bold">技术控</text>
</svg>

2、外联方式:通过<img>元素,在HTML导入外部SVG文件,缺点是无法编写与SVG元素进行交互的脚本。

<img src="jishukong.svg" />

我们可以先在外部准备一个svg图形试一下,新建文本,将以下内容复制进去,另存为svg。

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="10" width="100" height="80" stroke="red" fill="#ccc"></rect>
<text x="10" y="55" font-family="Droid Sans" stroke="#00f" fill="#00f" font-size="10px" font-weight="bold">jishukong.net</text>
</svg>

然后在网页里调用,可以看到演示图形为一个红色边框的长方形,中间印有蓝色网址。

其实SVG图形除了可以使用相关的专业软件制作外,也可以通过其它格式的图片转换得到。

SVG图形制作工具:Inkscape
微软技术资源库:SVG资料
在线转化网址:Convert image to the SVG format
在线图像编辑器:SVG-Edit
 
目前共有3条评论
你目前的身份是游客,评论请输入昵称和电邮!

  1. 不错的文章,内容文风幽默.
    荷兰网 2015.02.15 17:19 @
  2. 这个不错!
    花开花落 2014.12.26 16:04 @
  3. 不是很懂了
    露兜 2014.12.8 16:22 @
  • 暂无Trackback