ENTRY TITLE

レスポンシブ対応に便利な流行りの『SVG』の基礎の基礎

  • LINEで送る
  • このエントリーをはてなブックマークに追加

最近よく聞くSVG。画像ではなくコードを使ってベクター描画ができる。ベクターなだけに拡大しても縮小しても画像があれることがなく、マルチデバイスに対応するのに打ってつけ。今度使うことが多くなるであろうSVGの使い方を書き留めておこうということで記事にまとめました。

ベクターを描くにはやっぱイラレでしょってわけじゃないと思いますが、Adobe IllustratorがSVGの書き出しに対応していますので、まずはイラレでベクター素材を作成します。

書き出しをする前に
キャンバスを書き出すベクターのサイズに合わせます。
これは、必要のない背景(白)の部分も含めて書き出しをしてしまうからです。
(CS5までを利用の方ならスライスからSVGへの書き出しができたみたいで、わざわざキャンバスサイズの調整をする必要もなかったようです。自分はCS6利用のため残念)

書き出しは、
メニューバー → ファイル→ スクリプト → SVGとして書き出し。でもいいですし。
メニューバー → 別名で保存 → ファイル形式を SVGで保存すればOK

書き出したものがこちら

画像としてみることも、ソースとして見ることもできます。
コードここに載せようと思いましたが、膨大だったのでやめます。

実際書きだしたものをSVGとJPGで比べてみる

【SVG】

[code lang=”js”]<img src="http://bzoh.sakura.ne.jp/_blog/wp-content/themes/practicetheme
/images/svgtest.svg" width="100px">[/code]

作成したサイズそのまま

[code lang=”js”] <img src="http://bzoh.sakura.ne.jp/_blog/wp-content/themes/practicetheme
/images/svgtest.svg" width="200px">[/code]

2倍

[code lang=”js”] <img src="http://bzoh.sakura.ne.jp/_blog/wp-content/themes/practicetheme
/images/svgtest.svg" width="400px">[/code]

4倍

【JPG】

[code lang=”js”]<img src="http://bzoh.sakura.ne.jp/_blog/wp-content/uploads/2014/10
/svgtest.jpg" width="100px">[/code]

作成したサイズそのまま

[code lang=”js”] <img src="http://bzoh.sakura.ne.jp/_blog/wp-content/uploads/2014/10
/svgtest.jpg" width="200px">[/code]

2倍

[code lang=”js”] <img src="http://bzoh.sakura.ne.jp/_blog/wp-content/uploads/2014/10
/svgtest.jpg" width="400px">[/code]

4倍

どうでしょう。
みての通り拡大しても画像が荒れません。スマホでページを拡大して見ることなんて機会も多いと思いますがその際画像にガタガタのピクセルが浮いてくるようなことがなくなるわけです。画面サイズごとに対応の画像を作る必要もなくなります。
これでサイトのロゴやら作っておけば画像のレスポンシブ対応が容易にできます。

また、SVGは画像のようですが、もともとはコードで書かれていますのでスタイルをあてることができます。
CSSアニメーションをSVGにあててSVGアニメーションなるものも作るとこができるのです。
実際どんなものができるのか。
先日更新した、自分のポートフォリオでもSVGアニメーションを使ってみてます。

参考サイト

SVGのアニメーション | mkasumi.com
拡大縮小も自由自在! SVGをアニメーションさせてみる | MONSTER DIVE【モンスターダイブ】

■さいごに
注意点として1枚のサイズ容量がでかいです。なので多用しすぎるのもよくなかったりします。
容量を軽くしてくれる書き出し方法や、ツールなんかもあるようですのでまたの機会に記事にできればと思います。

では〜

  • LINEで送る
  • このエントリーをはてなブックマークに追加

RELATED POST関連する記事を表示しています

POPULAR POST人気の記事を表示しています