SVGファイル続編。表示する際の注意点

こんにちは山形のWEBデザイナー菅野です。

以前にSVGファイルについて書きました

大手企業のWEBサイトが利用しているSVG。使用のポイントと注意点

記事を書く前は、あまりSVGを使っていませんでしたが
その後、WEB制作において積極的に使うようにしています。

実際に使ってみて色々とわかってきましたが
WEB上での表示する際に少し注意が必要なようです。

SVGファイルをWEB上で表示させるにはいくつかのやり方があります。
ひとつは、下記のようにimgタグでSVGファイルを表示する方法です

<img src=”/img/logo.svg” alt=”ロゴ” width=”●●●” >

このやり方ですと
jpegやpngと同様に画像として表示することができます。
ファイルがsvgになっただけで非常に簡単な使い方になります

しかし、この場合 SVGファイルに対してcssが、JavaScriptが効かなくなるので注意が必要です。
私もSVGファイルに
マウスオーバーの画像を半透明にするエフェクトをつけようとしましたが
imgタグでの表示方法ではエフェクトがつけることができず
理由が中々わからず結構悩みました😅

SVGファイルを使う利点としては
ほかの画像ファイルとは違い、CSSでサイズや色の調整を後から簡単にできる利点と
アニメーションも対応していますので css・javascriptで動きをつけられる利点があります。
imgタグで表示してしまうと その恩恵が受けられなくなるというわけです

サイズや色の調整・アニメーションさせたい場合は
SVG形式の画像をそのままHTMLで記述すればOKです

HTMLで記述するとこうなります

ただその場合は、見ていただいてわかると思いますが
ソースコードがかなりの長さになります💦
サイズ・色の調整やアニメーションまで必要のない場合は
imgタグでの表示が良さそうです。

また そのほかにも
cssで背景画像として表示させる方法やobjectタグで読み込む方法もあります。
まだ検証しきれていないのですが
objectタグでの読み込みにはいい面もあるようなので
今後はしっかりと状況に合わせて使っていきたいと思います👍