Coding云

码云的愿心:希望广大程序猿朋友摘掉苦逼的昵称

框架

如何使用可缩放矢量图形(SVG)-——做占位图

简单示例

我先给你看下边一个示例。之后我会详细讲一下,目前这只是一个非常简单的.svg文件。

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" fill="green" /> </svg> 

复制以上的代码把它保存成 example.svg(你要重命名也行),然后在浏览器中打开你的.svg文件,你会在浏览器的左上角看到一个绿色的矩形。

一个使用SVG创建的绿色矩形

我们来仔细看一下代码。根元素是 <svg> ,它有几个属性:width、height以及一些XML索引代码。里边有一个 <rect>元素,也包含了几个属性,这是创建绿色矩形的代码部分。

目前我们只考虑xmlns部分,这和我们之前创建XHTML文件的方式非常像。它把SVG绑定到特定的命名空间,这样命名相似的元素之间就没有冲突了。除非你的页面需要通过一个XML解析器来运行,不然也可以不需要这个xmlns。

你会发现其实上边的代码不同的人写起来是不一样的。比如说,上边的文件没有xmlns和xlink也可以运行,所以你可以把上边的代码修改如下:

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="green" /> </svg> 

Mozilla建议不要使用doctype声明,因为它可能会在验证上出现问题。所以最好是指定SVG的版本以及设置baseProfile。

一般情况下我们不会直接在浏览器中加载.svg文件,更多时候我们会在一个HTML页面中嵌入SVG。看一下如何实现:

如何在HTML中显示SVG

无论你是喜欢在矢量编辑工具中创建SVG还是自己编写代码,这几个方法都可以帮你把SVG放到HTML页面中显示

  • 将 SVG 作为图像导入
  • 将 SVG放入 iframe 中导入
  • 将 SVG 作为object对象导入
  • 将 SVG 作为一个data URI导入  (节选这篇文章,我只选择了该方法,需要其他方法的可以到原文查看,原文链接在文章最下方)
  • 使用内联 SVG


将SVG作为Data URI导入

可以把SVG转成一个data URI,把它作为data导入。可以通过在线或离线的工具来进行转换(这有一个很棒的拖放工具),然后把你的data URI加入到一个<img>或<object>标签内,或是放到CSS中。

<img src="data:image/svg+xml;base64,[data]>

background: url(data:image/svg+xml;base64,[data]);

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>
 fallback content here
</object> 

上面的代码中的[data],可以导入转换工具中返回的实际的data,这是我插入example.svg之后的效果

<object type="image/svg+xml" data="data:image/svg+xml;base64,PCEtLQo8c3ZnIHZlcnNpb249IjEuMSIKICAgICBiYXNlUHJvZmlsZT0iZnVsbCIKICAgICB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIKICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoKICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJncmVlbiIgLz4KPC9zdmc+Ci0tPgoKPHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgIGNsYXNzPSJleGFtcGxlIgoJeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgoJeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogCgk8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJncmVlbiIgLz4KPC9zdmc+Cg=="> fallback content here </object> 

在一个HTML文档中加入上边的这个长长的代码,就可以看到一个绿色的矩形。

本文根据@Steven Bradley的《SVG Basics—How to Work with Scalable Vector Graphics》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.vanseodesign.com/web-design/svg-basics/

coding云截取了其中一部分,查看原文请到: http://www.w3cplus.com/svg/svg-basics.html

转载自:http://www.w3cplus.com/svg/svg-basics.html


这篇文章帮我解决问题了,我忍不住的想点赞!!!
同时也想小小的打赏一笔表示感谢。

已经有15位老爷赞赏了本文

打赏方式一:
打开支付宝,使用“扫一扫”打赏。
支付宝打赏
打赏方式二:
打开微信,使用“扫一扫”打赏。
微信打赏
html , svg