SVG image の角を丸める

概要

HTML では、選択したDOM要素に対し、CSS で border-radius: XXpx; とすれば、対象の角を丸めることが可能です。
SVG でも、rect 要素の rx、ry を指定すると css の定義と同じように角を丸めることができます。
ただ、今後見直されるかもしれませんが、image 要素には rx、ry オプションが使用できないようです。
やりたいのは image 要素の角を丸めること。

HTML の場合

HTML で DOM 要素の角を丸めることは、CSS で定義可能です。

SVG の場合

rect を丸める

rect 要素の角を丸める方法は、以下の通り、オプションでサポートされています。

imageを丸める

今の所、一番楽かな？と思うのは clipPath を使用して、角の丸まった rect でクリッピングすることですかね。
他にもっといい方法を見つけたらアップデートしたいと思います。