Scalable Vector Graphics（SVG）についての考察
ベクトルグラフィックは印刷媒体に広く適用されてきた。 Webサイトでは、SVGまたはベクターグラフィックでベクターグラフィックを追加することもできます。 スケーラブルベクターグラフィック. W3.orgの公式仕様から引用すると、SVGは次のように記述されています。
XMLで二次元グラフィックスを記述するための言語。 SVGでは、3種類のグラフィックオブジェクト、ベクトルグラフィック形状（直線と曲線からなるパスなど）、画像、テキストを使用できます。.
それは1999年以来実際にはあり、2011年8月16日の時点で、それはW3C勧告になりました。それでも、SVGはまだかなり活用されていませんが、Webサイトでグラフィックや画像を提供するためにビットマップではなくベクトルを使用することには多くの利点があります.
SVGの利点
Webサイトでグラフィックを提供するという点では、SVGはビットマップよりも優れている点がいくつかあります。
解像度に依存しない
ビットマップ/ラスタグラフィックは解像度に依存します - それはピクセルに基づいています。提供されたグラフィックは、特定のズームレベルでサイズ変更されるとピクセル化されたように見えます。グラフィックはそれを作る数式で表現されるので、それは自然界では解像度に依存しないベクターグラフィックでは起こりません。 品質を維持しながら任意のズームレベルでスケーラブル, Retinaディスプレイでも.
HTTPリクエストを減らす
SVGはHTMLドキュメントに直接埋め込むことができます。 SVG これにより、ブラウザはグラフィックを提供するためのリクエストを行う必要がなくなります。これにより、Webサイトの負荷パフォーマンスも向上します。.
スタイリングとスクリプティング
で直接埋め込む SVG タグを使用すると、CSSを使用してグラフィックを簡単にスタイル設定することもできます。私たちはできる オブジェクトのプロパティを変更する 背景色、不透明度、境界線など、通常のHTMLタグと同じ方法です。同様に、JavaScriptを介してグラフィックを操作することもできます。.
アニメーション化および編集可能
SVGオブジェクトは、animation要素を使用するとき、またはjQueryなどのJavaScriptライブラリを介してアニメーション化することができます。 SVGオブジェクトは、テキストコードエディタやInkscape（無料）やAdobe Illustratorなどのグラフィックソフトウェアでも編集できます。.
小さいファイルサイズ
SVGはビットマップに比べてファイルサイズが小さく、同様のグラフィック表示があります。.
SVGで基本図形を描く
仕様によると、次のような基本的な形をいくつか描くことができます。 長方形、円、線、楕円、ポリライン、多角形 SVGでは、ブラウザがSVGグラフィックをレンダリングするためには、それらすべてのグラフィック要素をその中に挿入する必要があります。 タグ。以下の例を見てみましょう。
ライン
描く 行 SVGでは、
上からわかるように、線の始点座標は最初の2つの属性で表されます。 ×1 そして ×2, 線の終点座標は次のように表されます。 y1 そして y2.
他にも2つの属性があります。 ストローク そして ストローク幅 それぞれ境界線の色と境界線の幅を定義するために使用されます。あるいは、次のようにインラインスタイル内でこれらの属性を定義することもできます。
それは結局同じことをするだけです.
- デモを見る “ライン”
ポリライン
それはほぼ同じです
ポイント 線を形成するすべての座標を格納する属性.
- デモを見る “ポリライン”
矩形
長方形を描くのもこれで簡単です
- デモを見る “矩形”
サークル
また、円を描くこともできます。 100 で定義される半径 r 属性：
最初の2つの属性, cx そして cy 円の中心座標を定義しています。上記の例では、 102 両方の バツ そして よ これらの属性が指定されていない場合は座標, 0 デフォルト値として使用されます.
- デモを見る “サークル”
楕円
楕円を描くことができます バツ 線の半径と よ 線の半径 RX そして ry 属性;
- デモを見る “楕円”
ポリゴン
とともに
- デモを見る “ポリゴン”
ベクトルグラフィックエディタの使い方
ご覧のとおり、HTMLでSVGを使用して単純なオブジェクトを描画するのは非常に簡単です。しかし、オブジェクトがより複雑になると、そのプラクティスはもはや理想的ではなくなり、頭痛がします。.
幸いなことに、上で述べたように、次のようなベクトルグラフィックエディタを使うことができます。 アドビイラストレーター または インクスケープ 仕事をする。あなたがこれらのソフトウェアに精通しているなら、グラフィックをHTMLタグで自分でコーディングするよりも、彼らのGUIでオブジェクトを描く方がはるかに簡単です。.
Inkscapeを使用している場合, ベクトルグラフィックをプレーンSVGとして保存してから、テキストコードエディタで開くことができます。これで、ファイルにSVGコードが見つかりました。すべてのコードをコピーしてHTML文書内に貼り付けます.
または、埋め込むこともできます。 .SVG これらの要素の1つを通してファイルを作成します。 埋め込む, iframe そして 物, 例えば;
結果は最終的に同じになります.
この例では、私はOpenClipArt.orgからこのApple iPodを使います.
- デモを見る “iPod”
ブラウザのサポート
ブラウザのサポートに関しては、SVGはIE 8以前を除くすべての主要ブラウザで非常によくサポートされています。しかし、この問題はRaphael.jsと呼ばれるこのJavaScriptライブラリで解決できます。作業を簡単にするために、このツールReadySetRaphael.comを使用してSVGコードをRaphael対応形式に変換します。これが.
まずダウンロードして、 Raphael.js あなたのHTML文書へのライブラリ。それから、アップロード .SVG サイトにファイルを作成し、生成されたコードを次のロード内にコピーして貼り付けます。 関数;
window.onload = function（）// Raphaelのコードはここにあります
の中 体 タグ、以下を入れて div と rsr id属性
それで、終わりです。下のリンクから例をチェックしてください.
- デモを見る “ラファエル”
最終的な考え
それがSVGの基本です。私達は今あなたがこの主題について公正な理解を持っていることを願っています。 Retinaディスプレイで使用する場合でも、あらゆる画面解像度に合わせてサイトを最適化するのが最善の方法です。.
いつものように、あなたが冒険好きな人であれば、ここで私たちはこの主題をより深く掘り下げるためにもう少しの参照と議論を入れました.
- SVG - W3スクールの紹介
- SVGとは独立した解像度 - Smashing Magazine
- なぜあなたはSVGを使っていないのですか？ - NetTuts
読んでくれてありがとう、そして私たちはあなたがこの記事を楽しんだことを願っています.
- デモを見る
- ソースをダウンロード
