2015/7/27

Web制作, おすすめ本

「SVG MANIAX in KOBE」セミナーを受講したので、始めてSVGを作ってみた

7月25日(土)に開催されたCSS Nite in KOBE, Vol.11 松田 直樹さんによる「これからのWebサイト設計〜CSSフレームワークでつくるマルチデバイス対応サイト LIVE版」&「SVG MANIAX in KOBE」に参加しました。
前半はSVG、後半はサイト設計のお話とBootstrapの制作手法と、かなり充実した内容でした。

実務でコーディング案件が少ないので、SVGについては勉強しないとと思いつつ手がつけられていない状態でして、今回のセミナーの書籍である「Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術」も購入し、予習して挑みました。

本を読んだ感想ですが、難しい…。そして、セミナーでお話を伺っても、やはり難しすぎる…。(T_T)
実際に試してみないとピンとこないので、こちらの記事で試してみます。
(本やセミナーでは本当に多岐に渡った内容だったのですが、私は初歩的なことしか書けずにすみません…。)

Illustratorで作図

Illustratorのアートボードの大きさが、SVGの「viewbox」属性の幅・高さに。
レイヤー名はSVGのソースに反映しますので、日本語じゃなく英数字が望ましいようです。

01
svg01

02
svg02

kunugi designのロゴで2種類作ってみました。
01は幅200pxで、文字も含めたもの。02は幅100pxで、どんぐりだけのものです。

svg03

ファイル>別名保存>SVGで書き出し。
「レスポンシブ」にチェックを入れると、SVGにwithとheightが書かれないようです。

書き出されたsvgファイルをエディタで開いてみました。

svg04

01はパスが多いのでソースも長いです。。
Illustratorで書き出されたソースには不要な部分もあるとのことで、削除しました。

削除後の02がこちら。

svg05

WordPressにSVGをアップする

書き出したSVGをこのブログのWordpressにアップしようと思ったのですが、エラーになってしまいました。

svg06

セキュリティの観点から、と。確かに、SVGの中にスクリプトも埋め込めますもんね…。

ググりまして、下記のプラグインを入れてみることにしました。
Scalable Vector Graphics (SVG)

それでアップできるようになりましたけど、WordpressのサイトでSVGを使用するにはちょっと検討が必要かも?と思ったりしました。

HTMLへの埋め込み

SVGをHTMLで表示させるには、大きく分けて下記に分類できるそうです。

  1. img要素
  2. object要素、embed要素、iframe要素
  3. CSSのbackgroundやcontent
  4. インラインSVGで記述

1.img要素

logo01

<img src="http://blog.kunugi-design.jp/wp-content/uploads/2015/07/logo01.svg" width="200" height="200" alt="logo01" />

一番簡単なので、これで済めば助かるんですけど…。
imgタグの記述は、SVGファイル内で外部ファイルを参照している場合は読み込めない…等、向かない場合もあるようです。

2.object要素

logo01

<object data="http://blog.kunugi-design.jp/wp-content/uploads/2015/07/logo01.svg" type="image/svg+xml" width="200" height="200"><img src="http://blog.kunugi-design.jp/wp-content/uploads/2015/07/logo01.png" alt="logo01" width="200" height="200"  /></object>

object要素での記述はSVG機能の多くが使える反面、HTMLよりobject要素内のイベントが優先されてしまうデメリットもあるようです。(object要素をaで囲ってリンクができない…等)
代替画像を用意するのが面倒かも。。

3.CSSのbackground

02を背景にリピートしてみました

【HTML】
<div class="svg-bg">
背景にリピートしてみました
</div>

【CSS】
.svg-bg	{
width:auto;
height:100px;
background-image:url(http://blog.kunugi-design.jp/wp-content/uploads/2015/07/logo02.svg);
}

背景画像で使用する機会は何かと多いかな〜と想像しています。

インラインSVG

<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="100px" height="100px" viewBox="0 0 100 100" >
<g>
	<path fill="#534946" d="M88.5,42.4c-4.7-24.3-27.1-30.6-34.4-32c-2.5-0.5-4.4-8-4.4-8s-1.9,7.5-4.4,8c-7.3,1.4-29.6,7.7-34.4,32
		C5.5,70.5,17.6,85,20.7,86.7c3.6,1.9,7.5,1.6,11.9,0.5c5.5-1.4,14.2-1.6,17-1.6l0,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0l0,0
		c2.8,0,11.5,0.2,17,1.6c4.3,1.1,8.3,1.4,11.9-0.5C81.8,85,94,70.5,88.5,42.4z"/>
	<path fill="#534946" d="M72.3,92.6c0-2.3-11.4-3.6-15-3.8c-3.4-0.2-6.2-0.3-7.4-0.3l0,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0l0,0
		c-1.2,0-4,0.1-7.4,0.3c-3.6,0.2-15,1.5-15,3.8c0,2.6,13.8,3.6,22.4,3.6v0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0v0
		C58.5,96.2,72.3,95.2,72.3,92.6z"/>
</g>
</svg>

「fill」で色指定ができるので、ロゴカラーに変更してみました。

HTML5であればSVGをそのまま記載できるのですが、コードがめちゃめちゃ長くなるのが難点ですね。。
SVG機能の全てが使用できるようですが、サイズ指定でブラウザによって認識が異なるようです。詳しくは本をご覧ください…<(_ _)>。

最後に

上記4つのどんな記述が最適なのかは、初心者の私にとってはまだピンときておりませんが、実際にデザインにあわせてコーディングする際に考えたいと思います。。
近々自分のサイトをリニューアルしたく、ロゴにSVGを使用して画像は最小限で構築したいと妄想しています。
クライアントさまの案件で使うのはまだ不安なので、まずは自分のサイトで試します…(^_^;)。。

アニメーションやフィルター機能、SVG Spritesなどなど、SVGの使い方は多岐に広がるので、今のところチンプンカンプンですが、時間を見つけてぼちぼちと触っていこうと思います。

今回のセミナーも、題材になった書籍もとても有意義でした!
私のようにSVGって何か怖いな〜と見て見ぬふりしていた方には、是非オススメさせて頂きます!

Share on Facebook42Tweet about this on Twitter

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

こちらもあわせてどうぞ

    関連する記事は見当たりません…