画像を好きな形に切り抜き

SVGを使って画像を好きな形に切り抜いてみましょう。

参考（外部サイト）：10分でわかるSVG 基礎編 　こちらの５ページ目

 

その前に、SVGを作りましょう。SVGってなあにという方はWikipediaが参考になります。（こちら）

要するに、図形を文で表すのです。

SVG画像自体はIllustrator、フリーソフトならInkscapeで作成することができます。
下の六角形はInkscapeで作ったものです。

この六角形の画像は、下のようなデータになっています。

<svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" width="210px" height="210px">
    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       d="M 87.255685,0.34375 1.0625,50.145025 l 0,99.533435 86.193185,49.76671 86.193185,-49.76671 0,-99.533435 L 87.255685,0.34375 z m 0,5.529635 81.423875,47.036457 0,94.003798 -81.423875,47.00189 -81.4238749,-47.00189 0,-94.003798 L 87.255685,5.873385 z m 0,7.741488 -74.719192,43.165714 0,86.262303 74.719192,43.13116 74.719195,-43.13116 0,-86.262303 -74.719195,-43.165714 z"
       id="path3038"
       inkscape:connector-curvature="0" />
</svg>

この六角形の図形を作る重要な部分は、d=""の中の長い文書です。この長い文書だけコピーしておきましょう。

このページのソースコードを見ても、六角形のあった箇所に同じ文面が出てきます。
保存したSVGファイルをテキストエディタなどで開くと、中の文書が見れます。
さて、SVGが用意できたところで画像の切り抜きです。 「画像のクリッピング」とも呼ばれます。
では、クリッピングされる画像を用意しましょう。

これを、先ほどの六角形にクリッピングします。

ソースコード。

<svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" width="210px" height="210px">
<clipPath id="hexa">
       <path d="M 87.255685,0.34375 1.0625,50.145025 l 0,99.533435 86.193185,49.76671 86.193185,-49.76671 0,-99.533435 L 87.255685,0.34375 z m 0,5.529635 81.423875,47.036457 0,94.003798 -81.423875,47.00189 -81.4238749,-47.00189 0,-94.003798 L 87.255685,5.873385 z m 0,7.741488 -74.719192,43.165714 0,86.262303 74.719192,43.13116 74.719195,-43.13116 0,-86.262303 -74.719195,-43.165714 z" />
</clipPath>
<image xlink:href="http://yaosame.m22.coreserver.jp/freo/files/page_options/svg/sub1/sub1.jpg" clip-path="url(#hexa)"   width="210px" height="210px"/>
</svg>

切り抜く形を変えたい場合は、赤文字の部分を差し替えましょう。

いろんな図形ができますが、シンプルなほうが良いかもしれませんね。

Raphaelというjavascriptのライブラリを使うともっといろいろなことができますよ。
外部サイト：Raphaëlを使って画像を好きなかたちにトリミングする

sub1

sub1.jpg