一、svg的四种使用方式

一、svg的四种使用方式

1.在浏览器中直接打开svg格式的图片

2.在html使用<img>标签使用

<p><img src="simple.svg" />原始大小</p>

<p><img src="simple.svg" width="50" height="50" />50 x 50</p>

<p><img src="simple.svg" width="400" height="400" />400 x 400</p>

3.直接在html中使用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>

4.作为css背景

<div id="bg"></div>

  #bg {
                width: 400px;
                height: 400px;
                background: white url(simple.svg) repeat;
                box-shadow: rgba(0,0,0,.5) 2px 3px 10px;
                border-radius: 10px;
            }