広がりつつある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)...