Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)
これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは？ まず始めに、SVGとは何か？の簡単な説明です。 SVGとはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル（ドット）ごとに色を表現したもので、総じてラスター（ビットマップ）画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
MdN Design｜総合情報サイト
長方形を 描画する HTML内でSVGを扱うにはsvg要素を使う。canvas（Lesson10）のようにwidthやheight属性を付加することで描画領域を決めることができる【1】。 SVGで図形を作成する際はすべてこのsvg要素内に記述していく。まずは簡単な図形から描いてみよう。 【2】のrect要素は矩形を描画するタグで、図の左上の座標x、yと図の幅width、高さheightなどの属性を設定すると矩形を描画できる。XMLの形なのでJavaScriptのようなスクリプト言語を苦手としている人でも理解しやすい。fillは塗りつぶしの属性で、値にはRGB 表記のほかにもRGBAや16進数表記など、CSSで使われている形式が利用できる。 rxもしくはryに数値を入力すると角丸の矩形ができる（どちらか一方でよい）。角丸はcanvasよりもかなり簡単に描画できるのでぜひ覚えておきたい【3】。
ベクター形式のグラフィックを扱うSVGの基本
SVG（Scalable Vector Graphics）とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。 インターネットで一般的に使われる画像形式であるJPEGやPNGなどはビットマップ形式と呼ばれ、画像をピクセルという小さな四角に分割し、「各ピクセルが何色か」という情報を集めることで、画像を構成しています。 それに対し、ベクター形式のグラフィックスでは、画像を線や曲線、円などの図形の集合体として扱います。SVGの内容は「どこからどこへ線を引く」「どこを中心に円を描く」といった情報の集合になります。ベクター形式のデータは、ビットマップ形式のデータに比べ、拡大縮小を行っても画質が悪くならないというメリットがあります。 SVGは最初のバージョンであるSVG 1.0が2001年に正式な仕様となり、現在の最新版は2011年8月に
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BIGLOBEなんでも相談室サービス終了のお知らせ