BLOG / BILLIONPLAN JAPAN

株式会社ビリオンプラン・ジャパンのスタッフブログ

ショップ運用代行なら、ご相談ください。
  • EC
  • WEB
  • APP
  • DESIGN
  • SEO
  • FASHION
  • 運営会社について
  • CONTACT
ショップ運営のお悩み、ご相談ください。
media-cta-design
メディア集客の大事なところ!記事下CTAのデザインを改善しよう。
DESIGN
hero-header-materials25
2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。
DESIGN
flexbox-css3_e
flexbox(CSS3)で、レスポンシブなブログ記事一覧にする方法。
WEB
responsive-mockup-service-frame4
レスポンシブなモックアップ制作に!フリーなPSD素材・サービスまとめ。
DESIGN
404-error-pagedesign_e
個性的な404デザインまとめ!日本国内・海外のエラーページ48選。
DESIGN
icons-free
クレジット・リンク不要/商用可/アプリOK!アイコンフリー素材まとめ【2015年4月版】
DESIGN
TOP
BLOG
DESIGN

ロゴはSVGにして使いまわそう!簡単スマホ対応。

投稿日 2015年7月7日 byおむお 489 shares

  • DESIGN
434 20 35
ロゴはSVGにして使いまわそう!簡単スマホ対応。

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

Sponsored Link

ロゴは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素材・サービスまとめ。

こちらの記事もどうぞ

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

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

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

06-6271-7761

ABOUT ME

おむおデザイナー/編集Twitter:@BILLIONPLAN_JP
大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧
Recent Posts
  • rakuten-class-id2016.10.26EC楽天RMSのカスタマイズで使えるclass名の一覧。
  • wp-sns-count-cache2016.09.30WEBWordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。
  • rakuten-site-design-kids102016.08.10EC注目のキッズファッション!楽天の参考デザインまとめ、子供服サイト10選。
  • wp-login-customize-sample2016.07.15DESIGNロゴだけでも変更しとこ!WordPressのログイン画面を簡単カスタマイズ。
Tweet
このエントリーをはてなブックマークに追加
responsive-mockup-service-frame4レスポンシブなモックアップ制作に!フリーなPSD素材・サービスまとめ。
icon-webfonts-smartphoneそうだWEBフォント使おう!アイコンフォントとセットで簡単スマホ対応。
Sponsored Link

この記事に関連する記事

  • gzip圧縮と画像減色で、サイトの速度を最適化する方法(1/2)gzip圧縮と画像減色で、サイトの速度を最適化する方法(1/2)
  • レスポンシブなモックアップ制作に!フリーなPSD素材・サービスまとめ。レスポンシブなモックアップ制作に!フリーなPSD素材・サービスまとめ。
  • 個性的な404デザインまとめ!日本国内・海外のエラーページ48選。個性的な404デザインまとめ!日本国内・海外のエラーページ48選。
  • 2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。
  • そのクレジット表記で大丈夫?クリエイティブ・コモンズ(CC)画像の使い方。そのクレジット表記で大丈夫?クリエイティブ・コモンズ(CC)画像の使い方。
  • デザインの参考に!海外ファッションレンタルサイトまとめ。デザインの参考に!海外ファッションレンタルサイトまとめ。

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

Follow @BILLIONPLAN_JP
follow us in feedly
ビリオンプラン・ジャパン

Category : DESIGN

Keyword : CSS Image Logo responsive sample Smartphone SVG Tips

DESIGNカテゴリの最新記事

wp-login-customize-sample
ロゴだけでも変更しとこ!WordPressのログイン画面を簡単カスタマイズ。
DESIGN
media-cta-design
メディア集客の大事なところ!記事下CTAのデザインを改善しよう。
DESIGN
hero-header-materials25
2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。
DESIGN
materials-cc-tips
そのクレジット表記で大丈夫?クリエイティブ・コモンズ(CC)画像の使い方。
DESIGN
fm802-renewal5
FM802公式サイトがリニューアル!フラット&ワイドな素敵デザインに。
DESIGN
icon-webfonts-smartphone
そうだWEBフォント使おう!アイコンフォントとセットで簡単スマホ対応。
DESIGN
svg-logo-smartphone-responsive
ロゴはSVGにして使いまわそう!簡単スマホ対応。
DESIGN
responsive-mockup-service-frame4
レスポンシブなモックアップ制作に!フリーなPSD素材・サービスまとめ。
DESIGN
404-error-pagedesign_e
個性的な404デザインまとめ!日本国内・海外のエラーページ48選。
DESIGN
今ならアウトレットセール開催中! ECデザイン/サポート、ご相談ください。
Sponsored Link

人気の記事ランキング

  • そのクレジット表記で大丈夫?クリエイティブ・コモンズ(CC)画像の使い方。
  • この漢字はひらく?サイトの表記ゆれを防ぐ、知っておきたい文章マナー。
  • コピペでOK!楽天ヘッダーのテンプレートを作ってみました。シンプルに、簡単に実装できます。
  • 個性的な404デザインまとめ!日本国内・海外のエラーページ48選。
  • 制作コスト削減!楽天で使える無料テンプレートやイラスト・写真素材12選。
  • クレジット・リンク不要/商用可/アプリOK!アイコンフリー素材まとめ【2015年4月版】
  • コピペでOK!楽天フッターのテンプレートを作ってみました。ほぼ画像不使用で簡単実装!
  • 楽天の商品画像を一括ダウンロードしたい。ダウンローダーで工数削減!
  • コピペでOK!楽天サイドナビのテンプレートを作ってみました。縦長解消ですっきりシンプルに!

Keyword

.htaccess APP Apple AWA blog checker CSS CSS3 DESIGN EC error Fashion FLOAT Free gold Google Image interior iOS LINE Mac Map Materials Media Music Plugin responsive RMS sample Search SEO Service Site Streaming Template Tips Tools trends WEB Wordpress Yahoo! まとめ 参考 楽天 海外

Sponsored Link

最近の記事

  • 楽天RMSのカスタマイズで使えるclass名の一覧。
  • WordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。
  • 注目のキッズファッション!楽天の参考デザインまとめ、子供服サイト10選。
  • ロゴだけでも変更しとこ!WordPressのログイン画面を簡単カスタマイズ。
  • ちゃんと読まれてる?簡単無料で使えるヒートマップツール5個まとめ。
  • 簡単導入でコンバージョン増加!自社メディア向け無料プラグイン・サービス4個。
  • この漢字はひらく?サイトの表記ゆれを防ぐ、知っておきたい文章マナー。

Archive

記事をSNSに投稿する

Tweet

このエントリーをはてなブックマークに追加
billionplan.comに関するツイート
CONTACT
ネット通販とウェブ制作の会社。
Sponsored Link
ショップ運営のお悩み、ご相談ください。

Category

  • EC
  • WEB
  • APP
  • DESIGN
  • SEO
  • FASHION

Keyword

  • Tips (41)
  • DESIGN (33)
  • 楽天 (33)
  • まとめ (29)
  • sample (28)
  • CSS (21)
  • FLOAT (16)
  • Service (15)
  • Google (13)
  • gold (13)
  • 参考 (13)
  • Music (11)
  • RMS (10)
  • Apple (9)
  • Media (9)
  • Fashion (8)
  • Free (8)
  • Wordpress (8)
  • 海外 (8)
  • EC (7)
  • WEB (7)
  • SEO (7)
  • LINE (7)
  • Template (7)
  • APP (6)
  • Materials (6)
  • responsive (6)
  • iOS (6)
  • Streaming (6)
  • Search (6)
  • Yahoo! (6)
  • Image (5)
  • CSS3 (5)
  • Tools (5)
  • Plugin (5)
  • trends (4)
  • error (4)
  • blog (4)
  • Mac (4)
  • AWA (4)
  • interior (3)
  • .htaccess (3)
  • Map (3)
  • Site (3)
  • checker (3)
  • Store (3)
  • Watch (2)
  • gzip (2)
  • iframe (2)
  • Icon (2)
  • Pagespeed (2)
  • insights (2)
  • compression (2)
  • png (2)
  • JQuery (2)
  • 日本 (2)
  • Smartphone (2)
  • Category (2)
  • Animation (2)
  • Renewal (2)
  • MONDAINE (1)
  • Game (1)
  • IE (1)
  • html5 (1)
  • JS (1)
  • tech (1)
BILLIONPLAN JAPAN Co, Ltd

ネット通販とウェブ制作の会社。

Company

BILLIONPLAN JAPAN Co, Ltd
株式会社ビリオンプラン・ジャパン

大阪府大阪市中央区北久宝寺町1-2-1 オーセンティック東船場504  MAP

Contact

ショップ制作の無料お見積り、そのほかウェブ制作などご相談ください。

CONTACT

Copyright © 2023 BILLIONPLAN JAPAN Co, Ltd

PAGETOP