こんにちは山形の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タグでの読み込みにはいい面もあるようなので
今後はしっかりと状況に合わせて使っていきたいと思います👍
