タウンノート福岡»ウェブ戦略»単純なロゴをウェブで使うときは迷わずsvg一択で。

単純なロゴをウェブで使うときは迷わずsvg一択で。

最終更新日:2016/9/12

ウェブに掲載する画像と言えば、gif、jpg、pngのいずれかというのが定番でしたが、単純な画像であればsvgが主流となりつつあります。svgは、他のフォーマットと全く異なる仕様で、そもそも画像ではないのですが、扱い方が画像ファイルと同じという点と、主に画像の代替として利用されるという2点で、画像ファイルの一つとして扱われるのが一般的です。

svgが使いやすい理由

1.svgは軽い。

svgファイルは画像ファイルではないと書きましたが、その理由がsvgファイルをメモ帳で開けばわかります。ちなみにこのサイトの左上にある当社のロゴはsvgファイルなのですが、これをテキストファイルで開くとこんな感じになります。

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=”1.1″ id=”レイヤー_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px”
y=”0px” width=”141.73px” height=”48.19px” viewBox=”0 0 141.73 48.19″ enable-background=”new 0 0 141.73 48.19″
xml:space=”preserve”>
<rect y=”0.031″ fill=”#DE1815″ width=”70.865″ height=”28.347″/>
<g>
<defs>
<rect id=”SVGID_1_” y=”0″ width=”141.73″ height=”48.19″/>
</defs>
<clipPath id=”SVGID_2_”>
<use xlink:href=”#SVGID_1_” overflow=”visible”/>
</clipPath>
<g clip-path=”url(#SVGID_2_)”>
<path fill=”#FAFAFB” d=”M13.245,21.777H9.645V7.592H4.436V4.544h14.017v3.048h-5.208V21.777z”/>
<path fill=”#FAFAFB” d=”M26.108,22.113c-3.433,0-6.529-2.112-6.529-6.721s3.096-6.72,6.529-6.72c3.432,0,6.528,2.112,6.528,6.72
S29.541,22.113,26.108,22.113z M26.108,11.504c-2.592,0-3.072,2.256-3.072,3.888c0,1.632,0.48,3.889,3.072,3.889
s3.072-2.256,3.072-3.889C29.181,13.761,28.701,11.504,26.108,11.504z”/>
<path fill=”#FAFAFB” d=”M48.213,21.777h-3.456l-1.992-9.313h-0.048l-1.992,9.313h-3.457l-3.6-12.769h3.576l1.992,9.169h0.048
l1.8-9.169h3.384l1.92,9.169h0.048l1.992-9.169h3.456L48.213,21.777z”/>
<path fill=”#FAFAFB” d=”M65.205,21.777h-3.36v-7.752c0-0.937-0.048-2.521-2.184-2.521c-1.488,0-2.64,1.008-2.64,2.952v7.321h-3.36
V9.008h3.216v1.872h0.048c0.456-0.768,1.417-2.208,3.84-2.208c2.497,0,4.44,1.464,4.44,4.272V21.777z”/>
</g>
<g clip-path=”url(#SVGID_2_)”>
<path fill=”#544434″ d=”M91.965,4.52h3.36v17.233h-3.601L84.692,9.464h-0.048v12.289h-3.36V4.52h3.792l6.841,12.001h0.048V4.52z”
/>
<path fill=”#544434″ d=”M104.3,22.089c-3.433,0-6.528-2.112-6.528-6.721s3.096-6.72,6.528-6.72s6.528,2.112,6.528,6.72
S107.732,22.089,104.3,22.089z M104.3,11.48c-2.593,0-3.072,2.256-3.072,3.888c0,1.632,0.479,3.889,3.072,3.889
c2.592,0,3.072-2.256,3.072-3.889C107.372,13.737,106.892,11.48,104.3,11.48z”/>
<path fill=”#544434″ d=”M116.947,8.984h2.089v2.4h-2.089v6.937c0,0.744,0.024,1.032,1.393,1.032c0.216,0,0.456-0.024,0.696-0.048
v2.544c-0.528,0.024-1.057,0.048-1.585,0.048h-0.432c-2.904,0-3.433-1.104-3.433-2.76v-7.752h-1.728v-2.4h1.728V5.528h3.36V8.984z
“/>
<path fill=”#544434″ d=”M132.141,18.009c-0.889,3.072-3.433,4.08-5.617,4.08c-3.6,0-6.36-1.728-6.36-6.984
c0-1.536,0.528-6.457,6.121-6.457c2.52,0,6,1.2,6,7.032v0.6h-8.761c0.097,0.96,0.288,3.121,3,3.121
c0.937,0,1.896-0.48,2.161-1.392H132.141z M128.828,14.097c-0.192-2.064-1.512-2.688-2.592-2.688
c-1.585,0-2.425,1.008-2.616,2.688H128.828z”/>
</g>
</g>
<path fill=”#DE1815″ d=”M71.115,0.25h70.367v27.848H71.115V0.25z M70.865,28.347h70.865V0H70.865V28.347z”/>
<g>
<defs>
<rect id=”SVGID_3_” y=”0″ width=”141.73″ height=”48.19″/>
</defs>
<clipPath id=”SVGID_4_”>
<use xlink:href=”#SVGID_3_” overflow=”visible”/>
</clipPath>
<g clip-path=”url(#SVGID_4_)”>
<path fill=”#544434″ d=”M5.583,44.685H2.882V31.757h9.201v2.286h-6.5v2.917h5.689v2.287H5.583V44.685z”/>
<path fill=”#544434″ d=”M24.233,40.165c0,3.403-2.053,4.861-5.312,4.861c-1.188,0-2.953-0.288-4.105-1.566
c-0.702-0.792-0.972-1.836-1.008-3.133v-8.57h2.755v8.391c0,1.8,1.044,2.593,2.305,2.593c1.854,0,2.611-0.9,2.611-2.467v-8.517
h2.755V40.165z”/>
<path fill=”#544434″ d=”M29.774,44.685h-2.701V31.757h2.701v5.258l4.934-5.258h3.493l-5.275,5.294l5.582,7.634h-3.475
l-3.997-5.672l-1.261,1.297V44.685z”/>
<path fill=”#544434″ d=”M50.225,40.165c0,3.403-2.053,4.861-5.312,4.861c-1.188,0-2.953-0.288-4.105-1.566
c-0.702-0.792-0.972-1.836-1.008-3.133v-8.57h2.755v8.391c0,1.8,1.044,2.593,2.305,2.593c1.854,0,2.611-0.9,2.611-2.467v-8.517
h2.755V40.165z”/>
<path fill=”#544434″ d=”M58.502,31.415c1.71,0,6.212,0.737,6.212,6.806c0,6.067-4.501,6.806-6.212,6.806s-6.211-0.738-6.211-6.806
C52.291,32.152,56.792,31.415,58.502,31.415z M58.502,42.74c1.458,0,3.511-0.9,3.511-4.52s-2.053-4.52-3.511-4.52
s-3.511,0.9-3.511,4.52S57.044,42.74,58.502,42.74z”/>
<path fill=”#544434″ d=”M69.77,44.685h-2.701V31.757h2.701v5.258l4.934-5.258h3.493l-5.275,5.294l5.581,7.634h-3.475l-3.997-5.672
L69.77,40.31V44.685z”/>
<path fill=”#544434″ d=”M81.703,44.685h-2.845l4.609-12.928h3.114l4.556,12.928h-2.935l-0.828-2.665h-4.771L81.703,44.685z
M83.323,39.787h3.295l-1.603-5.113H84.98L83.323,39.787z”/>
</g>
</g>
</svg>

まんまxmlファイルですね。ちなみにサイズは4.4KBです。これをpngファイルにすると、横幅295pxの画像で4.72KBになります。

2.svgは拡大・縮小に強い

タネ明かしは後回しにして、とりあえず画像を貼りつけてみます。

会社ロゴ(svg)
会社ロゴ(svg)
logo
会社ロゴ(png)

イラストレーターで作ったロゴをpngとsvgの両方で保存したものです。ほぼ同じに見えます。それではこれを縮小して表示してみます。上がsvgです。

 

会社ロゴ(svg)
会社ロゴ(svg)
logo
会社ロゴ(png)

今度は拡大してみます。

会社ロゴ(svg)
会社ロゴ(svg)
logo
会社ロゴ(png)

文字もそうですが、特に細い線が決定的ですね。画像ファイルは拡大・縮小をするとピンボケしたようになってしまいますが、svgはそうなりません。普通、大きな画像を表示すると相当なファイルサイズになりますが、svgは同じサイズのまま拡大縮小が簡単にできてしまうのです。

3.複雑な画像でも行けちゃう

では、通常の写真をsvgにしてみます。

kamo

近所の川にいた鴨です。毎年のんびり泳いでいるとこを撮っています。

これをsvgにしてみましょう。

svgテスト

一緒ですね。ただ、さすがに拡大縮小をするとぼやけてしまいます。

4.色変えもできる

会社ロゴ(svg)
会社ロゴ(青)

基本的にテキストで編集できるので、色を指定しているRGB値を変更するだけで、こんな色変えもできてしまいます。

この他、アニメーションや切り抜きなど、css3と合わせることで様々な効果を演出することができます。

svgの欠点

1.lightboxに反映されない。

svgは画像ファイルではありません。したがって、lightbox系のJQueryとは相性が悪く、たいていは反映してくれません。もしかしたらsvgも反映してくれるものがあるかもしれませんが、僕は知りません。

また、WordPressで投稿している場合は、画像ファイルとしてメディアにアップロードできません。svgは標準のアップローダで許可されていないため、メディアにアップロードするときは(あれば)プラグインを利用するか、ファイルタイプを自力で加えるかしなければなりません。

2.古いブラウザでは読めない。

svgファイルを認識できるのはIE9以降で、IE8より以前のバージョンでは表示されません。したがって、古いブラウザに対応させたいという通好みのウェブサイトを開発するときはsvgはご法度です。IE8はセキュリティ的にも大きな問題を抱えており、マイクロソフトのサポートも終了しているため、IE8でウェブサイトを閲覧すること自体自殺行為に近いのですが、それでもIE8に対応したウェブサイトを作りたいというときは、svgはやめましょう。

svgの仕組み

ベクターという考え方

ベクターとは、数学でいうベクトルと考え方は一緒です。座標Aから座標Bに矢印を引いたあれです。考え方は、ブラウザ画面のある地点から別の地点まで直線なり曲線なりのラインを描くということになります。

通常の画像を縮小した場合、ちょうど50%なら2ピクセルを1ピクセルにするだけですが、90%となると、2ピクセルが1ピクセルになったりならなかったりと、場所によって中間点の取り方が変わるうえに、単純に色の値を足して2で割る形になるため、色そのものが減退することになります。

これがベクターになると、幅は減っても色は指定した通りの色で線を引くので、色の減退がなく、ぼやけることもありません。

svgの使い方

ウェブサイトに画像を貼るとき、<img src=”画像のURL”>というタグを使いますが、svgを貼るときも全く同じです。widthを指定することで、思い通りの大きさにすることが可能です。簡単ですね。

 

大きな魅力を秘めたsvgは、画像としての扱いはまだ難しい部分も残していますが、widthがころころ変わるスマホサイトでは特に力を発揮するフォーマットです。まずはロゴ、アイコンからどんどん試していって、慣れることをおすすめします。

パワーポイントの資料作成ならお任せください。