ロゴ画像をSVG形式のファイルで埋め込む事ってありますよね。PNGはどうしてもボヤけてしまったりします。しかし、SVG形式の画像は埋め込むと表示されない事があります。そんな時の対処法を備忘録も兼ねて掲載します。
[html]
<div class="logo">
<img src="images/logo.svg" alt="ロゴ" />
</div>
[/html]
まず、シンプルにimgタグでsvgを埋め込んでみます。そうすると、ロゴが大きく表示されます。このロゴのサイズを指定する必要があります。cssでサイズを指定します。
[css]
.logo img{
width: 160px;
height: 40px;
}
[/css]
SVGファイルのサイズ指定方法は他にもあります。今回は最もシンプルな方法の1つをご紹介させて頂きました。問題の解決に役立てて頂けると嬉しく思います。