SVGの利用

今更感ではありますが当サイトのロゴをpng画像からSVGに変更しました。

SVGの利用に関しては松田さんの書いたIllustrator＆ベクターデータの教科書 を参考にさせていただきました。

SVGコードの取得

まず、Illustratorのアウトライン化したロゴからコピペでエディタにSVGのコードを貼り付けられます。

以下の様なXMLがクリップボードに格納されるのでコピペで終了です。

<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In  -->
<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="156.7px" height="45.9px" viewBox="0 0 156.7 45.9" enable-background="new 0 0 156.7 45.9"
	 xml:space="preserve">
<defs>
</defs>
<g>
	<path fill="#60ABB9" d="M33,10.1V20h-7.6v7.6c0,1.2,0.3,2.1,0.9,2.8s1.4,1,2.6,1c1.7,0,3.1-0.8,4.3-2.5v14
		c-0.6,0.4-1.3,0.8-2.1,1.2s-1.7,0.6-2.6,0.9c-1.9,0.5-3.8,0.8-5.7,0.8c-2.8,0-5.3-0.6-7.7-1.7c-2.3-1.1-4.2-2.8-5.7-5
		c-1.4-2.2-2.1-4.8-2.1-7.7V20H0L25.5,0v10.1H33z"/>
	<path fill="#60ABB9" d="M56.6,9.3c2.8,0,5.4,0.5,7.8,1.4s4.4,2.2,6.1,3.8s3,3.6,4,5.8S76,25,76,27.7c0,2.6-0.5,5.1-1.4,7.3
		s-2.3,4.2-4,5.8s-3.7,2.9-6.1,3.8s-5,1.4-7.8,1.4c-3.6,0-6.9-0.8-9.8-2.3c-2.9-1.5-5.2-3.6-6.9-6.4c-1.7-2.8-2.5-6-2.5-9.6
		c0-3.6,0.8-6.7,2.4-9.5c1.6-2.8,3.9-5,6.8-6.5C49.6,10.1,52.9,9.3,56.6,9.3z M56.6,31.3c1.2,0,2.2-0.4,2.9-1.1s1.1-1.7,1.1-2.9
		s-0.4-2.2-1.1-2.9s-1.7-1.1-2.9-1.1c-0.6,0-1.1,0.1-1.6,0.3s-0.9,0.5-1.2,0.8s-0.6,0.8-0.8,1.3s-0.3,1-0.3,1.6
		c0,1.2,0.4,2.2,1.1,2.9S55.5,31.3,56.6,31.3z"/>
	<path fill="#60ABB9" d="M101,22.1v11.3H80.4V22.1H101z"/>
	<path fill="#60ABB9" d="M137.2,0.6c3.2,0,6,0.6,8.5,1.8c2.5,1.2,4.3,2.8,5.6,4.9c1.2,2,1.9,4.3,1.9,6.7c0,2.1-0.4,3.9-1.3,5.6
		s-2.1,3.1-3.8,4.3c2.4,2.8,4.4,5.9,5.8,9.5s2.4,7.6,2.8,11.9h-20.5c-0.4-5.9-1.3-10.1-2.6-12.7c-1.3-2.6-3.3-3.9-6-3.9h-0.1v16.6
		h-19.8V0.6H137.2z M127.4,18.5h0.5c1.9,0,3.3-0.3,4.1-1s1.3-1.7,1.3-3.2c0-1.3-0.4-2.4-1.2-3.2s-2-1.2-3.5-1.2h-1.2V18.5z"/>
</g>
</svg>

簡単すぎですね。

パスの単純化

今回SVGを利用するにあたりロゴデータのパスを単純化して最適化を試みようとしました。

Illustratorでパスの単純化はメニューの[オブジェクト]→[パス]→[単順化...]で対応可能です。

元々単純なロゴデータなので98%の単純化しかできませんでした。それ以上単純化すると崩れてしまうので。

(下が元データで、上が単純化後)

機械的な単純化なのでoのように目に見えて単純化される場合と-(ハイフン)のように逆に複雑化されてしまうケースもあるようです。

単純化後のSVGソースは以下のようになりました。

<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In  -->
<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="156.7px" height="45.9px" viewBox="0 0 156.7 45.9" enable-background="new 0 0 156.7 45.9"
	 xml:space="preserve">
<defs>
</defs>
<g>
	<path fill="#60ABB9" d="M33,10.1c0,2.9,0,5.8,0,8.7c0,1,0.3,1.2-0.7,1.2c-1.8,0-3.6,0-5.3,0c-1.1,0-1.5-0.4-1.5,0.7
		c0,1.8,0,3.6,0,5.4c0,1.4-0.2,3.1,0.9,4.3c2,2.3,5.5,0.4,6.9-1.5c0,4.2,0,8.5,0,12.7c0,3-5.2,3.6-7.6,3.9c-4.9,0.7-10.3-0.4-14-3.8
		c-5.1-4.8-4.3-11.6-4.3-17.9c0-1.2,0.7-3.8-0.8-3.8c-2.2,0-4.4,0-6.6,0C8.5,13.3,17,6.7,25.5,0c0,3.2,0,6.5,0,9.7
		C25.5,10.5,32,10.1,33,10.1z"/>
	<path fill="#60ABB9" d="M56.6,9.3C67.1,9.3,76,16.8,76,27.7c0,10.8-8.9,18.2-19.3,18.2c-10.6,0-19.2-7.4-19.2-18.2
		C37.4,16.8,46,9.3,56.6,9.3z M56.6,31.3c5.3,0,5.2-8.1,0-8.1C51.5,23.3,51.5,31.3,56.6,31.3z"/>
	<path fill="#60ABB9" d="M101,22.1c0,2.8,0,5.7,0,8.5c0,2.9,0.4,2.8-2.4,2.8c-3.7,0-7.4,0-11.1,0c-1.7,0-3.3,0-5,0
		c-0.3,0-1.9,0.2-2.1,0c-0.3-0.3,0-2.4,0-2.8c0-1.9,0-3.8,0-5.8c0-2.9-0.4-2.8,2.4-2.8C88.9,22.1,95,22.1,101,22.1z"/>
	<path fill="#60ABB9" d="M137.2,0.6c5.7,0,11.8,2.2,14.5,7.5c2.9,5.4,1.4,12.3-3.7,15.8c5.3,5.9,7.8,13.6,8.6,21.4
		c-5.8,0-11.6,0-17.3,0c-1,0-1.9,0-2.9,0c-0.6,0-0.9-5.5-1-6.4c-0.8-4.4-2.5-10.2-8-10.1c0,3.2,0,6.4,0,9.7c0,1,0.6,6.9-0.5,6.9
		c-1.8,0-19.3,0-19.3,0c0-14,0-28,0-42c0-0.8-0.5-2.7,0.5-2.7c3.1,0,6.3,0,9.4,0C124.1,0.6,130.6,0.6,137.2,0.6z M127.4,18.5
		c2.5,0,5.4-0.4,5.8-3.4c0.5-3.6-2-5.3-5.3-5.3c-1.2,0-0.6,2.8-0.6,3.8C127.4,15.2,127.4,16.8,127.4,18.5z"/>
</g>
</svg>

実は単純化前は1624文字だったのに対して単純化後は1750文字と逆に増えてしまいました。

単純化の恩恵は受けられなさそうなので今回は単純化は見送りました。

SVGの最適化

SVGの最適化にはSVGOMGを利用しました。「SVGOMG」はオンライン上でSVGの圧縮が可能なWebサービスです。

https://jakearchibald.github.io/svgomg/ - SVGOMG

メニューの「Open SVG」よりSVGファイルをアップロードするか、「Paste Markup」よりSVGのコードを貼り付けることで自動で圧縮してくれます。

今回のロゴデータでは「621 bytes - 27.87% saving」となり以下の様なコードが出力されました。

<svg xmlns="http://www.w3.org/2000/svg" width="156.7" height="45.9" viewBox="0 0 156.7 45.9"><g fill="#60ABB9"><path d="M33 10.1V20h-7.6v7.6c0 1.2.3 2.1.9 2.8s1.4 1 2.6 1c1.7 0 3.1-.8 4.3-2.5v14c-.6.4-1.3.8-2.1 1.2s-1.7.6-2.6.9c-1.9.5-3.8.8-5.7.8-2.8 0-5.3-.6-7.7-1.7-2.3-1.1-4.2-2.8-5.7-5-1.4-2.2-2.1-4.8-2.1-7.7V20H0L25.5 0v10.1H33zM56.6 9.3c2.8 0 5.4.5 7.8 1.4s4.4 2.2 6.1 3.8 3 3.6 4 5.8S76 25 76 27.7c0 2.6-.5 5.1-1.4 7.3s-2.3 4.2-4 5.8-3.7 2.9-6.1 3.8-5 1.4-7.8 1.4c-3.6 0-6.9-.8-9.8-2.3-2.9-1.5-5.2-3.6-6.9-6.4-1.7-2.8-2.5-6-2.5-9.6 0-3.6.8-6.7 2.4-9.5 1.6-2.8 3.9-5 6.8-6.5 2.9-1.6 6.2-2.4 9.9-2.4zm0 22c1.2 0 2.2-.4 2.9-1.1s1.1-1.7 1.1-2.9-.4-2.2-1.1-2.9-1.7-1.1-2.9-1.1c-.6 0-1.1.1-1.6.3s-.9.5-1.2.8-.6.8-.8 1.3-.3 1-.3 1.6c0 1.2.4 2.2 1.1 2.9s1.7 1.1 2.8 1.1zM101 22.1v11.3H80.4V22.1H101zM137.2.6c3.2 0 6 .6 8.5 1.8 2.5 1.2 4.3 2.8 5.6 4.9 1.2 2 1.9 4.3 1.9 6.7 0 2.1-.4 3.9-1.3 5.6s-2.1 3.1-3.8 4.3c2.4 2.8 4.4 5.9 5.8 9.5s2.4 7.6 2.8 11.9h-20.5c-.4-5.9-1.3-10.1-2.6-12.7-1.3-2.6-3.3-3.9-6-3.9h-.1v16.6h-19.8V.6h29.5zm-9.8 17.9h.5c1.9 0 3.3-.3 4.1-1s1.3-1.7 1.3-3.2c0-1.3-.4-2.4-1.2-3.2s-2-1.2-3.5-1.2h-1.2v8.6z"/></g></svg>

微調整

HTML5の場合はsvg要素のxmlns属性は不要なので取り除いておきます。

g要素も今回は不要なので取り除きg要素のfill属性はpath要素に対して適用します。

最後にtitle要素(<title>to-R</title>)を追加して完成です。

<svg width="156.7" height="45.9" viewBox="0 0 156.7 45.9"><title>to-R</title><path fill="#60ABB9" d="M33 10.1V20h-7.6v7.6c0 1.2.3 2.1.9 2.8s1.4 1 2.6 1c1.7 0 3.1-.8 4.3-2.5v14c-.6.4-1.3.8-2.1 1.2s-1.7.6-2.6.9c-1.9.5-3.8.8-5.7.8-2.8 0-5.3-.6-7.7-1.7-2.3-1.1-4.2-2.8-5.7-5-1.4-2.2-2.1-4.8-2.1-7.7V20H0L25.5 0v10.1H33zM56.6 9.3c2.8 0 5.4.5 7.8 1.4s4.4 2.2 6.1 3.8 3 3.6 4 5.8S76 25 76 27.7c0 2.6-.5 5.1-1.4 7.3s-2.3 4.2-4 5.8-3.7 2.9-6.1 3.8-5 1.4-7.8 1.4c-3.6 0-6.9-.8-9.8-2.3-2.9-1.5-5.2-3.6-6.9-6.4-1.7-2.8-2.5-6-2.5-9.6 0-3.6.8-6.7 2.4-9.5 1.6-2.8 3.9-5 6.8-6.5 2.9-1.6 6.2-2.4 9.9-2.4zm0 22c1.2 0 2.2-.4 2.9-1.1s1.1-1.7 1.1-2.9-.4-2.2-1.1-2.9-1.7-1.1-2.9-1.1c-.6 0-1.1.1-1.6.3s-.9.5-1.2.8-.6.8-.8 1.3-.3 1-.3 1.6c0 1.2.4 2.2 1.1 2.9s1.7 1.1 2.8 1.1zM101 22.1v11.3H80.4V22.1H101zM137.2.6c3.2 0 6 .6 8.5 1.8 2.5 1.2 4.3 2.8 5.6 4.9 1.2 2 1.9 4.3 1.9 6.7 0 2.1-.4 3.9-1.3 5.6s-2.1 3.1-3.8 4.3c2.4 2.8 4.4 5.9 5.8 9.5s2.4 7.6 2.8 11.9h-20.5c-.4-5.9-1.3-10.1-2.6-12.7-1.3-2.6-3.3-3.9-6-3.9h-.1v16.6h-19.8V.6h29.5zm-9.8 17.9h.5c1.9 0 3.3-.3 4.1-1s1.3-1.7 1.3-3.2c0-1.3-.4-2.4-1.2-3.2s-2-1.2-3.5-1.2h-1.2v8.6z"/></svg>

SVG非対応ブラウザ対応

IE8以下やAndroid4.0以下はSVGに対応していないため何も表示されません。これらのブラウザのシェアはもうすごく低いので対応不要なイメージですが今回は検証がてらに対応しておきました。

SVG非対応ブラウザ対応としては代替のpng画像を用意するなどの方法もあるのですが手間が掛かるのであくまでテキストでフォールバックを提供する方法です。

まず、svg要素の直下にforeignObject要素(<foreignObject aria-hidden="true">to-R</foreignObject>)を追加します。

<svg width="156.7" height="45.9" viewBox="0 0 156.7 45.9"><title>to-R</title><path fill="#60ABB9" d="M33 10.1V20h-7.6v7.6c0 1.2.3 2.1.9 2.8s1.4 1 2.6 1c1.7 0 3.1-.8 4.3-2.5v14c-.6.4-1.3.8-2.1 1.2s-1.7.6-2.6.9c-1.9.5-3.8.8-5.7.8-2.8 0-5.3-.6-7.7-1.7-2.3-1.1-4.2-2.8-5.7-5-1.4-2.2-2.1-4.8-2.1-7.7V20H0L25.5 0v10.1H33zM56.6 9.3c2.8 0 5.4.5 7.8 1.4s4.4 2.2 6.1 3.8 3 3.6 4 5.8S76 25 76 27.7c0 2.6-.5 5.1-1.4 7.3s-2.3 4.2-4 5.8-3.7 2.9-6.1 3.8-5 1.4-7.8 1.4c-3.6 0-6.9-.8-9.8-2.3-2.9-1.5-5.2-3.6-6.9-6.4-1.7-2.8-2.5-6-2.5-9.6 0-3.6.8-6.7 2.4-9.5 1.6-2.8 3.9-5 6.8-6.5 2.9-1.6 6.2-2.4 9.9-2.4zm0 22c1.2 0 2.2-.4 2.9-1.1s1.1-1.7 1.1-2.9-.4-2.2-1.1-2.9-1.7-1.1-2.9-1.1c-.6 0-1.1.1-1.6.3s-.9.5-1.2.8-.6.8-.8 1.3-.3 1-.3 1.6c0 1.2.4 2.2 1.1 2.9s1.7 1.1 2.8 1.1zM101 22.1v11.3H80.4V22.1H101zM137.2.6c3.2 0 6 .6 8.5 1.8 2.5 1.2 4.3 2.8 5.6 4.9 1.2 2 1.9 4.3 1.9 6.7 0 2.1-.4 3.9-1.3 5.6s-2.1 3.1-3.8 4.3c2.4 2.8 4.4 5.9 5.8 9.5s2.4 7.6 2.8 11.9h-20.5c-.4-5.9-1.3-10.1-2.6-12.7-1.3-2.6-3.3-3.9-6-3.9h-.1v16.6h-19.8V.6h29.5zm-9.8 17.9h.5c1.9 0 3.3-.3 4.1-1s1.3-1.7 1.3-3.2c0-1.3-.4-2.4-1.2-3.2s-2-1.2-3.5-1.2h-1.2v8.6z"/><foreignObject aria-hidden="true">to-R</foreignObject></svg>

foreignObject要素はsvg要素内に異なる名前空間の要素を設置することが可能な要素でforeignObject要素内の記述は、SVG対応・非対応ブラウザともに解釈することが可能です。内容がtitle要素と重複するのでaria-hidden="true"も付与しています。

SVG対応ブラウザ向けに非表示にして、非対応ブラウザ向けに装飾をしておきます。

foreignObject{
	display:none;
	color:#60ABB9;
	font-size:40px;
}

IE8などのHTML5に対応していないブラウザはCSSを適用できないので、以下のJSをhead要素などで読み込み適用できるように設定しておきます。(html5shivなどを利用している場合は不要)

<!--[if lt IE 9]>
<script>
	document.createElement("svg");
	document.createElement("foreignobject");
</script>
<![endif]-->

最後にSVG非対応のブラウザのみforeignobjectを表示します。body要素の閉じタグの直前あたりに以下のコードを読み込むこと対応可能です。

<script>
if(!window.SVGSVGElement){
	var foreignobjectElement=document.getElementsByTagName("foreignobject");
	for(var i=0;i<foreignobjectElement.length;i++){
	    foreignobjectElement[i].style.display="block";
	}
}
</script>

IE8では以下のように表示されます。

SVGは非常に手軽に使えるので今後ますます普及していきそうですね。

追記

HTMLとCSSを以下のようにしたほうが、IE8用のdocument.createElementがいらなくなるでよいのでは？と指摘を受けました。

<foreignObject aria-hidden="true"><span id="logo-alt">to-R</span></foreignObject>

foreignObject{
	display:none;
}
#logo-alt {
	color:#60ABB9;
	font-size:40px;
}

単純な文字列の場合はこちらのほうが良さそうですね。

(追記ここまで)

SVGに関しては以下の書籍に詳しく書かれています。

Web制作者のためのIllustrator＆ベクターデータの教科書

Amazon[大型本]
Amazon[Kindle版]

あわゆき , 窪木 博士 , 三階ラボ（長藤寛和、宮澤聖二） , 松田 直樹 (著)

関連エントリー

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
5分でわかるWebRTCの仕組み - html5minutes vol.01
Re:犯してはいけないHTMLタグの過ち10個
HTML5が使えるスマートフォンOS
CSS3アニメーションを利用したサンプル

スポンサードリンク

• 2015年10月26日 18:40
• カテゴリー HTML

«[書評]デザイナー&ディレクターが写真を上手に撮る本 | メイン | Babelで始めるES6入門»

to-Rについて

JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。

書いてる人

西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア

株式会社トゥーアールについて

渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

検索

著書

Web制作の現場で使う
jQueryデザイン入門
[改訂新版]

JavaScript
コーディング
ベストプラクティス

スポンサードリンク

カテゴリー

• AWS [4]
• React [5]
• Angular [5]
• TypeScript [1]
• JavaScript [130]
• jQuery [59]
• CSS [95]
• HTML [19]
• iPhone [20]
• Android [31]
• Movable Type [72]
• WordPress [11]
• Facebook [6]
• Google [20]
• PHP [43]
• SEO [62]
• SEM [11]
• writer [108]
• seminar [107]
• Mac [7]
• server [15]
• Firefox [22]
• direction [7]
• tools [72]
• design [26]
• works [9]
• books [88]
• dialy [84]

アーカイブ

• 2021年11月 [3]
• 2021年10月 [2]
• 2021年5月 [1]
• 2020年5月 [1]
• 2020年1月 [3]
• 2019年5月 [4]
• 2019年4月 [1]
• 2019年1月 [1]
• 2018年12月 [1]
• 2018年7月 [1]
• 2018年3月 [2]
• 2021年 [6]
• 2020年 [4]
• 2019年 [6]
• 2018年 [5]
• 2017年 [11]
• 2016年 [15]
• 2015年 [44]
• 2014年 [41]
• 2013年 [62]
• 2012年 [66]
• 2011年 [100]
• 2010年 [85]
• 2009年 [96]
• 2008年 [149]
• 2007年 [213]
• 2006年 [143]
• 2005年 [66]

最近のエントリー

• AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる
• Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする
• AWS CloudFront FunctionsでBasic認証を設定する
• AWS SAM のtemplate.yamlをdeploy環境ごとに切り替える
• AWS Lambda(Node.js)でJimpを使って画像のバリデーションを行う
• IE11が終わる日
• 自宅ネットワーク高速化の道のり
• もう、SP用のWebデザインを倍の解像度で作るのをやめよう
• ReactのuseRefを再描画がかからないState管理として利用する
• TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する

© 2005 to-R some Rights Reserved.