概要
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 でクリッピングすることですかね。
他にもっといい方法を見つけたらアップデートしたいと思います。