SVGファイルについて

SVGとは

Scalable Vector Graphicsのこと。ベクトル形式の画像ファイルなので拡大しても劣化しない。(対Retinaディスプレイで便利かも)
HTMLに直接書くことができたり<img>で使用したりCSSの背景で使用したりできる。ブラウザによっては対応していな時もあるので注意が必要。

<img src="sampleImg.svg" />

1	<img src="sampleImg.svg" />

.bgImg {
  background: url(img/sampleImg.svg) no-repeat 0 0; 
}

.bgImg {

background: url(img/sampleImg.svg) no-repeat 0 0;

}

<object type="image/svg+xml" data="sampleImg.svg" width="250" height="150"></object>

1	<object type="image/svg+xml" data="sampleImg.svg" width="250" height="150"></object>

<svg>
  <rect x="1" y="1" fill="#005AFF" stroke="#222222" width="250" height="100"/> 
</svg>

<svg>

</svg>

インラインで書くとJavascriptで操作ができる。