Lopan.jp

SVGでやることのまとめ。

SVGは、Webサイトの中では、アイコンロゴシンプルなイラストに使われている、拡大してもずっと綺麗な画像ファイルです。画像フォーマットでありながら、XMLに基づくマークアップ言語でもあるので、テキストエディタで編集できてしまえるのも魅力。しかもずっと綺麗なんです。
そんなSVGファイルを作るときに僕がよくやることをちょこちょこまとめてゆきます:)

書き出しはイラレから

XMLに基づくマークアップ言語とはいえ、複雑な図形やイラストは、人力では到底マークアップできません…X‹
図形やイラストはAdobe Illustrator(以下、イラレ)で制作して、そのままイラレから、SVGファイルとして書き出すことが常です。
ここでは、このサイトの左上にいるパンちゃんアイコン(以下、ロゴのパンちゃん)を書き出してみます:)

イラレのデータを用意

まずは何はなくともaiデータを用意しなくちゃいけません。
「新規...+N」で、ひとまず、サイズを「Web」として開きます。

アートワーク(ここではロゴのパンちゃん)を、既存のアートボードの外にコピペ。アートボードツールにして、ロゴをクリックすると、そのオブジェクトサイズぴったしのアートボードが作成されます:)

ちゃんとオブジェクトをクリックしないと作成されないので注意。

アートボードのサイズ(幅と高さ)は、整数になるように調整しておきます。ここでは高さが「64.23 px」だったのを「65 px」に整えました。

最初にあったアートボードは削除して、パンちゃんのアートボードだけにしたら、「保存+S」で、わかりやすいファイル名(ここでは「logo_pan.ai」)で「保存」します。

logo_pan.aiをダウンロードする(logo_pan.zip)

別名で保存する

イラレで作成したデータを「別名で保存+shift+S」する際に、ファイル形式で「SVG (svg)」を選択します。

別名で保存で、ファイル形式を「SVG (svg)」にする

保存をクリックすると「SVG オプション」パネルが表示されます。
SVG プロファイル」は「SVG 1.1」を選択。いろんな規格が用意されてますけれど、「SVG 1.1」が現在、W3Cで勧告されているいちばん新しい規格になります。
文字も画像もないので、「フォント」、「オプション」は特に気にせず、デフォルトのままです。

「SVG オプション」パネル

続いて、詳細オプションの設定は以下の通り。
CSS プロパティ」は、「スタイル要素」を選択します。説明には、「スタイル属性 (実体参照)」がいちばん“レンダリング速度が速くなり、ファイルサイズも小さくなります”とのことですけど、HTML/CSSに馴染みのある僕らには「スタイル要素」がいちばん読みやすいソースコードなので、ここは「スタイル要素」でSVGコードを書き出すことにします:)
小数点以下の桁数」には「3」と入力。小さなアイコンなので細かいニュアンスもちゃんと描画されるように、最適とされる「3」を指定します。
エンコーディング」はHTMLのcharsetと同じ「Unicode (UTF-8)」にして、その他のオプションは、すべてチェックを外しておきます(※詳しくは後述)

詳細オプション

SVG コード」ボタンをクリックすれば、書き出されるSVGコードを事前に確認することもできるので、余計なSVGファイルを作らずに、HTMLに直接コピペで、事なきを得ることもできちゃいます:D
けれども今回はOKをクリック。SVGファイルができましたー!

SVGコード

書き出したSVGファイルの中身は、以下のようなSVGコードになります。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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="70px" height="65px" viewBox="0 0 70 65" style="enable-background:new 0 0 70 65;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
	.st1{fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
	.st2{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
</style>
<g>
	<g>
		<path class="st0" d="M26.661,55.257c-1.377,1.28-2.769,2.18-2.769,2.18s-1.323-1.15-2.428-2.573"/>
		<g>
			<path class="st1" d="M12.851,43.279c-1.376,0-1.438,2.271-0.015,2.271C14.117,45.55,14.153,43.279,12.851,43.279z"/>
			<path class="st1" d="M34.577,43.508c-1.502-0.033-1.519,2.409-0.016,2.442C36.104,45.984,36.12,43.542,34.577,43.508z"/>
		</g>
		<g>
			<path class="st0" d="M20.65,29.392c-4.072,1.321-4.773,5.981-1.871,8.363"/>
			<path class="st0" d="M25.203,29.806c-4.143,1.873-4.313,6.803-0.658,8.63"/>
			<path class="st0" d="M29.668,29.855c-3.508,1.91-3.508,6.84,0.402,7.945"/>
		</g>
	</g>
	<path class="st2" d="M15.754,25.269C16.821,17.11,13.685,8.015,4.066,1.385C-1.28,15.98,0.312,26.136,9.259,33.42"/>
	<path class="st2" d="M41.309,32.634c-3.645,11.654-1.605,22.817,9.647,27.364c4.062-11.956,1.992-22.885-7.163-32.052
		C31.964,16.1,9.24,21.591,8.065,40.156C6.893,58.681,28.2,62.024,42.622,54.063"/>
	<path class="st2" d="M45.901,29.491C56.919,25.377,69,33.11,69,47.209C69,60.626,55.995,62.28,51.802,58.2"/>
	<path class="st2" d="M53.219,48.963c1.302-1.778,3.599-3.085,6.563-3.138"/>
	<path class="st2" d="M13.764,54.667c-4.614,1.667-4.452,7.795,2.095,8.497c4.083,0.438,6.408-1.989,5.46-5.365"/>
	<path class="st2" d="M31.769,57.917c-1.285,3.401,0.96,6.262,5.865,5.602c4.958-0.667,6.5-5.052,3.572-8.239"/>
</g>
</svg>

パッと見なにが何だかわからないですけれど、3行めのid="レイヤー_1"というのは、もしかしてイラレのレイヤー名かな。イラレのレイヤー構造と見比べてみると(下図)、なんとなくSVGの階層構造が見えてきますね…!
イラレでグループ化したところはg要素で括られて、グループ化されているのが分かります。

レイヤー構造とSVG構造の見比べ

試しにレイヤーに名前を付けてみると、SVG要素のid属性として反映されました。レイヤーにちゃんと名前をつければ、どの要素がどのパスを表すのか分かるようになりますね:D

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="70px" height="65px" viewBox="0 0 70 65" style="enable-background:new 0 0 70 65;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
	.st1{fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
	.st2{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
</style>
<g id="pan">
	<g id="face">
		<path id="mouse" class="st0" d="M26.661,55.257c-1.377,1.28-2.769,2.18-2.769,2.18s-1.323-1.15-2.428-2.573"/>
		<g id="eye">
			<path class="st1" d="M12.851,43.279c-1.376,0-1.438,2.271-0.015,2.271C14.117,45.55,14.153,43.279,12.851,43.279z"/>
			<path class="st1" d="M34.577,43.508c-1.502-0.033-1.519,2.409-0.016,2.442C36.104,45.984,36.12,43.542,34.577,43.508z"/>
		</g>
		<g id="hair">
			<path class="st0" d="M20.65,29.392c-4.072,1.321-4.773,5.981-1.871,8.363"/>
			<path class="st0" d="M25.203,29.806c-4.143,1.873-4.313,6.803-0.658,8.63"/>
			<path class="st0" d="M29.668,29.855c-3.508,1.91-3.508,6.84,0.402,7.945"/>
		</g>
	</g>
	<path class="st2" d="M15.754,25.269C16.821,17.11,13.685,8.015,4.066,1.385C-1.28,15.98,0.312,26.136,9.259,33.42"/>
	<path class="st2" d="M41.309,32.634c-3.645,11.654-1.605,22.817,9.647,27.364c4.062-11.956,1.992-22.885-7.163-32.052
		C31.964,16.1,9.24,21.591,8.065,40.156C6.893,58.681,28.2,62.024,42.622,54.063"/>
	<path class="st2" d="M45.901,29.491C56.919,25.377,69,33.11,69,47.209C69,60.626,55.995,62.28,51.802,58.2"/>
	<path class="st2" d="M53.219,48.963c1.302-1.778,3.599-3.085,6.563-3.138"/>
	<path class="st2" d="M13.764,54.667c-4.614,1.667-4.452,7.795,2.095,8.497c4.083,0.438,6.408-1.989,5.46-5.365"/>
	<path class="st2" d="M31.769,57.917c-1.285,3.401,0.96,6.262,5.865,5.602c4.958-0.667,6.5-5.052,3.572-8.239"/>
</g>
</svg>
レイヤー名がid属性になる

ページトップへ戻る

詳細オプションの詳細

詳細オプションの各項目について、詳しくは、「SVG オプション」パネル内の説明の欄を参照のこと。パネル内の項目にカーソルを合わせると、詳しい説明が表示されます。

あと、各項目についての公式の説明は、下記ページでも確認できます。

Illustrator でアートワークを保存する方法

以下、詳細オプションの項目について、個人の見解です。

「CSS プロパティ」

プレゼンテーション属性
SVG要素に用意されている、見た目をつかさどる属性「プレゼンテーション属性」を使って、スタイルを適用します。SVG要素ごとに属性を書き込むので、ソースコードが煩雑になりがち:(
下のサンプルのpath要素にあるfillとかstrokeとかstroke-widthとかが、プレゼンテーション属性です。
SVG 属性リファレンス - SVG: Scalable Vector Graphics | MDN
スタイル属性
SVG要素にstyle属性を指定して、スタイルを適用します。こちらも結局、SVG要素に逐一style属性を書き込むので、ソースコードが溢れかえりがちX(
上のサンプルと見比べると、プレゼンテーション属性だったところが、見事にCSSプロパティに置き換わっているのがわかりますね。プレゼンテーション属性=CSSプロパティなのです:)
スタイル属性 (実体参照)
実体エンティティ宣言というXMLの構文を使って定義した「実体エンティティ参照」を、style属性の値として指定して、スタイルを適用します。
下のサンプルで言うと、<!ENTITYというところでst0というような名前に参照文字列を定義して、path要素の、style属性の値として<path style="&st0;"...という風に使われています。
スタイル属性の値を実体参照という変数みたいなものに入れておいて、style属性にはその変数を入れているということなのですが、公式の説明によると、“レンダリング速度が速くなり、ファイルサイズも小さくなります”とのこと…ほんとうに?:/
エンティティ宣言とエンティティ参照の DOM への読み込み | Microsoft Docs
スタイル要素
HTMLと同じように、style要素内にスタイルを定義して、class属性でもって、スタイルを適用します。
ただ、公式の説明にある“このオプションを選択すると、レンダリング速度が遅くなることがあります”というのが気がかりですけれど、読みやすさを優先するならスタイル要素ですもんね;D

「小数点以下の桁数」と「エンコーディング」

小数点以下の桁数
アンカーポイントやパスラインの座標位置の厳密度を表します。
「1」にすると下ソースコードみたくなります(最初のpath要素のみ抜粋)
<path class="st0" d="M20.6,29.4c-4.1,1.3-4.8,6-1.9,8.4"/>
「3」にすると下ソースコードみたく、小数点以下の桁数が増えてますね。
<path class="st0" d="M20.65,29.392c-4.072,1.321-4.773,5.981-1.871,8.363"/>
小数点以下の最大桁数(1桁〜7桁まで)を指定します。値が大きければ桁数が増えて、その分、細かなニュアンスがしっかりと再現されます。ここでは「3」にしましたけれど、ピクトグラムみたいな単純な図形やアイコンの場合には「1」にします。ここは大体いつも「1」か「3」です。(なんとなく「2」にはしません。)
エンコーディング
HTMLで使用するので、charsetと同じ「Unicode (UTF-8)」を選択します。

「その他のオプション」

<tspan> エレメントの出力を制御
チェックしてないと、文字の詰め具合カーニングが調整されてるテキストに対して、一文字ずつ<tspan>要素で括ってx属性で左右に動かしてカーニングを再現するため、ソースコードがものすごく読みづらくなっちゃいます。
なので、テキストがある場合にはチェックした方が良いです。
パス上テキストに エレメントを使用
パスラインに沿わせたテキストがある場合に、textPath要素を使って、ちゃんとパスラインに沿ったテキストとしてデータを書き出してくれます。チェックしてないと、一文字ずつtext要素で括って、x/y属性rotate属性を駆使して、あたかもパスラインに沿ってるかのように配置した状態で書き出されます。
なので、パスラインに沿ったテキストがある場合には、チェックした方が良いです。
レスポンシブ
書き出されるコードのsvg要素からwidth属性height属性が出力されなくなります。width/height属性があってもCSSでサイズを変更することはできるし、あった方がいいんじゃないかなーと思うので、チェックしません。
スライスデータを含める
スライス機能を利用している場合に、その情報がmetadata要素として出力されます。利用してなくても、いろんなエンティティ宣言が書き出されてしまうので、Webサイトで使う分には、チェックすることはなさそうです。
XMP を含める
イラレで作成・編集されたことを記録するさまざまな情報(メタデータ)が書き出されます。とっても長いので、Webサイトで使う分には、チェックすることはありません。
XMP メタデータ

ページトップへ戻る

ソースコードを整える

イラレのデータから書き出したSVGファイルのソースコードを整えてゆきます。
最適化という意味もありますけれど、SVG画像には、HTMLで表示させる方法が幾通りもあるので、使い方に合わせてカスタマイズする目的もあります:)

ひと通り取っ払う

まずは、SVGコードから一旦、ひと通りの余分なコードを取り払うべく、SVGファイルを圧縮します。SVGファイルの圧縮には以下のサイトが便利です;)

SVGOMG - SVGO's Missing GUI
SVGOMG - SVGO's Missing GUI

サイトへアクセスしたらば、おもむろに、SVGファイルをドラッグしてドロップ!

logo_pan.svgをブラウザ画面へドロップ

すると、ドロップしたアイコンが表示されて、右側にいろんなオプションが表示されてる画面に移ります。
オプションの設定は、デフォルト※1のままで問題ないのですけれど、今回は、デフォルトの状態から、「Remove viewBox」と、「Marge Paths」だけチェックを外しました。「svg要素からviewBox属性を削除しないように」と、「path要素をマージ※2しないように」ということになります。

  • ※1.デフォルトの状態がわからなくなったら、一番下の「RESET ALL」をクリックするとデフォルトに戻ります。
  • ※2.path要素をマージすると、イラレで複数のパスを複合パスにした状態になります。スタイルや属性値が同じなのに分かれてるpath要素がマージされます。
「Remove viewBox」と「Marge Paths」のチェックを外す

ヘッダーの「MARKUP」をクリックすれば、圧縮されたSVGコードが確認できます。
Downloadアイコンをクリックして、SVGファイルをダウンロードすることもできますけれど、今回は、圧縮されたコードを元のSVGファイルへコピペして済ませちゃうことにします;D
Copy as textアイコンをクリックして、SVGコードをクリップボードにコピーしたらば、元のSVGファイルへ上書きペースト!
こんな感じのコードになりました。流石に圧縮されてますね…!

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="70" height="65" viewBox="0 0 70 65" xml:space="preserve"><style>.st0,.st1,.st2{fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.st1,.st2{stroke-width:2.5}.st2{stroke-width:2}</style><g id="pan"><g id="face"><path id="mouse" class="st0" d="M26.661 55.257c-1.377 1.28-2.769 2.18-2.769 2.18s-1.323-1.15-2.428-2.573"/><g id="eye"><path class="st1" d="M12.851 43.279c-1.376 0-1.438 2.271-.015 2.271 1.281 0 1.317-2.271.015-2.271z"/><path class="st1" d="M34.577 43.508c-1.502-.033-1.519 2.409-.016 2.442 1.543.034 1.559-2.408.016-2.442z"/></g><g id="hair"><path class="st0" d="M20.65 29.392c-4.072 1.321-4.773 5.981-1.871 8.363"/><path class="st0" d="M25.203 29.806c-4.143 1.873-4.313 6.803-.658 8.63"/><path class="st0" d="M29.668 29.855c-3.508 1.91-3.508 6.84.402 7.945"/></g></g><path id="ear" class="st2" d="M15.754 25.269C16.821 17.11 13.685 8.015 4.066 1.385-1.28 15.98.312 26.136 9.259 33.42"/><path class="st2" d="M41.309 32.634c-3.645 11.654-1.605 22.817 9.647 27.364 4.062-11.956 1.992-22.885-7.163-32.052C31.964 16.1 9.24 21.591 8.065 40.156 6.893 58.681 28.2 62.024 42.622 54.063"/><path class="st2" d="M45.901 29.491C56.919 25.377 69 33.11 69 47.209 69 60.626 55.995 62.28 51.802 58.2"/><path class="st2" d="M53.219 48.963c1.302-1.778 3.599-3.085 6.563-3.138"/><path class="st2" d="M13.764 54.667c-4.614 1.667-4.452 7.795 2.095 8.497 4.083.438 6.408-1.989 5.46-5.365"/><path class="st2" d="M31.769 57.917c-1.285 3.401.96 6.262 5.865 5.602 4.958-.667 6.5-5.052 3.572-8.239"/></g></svg>

見やすく改行とインデントを入れると、以下のようになります。

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="70" height="65" viewBox="0 0 70 65" xml:space="preserve">
<style>
	.st0,.st1,.st2{fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
	.st1,.st2{stroke-width:2.5}
	.st2{stroke-width:2}
</style>
<g id="pan">
	<g id="face">
		<path id="mouse" class="st0" d="M26.661 55.257c-1.377 1.28-2.769 2.18-2.769 2.18s-1.323-1.15-2.428-2.573"/>
		<g id="eye">
			<path class="st1" d="M12.851 43.279c-1.376 0-1.438 2.271-.015 2.271 1.281 0 1.317-2.271.015-2.271z"/>
			<path class="st1" d="M34.577 43.508c-1.502-.033-1.519 2.409-.016 2.442 1.543.034 1.559-2.408.016-2.442z"/>
		</g>
		<g id="hair">
			<path class="st0" d="M20.65 29.392c-4.072 1.321-4.773 5.981-1.871 8.363"/>
			<path class="st0" d="M25.203 29.806c-4.143 1.873-4.313 6.803-.658 8.63"/>
			<path class="st0" d="M29.668 29.855c-3.508 1.91-3.508 6.84.402 7.945"/>
		</g>
	</g>
	<path id="ear" class="st2" d="M15.754 25.269C16.821 17.11 13.685 8.015 4.066 1.385-1.28 15.98.312 26.136 9.259 33.42"/>
	<path class="st2" d="M41.309 32.634c-3.645 11.654-1.605 22.817 9.647 27.364 4.062-11.956 1.992-22.885-7.163-32.052C31.964 16.1 9.24 21.591 8.065 40.156 6.893 58.681 28.2 62.024 42.622 54.063"/>
	<path class="st2" d="M45.901 29.491C56.919 25.377 69 33.11 69 47.209 69 60.626 55.995 62.28 51.802 58.2"/>
	<path class="st2" d="M53.219 48.963c1.302-1.778 3.599-3.085 6.563-3.138"/>
	<path class="st2" d="M13.764 54.667c-4.614 1.667-4.452 7.795 2.095 8.497 4.083.438 6.408-1.989 5.46-5.365"/>
	<path class="st2" d="M31.769 57.917c-1.285 3.401.96 6.262 5.865 5.602 4.958-.667 6.5-5.052 3.572-8.239"/>
</g>
</svg>

SVGコードを整理整頓

さらに目視で、削除できる属性は片っ端、削除しちゃいます。
x="0"y="0"SVGコンテナー(アートボード)のX/Y座標を表しますが、デフォルト値が0なので削除しちゃって問題ありません。あと、version="1.1"xml:space="preserve"は、“SVG 2以降非推奨”とのことなので、今のうちから削除してしまっても良いです。

path要素すべてにclass属性がついてるのは、なんだか効率が悪いですね:(。せっかくg要素で括っているので、class属性は消しちゃって、g要素のid属性に対してスタイルを指定することにします。

最初の.st0,.st1,.st2は、つまり全部のpath要素に適用するということなので、#panにまとめちゃえます。.st1,.st2に適用してから.st2に同じプロパティを指定してるのは無駄なので、最初の,.st2はなくても大丈夫。class="st1"<g id="eye">の中にしかないので#eyeにしちゃいます。同じように、class="st2"もg要素でまとめて、id="body"とすれば、.st2#bodyにしちゃえますねー;D

てなもんで、こんな感じになりました!

<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="70" height="65" viewBox="0 0 70 65">
<style>
	#pan{fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
	#eye{stroke-width:2.5}
	#body{stroke-width:2}
</style>
<g id="pan">
	<g id="face">
		<path id="mouse" d="M26.661 55.257c-1.377 1.28-2.769 2.18-2.769 2.18s-1.323-1.15-2.428-2.573"/>
		<g id="eye">
			<path d="M12.851 43.279c-1.376 0-1.438 2.271-.015 2.271 1.281 0 1.317-2.271.015-2.271z"/>
			<path d="M34.577 43.508c-1.502-.033-1.519 2.409-.016 2.442 1.543.034 1.559-2.408.016-2.442z"/>
		</g>
		<g id="hair">
			<path d="M20.65 29.392c-4.072 1.321-4.773 5.981-1.871 8.363"/>
			<path d="M25.203 29.806c-4.143 1.873-4.313 6.803-.658 8.63"/>
			<path d="M29.668 29.855c-3.508 1.91-3.508 6.84.402 7.945"/>
		</g>
	</g>
	<g id="body">
		<path id="ear" d="M15.754 25.269C16.821 17.11 13.685 8.015 4.066 1.385-1.28 15.98.312 26.136 9.259 33.42"/>
		<path d="M41.309 32.634c-3.645 11.654-1.605 22.817 9.647 27.364 4.062-11.956 1.992-22.885-7.163-32.052C31.964 16.1 9.24 21.591 8.065 40.156 6.893 58.681 28.2 62.024 42.622 54.063"/>
		<path d="M45.901 29.491C56.919 25.377 69 33.11 69 47.209 69 60.626 55.995 62.28 51.802 58.2"/>
		<path d="M53.219 48.963c1.302-1.778 3.599-3.085 6.563-3.138"/>
		<path d="M13.764 54.667c-4.614 1.667-4.452 7.795 2.095 8.497 4.083.438 6.408-1.989 5.46-5.365"/>
		<path d="M31.769 57.917c-1.285 3.401.96 6.262 5.865 5.602 4.958-.667 6.5-5.052 3.572-8.239"/>
	</g>
</g>
</svg>

ページトップへ戻る

用途に合わせてカスタム

ここから更に、使用する場面に合わせてコードをカスタマイズしてゆきます。
SVGファイルをHTMLで表示する方法は以下の4種類。

img/object要素で設置する
img要素で画像を配置する方法。
背景画像として表示する
CSSのbackgroundプロパティを使って、HTML要素の背景画像として表示する方法。
svg要素を直接書き込む
SVGファイル内のsvg要素<svg width="70" height="65" viewBox="0 0 70 65"></svg>まで)を丸ごとHTMLにコピペして、画像を配置する方法。
use要素で設置する
SVGのuse要素を使ってSVGファイルの、任意のid属性を持つ要素だけを読み込む方法(※詳しくは後述)

最初のふたつは、「SVGファイルも画像ファイルなので、他のフォーマットの画像(jpgとかpngとか)と同じように扱うことができる」ということ。あとのふたつは、XMLに基づくマークアップ言語ならではの方法で、HTMLに直接SVGコードを記述する方法です。

img/object要素で設置する

img要素なら<img src="logo_pan.svg">、object要素なら<object data="logo_pan.svg"></object>と記述するだけ、いちばん簡単な表示方法です:)
ただ、ロゴのパンちゃんには、紫のパンちゃんのほかに、白のパンちゃんがいるので、別途白いパンちゃんの画像も用意する必要があります:‹

ここでは「logo_pan.svg」の線の色を白くした、「logo_pan_white.svg」を用意しました。

背景画像として表示する

画像なので、もちろんCSSの背景画像としても表示できます。下サンプルは、上段がdiv要素に背景画像を表示するタイプ、下段がp要素擬似要素に対して背景画像を指定するタイプ。
ここでも、白いパンちゃんには「logo_pan_white.svg」を用意しています。

svg要素を直接書き込む

HTML内に直接、svg要素まるごと書き込みます。HTMLの中にg要素path要素直接あるということは、HTML側のCSSからスタイルが指定ができるということ!
下のサンプルでは、svg要素内のstyle要素をそっくりそのまま、HTMLのhead要素へ移動しています。
この方法ならば、画像はひとつも要らないし、CSSでstrokeプロパティの値を変えるだけでどんな色のパンちゃんも表示できちゃいます:D。ただ、ソースコードが長ーくなってしまうのが玉にきずX‹

※HTML内に記述する場合は、svg要素のxmlns="http://www.w3.org/2000/svg"(名前空間宣言)は不要。

use要素で設置する

use要素では、xlink:href属性で、SVGファイルまでの場所パスを指定します。そのあとにSVGファイル内で使っているidを続けて指定します。ここでは、「logo_pan.svg」と「logo_pan_white.svg」のsvg要素に付けている#logoというidを使って、下記のように指定しています。

<svg width="70" height="65" viewBox="0 0 70 65"><use xlink:href="logo_pan.svg#logo"></use></svg>

パンちゃん真っ黒ですね…:ᗡ
実は、use要素で読み込まれるのは、SVGの中でも描画可能要素だけなんです…X(style要素が読み込まれなくて、パンちゃん真っ黒になってしまったんですね…。描画可能要素については下記ページを参照のこと。

SVG 要素リファレンス - SVG: Scalable Vector Graphics | MDN

style要素が読み込めないならば、xlink:href属性のid指定は#logoから#panに変えることにします。
SVGファイル内にあったstyle要素は削除して、HTMLのhead要素内にコピペすれば、svg要素の時みたく、strokeプロパティの値を変えるだけでどんな色のパンちゃんも表示できちゃうかもしれませんね…:D

真っ黒のまま…。(※FirefoxとEdgeはちゃんと表示されてるけれど、どっちも紫ですね…)
use要素の中身をデベロッパーツールで調べてみると、#shadow-root (closed)という要素の中に、<g id="pan"></g>が入っているのがわかります。

use要素の中身

use要素で読み込んだ要素は、shadow DOMという、外側の構造やスタイルに影響されない隔離された要素として読み込まれるみたいなのです。shadow DOMについて詳しくは下記ページを参照のこと。

Shadow DOM v1: 自己完結型ウェブ コンポーネント  |  Web  |  Google Developers

けれど、shadow DOMの親要素(svg/use要素)にスタイルを指定すれば、shadow DOMにも反映されるみたい…!:o下サンプルでは、上のサンプルで#panに指定していたスタイルを、useに指定しなおしています。
線の太さは均一だけれどちゃんとパンちゃん表示されてます!(※FirefoxとEdgeなら線の太さもばっちりッ;D

use要素を、線の太さごとに小分けに書き出せば、線の太さも個別に変えられそうですね…!
use要素を複数、目#eye、口#mouse、前髪#hairと、体の輪郭#bodyに分けて設置して、スタイルを指定したい目と体の輪郭には、id名と同じclass名を付けることにします。

<svg width="70" height="65" viewBox="0 0 70 65">
	<use xlink:href="logo_pan.svg#mouse"></use>
	<use xlink:href="logo_pan.svg#eye" class="eye"></use>
	<use xlink:href="logo_pan.svg#hair"></use>
	<use xlink:href="logo_pan.svg#body" class="body"></use>
</svg>

全部のpath要素に指定するスタイルはsvg要素に指定して、.eye.bodyにそれぞれ線の太さを指定します。
無事、ロゴのパンちゃん表示されました!

…とはいえ、変えたいのは線の色だけなので、むしろ、HTML側から指定するのはstrokeだけで十分な気もしますね…
ということで下サンプルでは、SVGファイル内のid属性は、id="pan"だけ残してあとは削除。g要素を線の太さごとに括りなおして、style属性で線の色以外のスタイルを適用。HTML側のstyle要素で線の色だけ指定しています。
こっちの方が、ソースコードがすっきり明快で分かり良いかもしれませんねー:D

おまけ:実体参照を試してみる

記事を書いてる最中に知ったスタイル属性(実体参照)というのが、ほんとうに速くて軽いのか試してみました。かるいでしょうか…:o

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY pan "fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round">
	<!ENTITY eye "stroke-width:2.5">
	<!ENTITY body "stroke-width:2">
]>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="65" viewBox="0 0 70 65">
<g id="pan" style="&pan;">
	<path d="M26.661 55.257c-1.377 1.28-2.769 2.18-2.769 2.18s-1.323-1.15-2.428-2.573"/>
	<path style="&eye;" d="M12.851 43.279c-1.376 0-1.438 2.271-.015 2.271 1.281 0 1.317-2.271.015-2.271zM34.577 43.508c-1.502-.033-1.519 2.409-.016 2.442 1.543.034 1.559-2.408.016-2.442z"/>
	<path d="M20.65 29.392c-4.072 1.321-4.773 5.981-1.871 8.363M25.203 29.806c-4.143 1.873-4.313 6.803-.658 8.63M29.668 29.855c-3.508 1.91-3.508 6.84.402 7.945"/>
	<path style="&body;" d="M15.754 25.269c1.067-8.159-2.069-17.254-11.688-23.884-5.346 14.595-3.754 24.751 5.193 32.035M41.309 32.634c-3.645 11.654-1.605 22.817 9.647 27.364 4.062-11.956 1.992-22.885-7.163-32.052-11.829-11.846-34.553-6.355-35.728 12.21-1.172 18.525 20.135 21.868 34.557 13.907M45.901 29.491c11.018-4.114 23.099 3.619 23.099 17.718 0 13.417-13.005 15.071-17.198 10.991M53.219 48.963c1.302-1.778 3.599-3.085 6.563-3.138M13.764 54.667c-4.614 1.667-4.452 7.795 2.095 8.497 4.083.438 6.408-1.989 5.46-5.365M31.769 57.917c-1.285 3.401.96 6.262 5.865 5.602 4.958-.667 6.5-5.052 3.572-8.239"/>
</g>
</svg>

小さなアイコンだと違いはわからないですが、大きなSVGファイルになると、きっと軽いのかもしれません…。

ページトップへ戻る

あとがき

今回は、ロゴのパンちゃんだったので、こういう仕様のSVGファイルになりましたけれど、もしかして、線の太さも変えたかったり、カーソルを乗せると塗りがカラフルになったり、クリックしたらアイコンが動き出したり、させたい場合には、もっと別のカスタマイズになると思います。
そうして、自分の使いやすいようにカスタムされたSVGファイルは、Webサイト内で便利に使い回せるようになるってわけです;)

てなもんで、以上、ロゴのパンちゃんを作るときにやることでした。
最後まで読んでいただきありがとうございました!


SVGには他にも、CSSではできないような装飾が作れたり、パスラインをアニメーションさせたり、いろんなアイコンをひとつのSVGファイルにまとめたり、もちろんSVGファイル内でアニメーションを適用することもできるから、うごく画像も作れちゃいますね…! けどそのお話はまた今度;)

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください