SVGの概要

ウオトミズ(UOTOMIZU)の中の人

自分用。

SVGとは

SVGとはグラフィックを扱うためのXMLをベースにした言語のこと。①主要ブラウザでサポートがされている、②伸縮が自在である、③HTML、CSS、JavaScriptとの相性が良く高度なグラフィックを実現できるの3点がそろっているため、注目されている。

 

テキストに対する HTML のような位置づけで、グラフィックに対して SVG が存在します。

引用:https://developer.mozilla.org/ja/docs/Web/SVG

 

対応ブラウザ

SVG自体は最新の主要ブラウザで使用可能。

 

Can I Use – SVG:https://caniuse.com/#feat=svg

 

制作事例

SVGの制作事例を挙げるときりがないけれど、最も多い事例としてウェブサイトのロゴにSVGが採用されている。

 

SVGのメリットまとめ

  • 主要ブラウザに対応している。
  • 伸縮自在な上、重さも変わらない。
  • CSSからコードを操作できる。
  • JavaScriptと連携できる。
  • アニメーションができる。

 

SVGアニメーション

SVG自体を扱うのは簡単なため、SVGをウェブサイトのロゴに使う事例はたくさんある。ただ、アニメーションとなると学習コストがかかる。

ただ、アイデア次第で、人目をひくアニメーションが可能になる。うまくサイトに組み込めば、オリジナリティー溢れるサイト制作ができそう。ビジュアルのデザインを凝りたい人にとってはとても魅力的な手段。

 

対応ブラウザ

SVG AnimationはEI、Edgeなどが未対応。

Can I Use – SVG Animation:https://caniuse.com/#search=svg%20animation

 

制作事例

次のサイトの404のアニメーションがSVGで作られている。

404 Creative Page | envato market

 

必要な知識とツール

  • HTML、CSS、JavaScriptなど基本的なウェブ言語の知識。
  • Adobe Illustrator、Sketchなどのツール。
  • SVGの要素と属性に関する知識。

 

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO