広がりつつあるSVG このところSVGがWebにも広がりつつあり、たまに聞くけど、結局どう使うの？何に使えるの？という質問があります。 実際にSVGを使うとこんなことができるよ、というサンプルを紹介したいと思います。 まずはじめに。 SVGはどんなブラウザでも同じように見えるわけではありません。 現在のところ、IE8以下、Android 4.3以下ではサポートしていません。 （参照 http://caniuse.com/#search=svg 、2015年11月） SVGはjpgのような画像ファイルではなく、イラストレータ等で扱われる「ベクターデータ」です。 その特徴としては、 ・拡大・縮小をしても画像の劣化がないこと ・ハイパーリンクなどを画像中に埋め込むことができる などがあります。 画像を組み合わせて任意の形に切り抜いたサンプル 今回用意するもの ・画像（jpgデータ）×3枚 サンプル http://sample.creativeflake.com/svg/ まずは画像を並べる 今回は、大きな「shape-container」という枠に、クロワッサンの写真を背景として置きました。 そしてその中に「shape-center」と「shape-right」という入れ子を作り、それぞれの背景にコーヒーの写真、カップケーキの写真を置きました。 切り抜く 今回切り抜くのは、入れ子にした、「shape-center」と「shape-right」を平行四辺形に切り抜きます。 （※切り抜き方は任意の形でOK） まずは「shape-center」。 画面サイズを100%として考えます。 切り抜きのスタート地点の座標を（x座標, y座標）＝（40%, 0）としたときに、 そこからぐるっと平行四辺形を一周するように、各頂点の座標をそれぞれ、（20%, 100%）, （60%, 100%）, （80%, 0）となるようにします。 切り抜くCSSはclip-path: polygon（座標, 座標, ...） この座標に、一周ぐるっと値を入力します。 もう片方の画像も同じように もう片方の図形（shape-right）は台形に切り抜いていますが、こちらも同様、各座標を （80%, 0）