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>在網(wǎng)頁中直接使用 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>
