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