一、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;
            }