拡大・縮小しても画質が劣化しないため、アイコンなどに使われることが多い SVG ですが、表示するサイズによっては端が欠けてしまうことがあります。
僅かですが右側と下側が欠けています。
SVG の端が切れる原因
ブラウザのデフォルトスタイルで、<svg>タグのoverflowプロパティの値がhiddenになっているのが原因です。
SVG の端が切れる場合の対処法
CSS で、<svg>タグのoverflowの値をvisibleに変更してあげれば OK です。
svg {
overflow: visible;
}
HTML に直接 SVG タグを記述して埋め込んだ場合にのみ発生
<svg>タグに適用されているスタイルが原因のため、この現象は SVG を HTML にインラインで直接記述して埋め込んでいる場合にのみ発生するようです。一方、<img>タグで埋め込んだ場合などでは、同じサイズで表示しても端が欠けることはありませんでした。
終わりに
以上、ウェブページ上で SVG の端が切れてしまう時の対処法についてご紹介しました。インライン SVG は、自由度が高いため頻繁に使用する埋め込み方法ですが、思わぬところに罠が潜んでいました。とはいえ、解決方法は非常に簡単でしたね。
<svg>タグや<img>タグ以外の SVG の埋め込み方法については、「HTML・CSS でウェブページに SVG を表示させる 4 つの方法」という別の記事で紹介していますので、ぜひご覧ください。