最終更新日 2023/10/20

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

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

画像切り抜き サンプル

切り抜き前
切り抜き前

切り抜き(直線)

切り抜き(六角形)

SVGタグで画像を切り抜く利点は?

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

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

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

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

クライアントサイド言語
サムネ画像
SVGタグを用いて画像を切り抜く