【レポート】CPI x CSS Nite・After Dark (7)「Webで使うIllustrator、そして明日から使うSVG」

2014年2月19日に開催された「CPI x CSS Nite・After Dark (7)『Webで使うIllustrator、そして明日から使うSVG』」に参加してきました。

Webで使うIllustrator、そして明日から使うSVG(鷹野雅弘さん)
  • 「マルチデバイス対応」・・・Web制作環境の大きな曲がり角
  • ピクセル・パーフェクトが厳しくなってきている→CSS3・SVG
    1. phablet・・・スマホは大きく、タブレットは小さく
    2. 断片化・・・Androidの画面解像度はバラバラ
    3. HiDPI・・・iPhone 326ppi、Android 250ppi,440ppi
  • IllustratorCCからCSSプロパティパネルが導入(でも、使えるのはグラデーションくらい?)
  • Web制作で使う場合は、[新規ドキュメント]でプロファイルを[Web]に。[環境設定]の単位は[ピクセル]に
SVGマニアック(松田直樹さん)
  • SVGは画像であり、XMLの文書である
  • SVGの特徴
    1. 伸縮自在のベクター画像
    2. CSSによる装飾が可能
    3. XMLなので汎用性が高い
    4. DOM API
  • SVGの属性は80個
  • Webサイトでの使い方
    1. 外部ファイル参照(img要素、object 要素、bacground-image)
    2. HTML5に直接SVG要素を記述
  • IEは9からSVGに対応。ただしアニメーションはIE11でも対応していない→今のところjs必須
  • SVGは画像であり、XMLの文書である

SVGのメリット=「ベクター画像である」というイメージが強かったのですが、いやいやそれもだけど、最大の強みは「SVGは文書である」というところにであると理解できたのが、最大の収穫でした。

SVG2.0が今年2014年勧告目標だそうなので、ますます盛り上がっていくような気がします。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー