ロゴはSVGにして使いまわそう！簡単スマホ対応。｜ビリオンプランのスタッフブログ

せっかくのスマホサイト、高解像度デバイスで見たらロゴや見出し画像が粗くて残念。
なんてことはよくある話。というわけでロゴだけでもSVGでスマートフォン対応しましょう！

ロゴはSVGで使いまわそう。

サイト内で複数回の使用が想定されるロゴ画像は、いちいちサイズ別に画像を用意するのは面倒です。
ひとつベクターデータのSVGロゴを用意しておけば、使いまわせますし何より高解像度デバイスにも対応できます。

参考：各ブラウザの対応状況
http://caniuse.com/#search=SVG

SVGとは？

SVG（エスブイジー）【 Scalable Vector Graphics 】とは、ベクター形式の画像フォーマット／画像記述言語です。ベクター形式なので、画像品質を維持したまま拡大縮小を行うことができます。そのため高品質なグラフィックでも、ファイルサイズが小さいのが特徴です。JPEGやPNGデータのように、通常の画像データと同様に扱え、CSSで背景として指定することもできます。またXMLベースで策定された言語のため、テキストファイルでグラフィックを表現することが可能なのも特筆すべき点です。レスポンシブデザインがトレンドになっている現在では、必須の画像形式と言えます。

表示する方法はいろいろ。

imgないしはobjectタグで配置するか、CSSの背景として指定するか、インラインで直接コードを記述します。
ここでは当サイトでも採用している、直接インラインでコードを記述する方法を解説していきます。

SVGのコードを作成しよう。

ロゴデータをIllustratorで開き、別名で保存メニューからSVG(*.SVG)を選択します。

表示されたSVGオプションメニューから、SVGコードを表示をクリックします。
するとSVGコードが、エディタやブラウザなどで表示されるはずです。

SVGコードをシンプルに。

以下が当社のロゴをIllustratorで表示した際のコードです。

<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="397px" height="204px" viewBox="-16.604 -12.886 397 204"
	 style="enable-background:new -16.604 -12.886 397 204;" xml:space="preserve">
<defs>
</defs>
<g>
	<path d="M3.645,90.002c0-0.336,0.224-0.561,0.561-0.561h14.86c8.299,0,12.168,4.094,12.168,10.149c0,4.15-1.907,6.729-4.43,8.132
		v0.112c2.523,0.953,5.103,4.093,5.103,8.635c0,7.515-4.991,11.104-13.234,11.104H4.206c-0.336,0-0.561-0.225-0.561-0.561V90.002z
		 M18.057,105.03c3.14,0,4.991-1.682,4.991-4.485s-1.851-4.431-4.991-4.431h-5.832c-0.224,0-0.336,0.112-0.336,0.337v8.243
		c0,0.225,0.112,0.336,0.336,0.336H18.057z M12.225,120.9h6.28c3.365,0,5.159-1.795,5.159-4.767c0-2.916-1.794-4.767-5.159-4.767
		h-6.28c-0.224,0-0.336,0.112-0.336,0.337v8.859C11.888,120.788,12,120.9,12.225,120.9z"/>
（省略）
</svg>

このコードをそのまま貼り付けても問題なく使用できますが、
そのままだとコードがあまりに長く、また不要な記述も含まれています。

<svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="logo_BPJ" viewBox="0 0 366 176"><g><path d="M3.645,90.002c0-0.336,0.224-0.561,0.561-0.561h14.86c8.299,0,12.168,4.094,12.168,10.149c0,4.15-1.907,6.729-4.43,8.132v0.112c2.523,0.953,5.103,4.093,5.103,8.635c0,7.515-4.991,11.104-13.234,11.104H4.206c-0.336,0-0.561-0.225-0.561-0.561V90.002zM18.057,105.03c3.14,0,4.991-1.682,4.991-4.485s-1.851-4.431-4.991-4.431h-5.832c-0.224,0-0.336,0.112-0.336,0.337v8.243c0,0.225,0.112,0.336,0.336,0.336H18.057z M12.225,120.9h6.28c3.365,0,5.159-1.795,5.159-4.767c0-2.916-1.794-4.767-5.159-4.767h-6.28c-0.224,0-0.336,0.112-0.336,0.337v8.859C11.888,120.788,12,120.9,12.225,120.9z"/>（省略）</symbol>
</svg>

上記が当サイトで使用しているSVGコードのサンプルです。
不要と思われる記述や空白を除去し、管理しやすくしています。
具体的には、以下の修正を加えています。

svgタグ内のdefsタグを削除
svgタグの不要な属性を削除（xmlns:a~、style、widthなど）
svgタグにclass=”defs”を付与
svgタグ内にsymbolタグを追加し、ユニークなidを付与
symbolタグに、svgタグからviewBoxの指定を移す
symbolタグ内のインデントや空白・改行を削除

※xmlns:xlink属性はリンクを使用する際に必要。
参考：名前空間の速修講座 – SVG

文章にするとややこしいですが、コードを見比べつつやれば分かりやすいかと思います。
class=”defs”やIDを付与しているのは、後述するSVG Spriteで使用するためです。
これでSVGコードを使用する準備が整いました。

htmlにSVGコードを記述する。

さきほどの修正したコードを、body開始タグ直後に挿入します。
そして画像を使用したい箇所には、以下を挿入します。

<div class="logo">
<svg>
<title>BILLIONPLAN JAPAN Co, Ltd</title>
<use xlink:href="#logo_BPJ"/>
</svg>
</div>

これで先ほどのIDが参照され、SVGコードが画像として表示されます。
サイズや位置、色などはCSS側で指定・調整します。
なお色はcolorではなく、fillプロパティを使用します。

.logo svg {
	fill: #fff;
	width: 370px;
	height: 195px;
	margin-bottom: 15px;
}

参考：フィルプロパティ SVG1.1（第2版）
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/painting.html#FillProperty

ただこのままだと、body直後に挿入したSVGコード分の余白ができてしまうため、
以下のスタイルを適用し、非表示にしてしまいます。

.defs {
    display: none;
}

SVGコードを作成し、インラインで記述して使用する手順はここまでです。

とても簡単、そしてこの画像は当然ながら拡大しても品質が保たれます。

もちろんRetinaディスプレイのiPhoneで表示した場合も@2xな表示になります。

サンプル。

ロゴマークを表示するためのSVGコード・スタイルを、サンプルとしておいておきます。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>サンプル</title>
<style>
.defs {
    display: none;
}
.logo svg {
	fill: #e72410;
	width: 100%;
	height: 100%;
	padding-top: 25%;
}
</style>
</head>

<body>
<!-- SVG -->
<svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- logomark_BPJ -->
<symbol id="logomark_BPJ" viewBox="0 0 500 500"><path d="M27.166,251.306c16.142-11.594,31.315-15.912,44.201-16.676c-35.86-25.056,7.783-70.958,24.865-73.779c0,0-20.867,20.267-4.354,29.794c16.51,9.536,20.882-12.407,25.865-41.97c4.984-29.567,55.157-75.995,95.914-60.556c-27.703,9.182-55.277,39.508-61.885,65.013c-7.786,30.053-5.118,110.783-65.641,88.899c-0.88-0.321-1.729-0.646-2.561-0.978c-15.389,2.168-34.139,11.441-47.411,39.969c-27.24,58.546,53.131,98.805,53.131,98.805C-12.285,386.34-18.426,284.051,27.166,251.306z"/><path d="M51.882,305.48c13.493-51.725,55.471-44.977,55.471-44.977c16.494-0.753,44.231,3.744,48.729-52.478c4.499-56.224,20.027-99.938,100.455-105.701c-35.065,15.097-47.437,30.724-37.019,41.142c10.418,10.418,55.044-13.262,46.882-44.277c-6.512-24.743-2.604-52.091,59.253-59.904c-52.091,26.045-39.067,48.835-28.649,52.091c10.418,3.255,33.858-7.163,39.744-37.779C344.95,10.928,360.401,1.502,378.395,0c-17.993,20.992-13.691,55.185-24.743,84.214c-13.086,34.372-57.181,59.711-48.184,69.454c8.996,9.747,28.215,7.38,61.639-58.167c-9.747,57.727-35.609,105.031-61.845,114.026c-26.239,8.993-44.229,11.992-44.229,24.737c0,12.743,22.487,5.248,32.984-1.5c10.494-6.746,44.981-37.482,61.474-26.985c-22.675,6.927-23.11,59.45-104.204,76.461c-15.406,3.233-59.225,11.247-49.479,29.988c9.746,18.742,27.067,6.974,39.852-2.249c29.608-21.367,72.98-36.341,84.594-25.49c-26.32,5.483-57.574,25.994-70.468,51.729c-10.573,21.101-16.492,49.473-45.729,41.978c-29.234-7.493-86.959-51.725-70.467-21.736c16.492,29.982,95.582,54.347,76.465,52.472C164.765,403.905,38.389,357.207,51.882,305.48z"/></symbol>
</svg>
<!-- SVG // -->

<div class="logo">
<svg>
<title>BILLIONPLAN JAPAN Co, Ltd</title>
<use xlink:href="#logomark_BPJ"/>
</svg>
</div>

</body>
</html>

サンプルファイル

複数のSVGをまとめて管理、SVG Sprite。

複数のSVG画像を使いまわしたい、例えば同一ロゴ画像にバリエーション（ロゴマークのみ・横組み縦組み）がある、サービスごとにロゴがあるなどの場合、SVG Spriteという手法で分かりやすく管理することができます。

方法はいたってシンプル。
さきほど用意したSVGコードに、

<svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="logo_BPJ" viewBox="0 0 366 176">（省略）</symbol>
</svg>

上記と同様の方法で用意した、複数分のSVGコードを追加します。

<!-- SVG sprite -->
<svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- logo_BPJ -->
<symbol id="logo_BPJ" viewBox="0 0 366 176">（省略）</symbol>
<!-- logomark_BPJ -->
<symbol id="logomark_BPJ" viewBox="0 0 500 500">（省略）</symbol>
<!-- logo_FLOAT -->
<symbol id="logo_FLOAT" viewBox="0 0 331.483 106.494">（省略）</symbol>
</svg>
<!-- SVG sprite  // -->

このコードを先ほどと同じくbodyタグ直後に挿入しておいて、使用したい箇所ごとにIDで呼び出し使用します。ロゴマークなんかは形状的に、overflow:hidden;でトリミングすればイケるのでしょうが、なんだか扱いづらくなる気がしてコードを分けています。

リンクを貼る方法が少し違います。

なおインラインで記述したSVG画像にリンクを設定する場合、通常のhrefではなくxlink:hrefを使用します。
またaタグの挿入位置も異なります。具体的には以下のように設定します。

<svg>
<title>BILLIONPLAN JAPAN Co, Ltd</title>
<a xlink:href="<?php echo home_url(); ?>" target="_blank">
<use xlink:href="#logo_BPJ"/>
</a>
</svg>

これでSVG画像にリンクを貼ることができます。

WordPressの場合はテンプレートにすると便利。

svgsprite.phpなど外部化して、body直後で読み込むとさらに保守性が高まります。

</head>

<body id="top">
<?php get_template_part( 'svgsprite' ); ?>

まとめ

レイアウトや文字サイズをスマホ対応にしても、画像が粗いと印象は良くないですよね。
せめてサイトの顔でもあるロゴをきれいに表示させることで、随分印象も良くなるのではないでしょうか。ほかにもWEBフォントやアイコンフォントを使うことで、さらに解像度に依存しないサイトを目指せます。ではまた！

参考にさせていただいた記事：
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう – Webクリエイターボックス
Retina対応にSVGは本当に使えるのか？ – Rriver

レスポンシブなモックアップ制作に！フリーなPSD素材・サービスまとめ。

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧