1、什么是SVG？
- SVG是使用XML描述的矢量文件
- W3C标准
- 浏览器支持情况
http://caniuse.com/#cats=SVG
IE 9+
Chrome 33.0+
Firefox 28.0+
Safari 7.0+
2、什么是矢量图和位图？
3、使用方式
先准备一个“笑脸”的SVG文件"smile.svg"
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200">
<!--Face-->
<circle cx="100" cy="100" r="90" fill="#39F" />
<!--Eyes-->
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black" />
<!--Smile-->
<path d="M 50 140 A 60 60 0 0 0 150 140"
stroke="white" stroke-width="3" fill="none" />
</svg>
①浏览器直接打开
使用浏览器打开SVG文件
②在HTML中使用<img>标签引用
<h1>Hello SVG with <img></h1>
<p><img src="smile.svg">原始大小</p>
<p><img src="smile.svg" width="50" height="50">50 * 50</p>
<p><img src="smile.svg" width="400" height="400">400 * 400</p>
③直接在HTML中使用SVG标签
<h1>在网页中直接使用 SVG 标签</h1>
<p>
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200">
<!--Face-->
<circle cx="100" cy="100" r="90" fill="#39F" />
<!--Eyes-->
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black" />
<!--Smile-->
<path d="M 50 140 A 60 60 0 0 0 150 140"
stroke="white" stroke-width="3" fill="none" />
</svg>
</p>
④作为CSS背景
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: #EFEFEF;
}
#bg{
width: 400px;
height: 400px;
background: white url("smile.svg") repeat;
box-shadow: rgba(0, 0, 0, 0.5) 2px 3px 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>SVG图片作为背景</h1>
<div id="bg">
</div>
</body>
网友评论