作成日2020年12月22日

SVGタグを用いて画像を切り抜く

SVGタグを用いて、ブラウザ上で画像を切り抜きます。切り抜く画像に手を加えることなく、プログラムコードの記述のみで自由に画像を切り抜けるのが利点です。
  • 切り抜きサンプル

切り抜きサンプル

切り抜き前

切り抜き前

切り抜き(直線)

切り抜き(六角形)

工夫すればいろんな可能性がありそうだが、ただ単に画像の切り抜きをするだけなら、あえてSVGタグを用いる利点はあまりなさそう。

一応ベクタデータなので、例えばスマホ表示などで横幅が変化した際、切り抜き画像がジャギるような現象も起きにくくなるのだろう。

プログラマーなんかは、こういった「元画像を加工することなくプログラムで切り抜く」みたいなのにちょっとした満足感を感じるかもね。

SVGタグの真骨頂はCSSアニメーションとの連携なので、学習コストが掛かるが覚えていきたい。(陳腐化が怖いので、ほどほどに)