Loading...

Single Post

HOME > post > Web > SVG画像が表示されない時の解決策

SVG画像が表示されない時の解決策

| Web
コーディング

ロゴ画像をSVG形式のファイルで埋め込む事ってありますよね。PNGはどうしてもボヤけてしまったりします。しかし、SVG形式の画像は埋め込むと表示されない事があります。そんな時の対処法を備忘録も兼ねて掲載します。

<div class="logo">
<img src="images/logo.svg" alt="ロゴ" />
</div>

まず、シンプルにimgタグでsvgを埋め込んでみます。そうすると、ロゴが大きく表示されます。このロゴのサイズを指定する必要があります。cssでサイズを指定します。


.logo img{
  width: 160px;
  height: 40px;
}

まとめ

SVGファイルのサイズ指定方法は他にもあります。今回は最もシンプルな方法の1つをご紹介させて頂きました。問題の解決に役立てて頂けると嬉しく思います。

関連記事

Contact Page