💃🏽 🌏 🎑 SVGグラフィックスの紹介 👨‍👧‍👦 ⚪️ 🎺

この投稿は、SVG（Scalable Vector Graphic）に関する一連の記事の最初で、サイト上のベクターグラフィックスの基本について説明しています。

ベクターグラフィックスは印刷で広く使用されています。 WebサイトにはSVGがあります。w3.orgの公式仕様によれば、SVGは2次元グラフィックスをXMLで記述するための言語です。 SVGには、形状、画像、テキストの3種類のオブジェクトが含まれています。 SVGは1999年以来存在しており、2011年8月16日からW3C勧告に含まれています。 SVGはWeb開発者によって大きく過小評価されていますが、いくつかの重要な利点があります。

すべての例のデモンストレーション / ソースのダウンロード / 公式ドキュメント

SVGの利点

スケーリング：ラスターグラフィックスとは異なり、SVGはスケーリング時に品質を失わないため、網膜下での開発に使用すると便利です。
HTTPリクエストの削減：SVGを使用すると、サーバーへの呼び出しの回数が減り、それに応じてサイトの読み込み速度が向上します。
スタイリングとスクリプト：CSSを使用して、背景、透明度、境界線など、サイトのグラフィック設定を変更できます。
アニメーションと編集：javascriptを使用して、SVGをアニメーション化し、テキストまたはグラフィックエディター（ InkScapeまたはAdobe Illustrator ）で編集することもできます。
小さいサイズ：SVGオブジェクトはビットマップよりもはるかに軽いです。

基本的なSVG形状

公式仕様によると、SVGを使用して単純なオブジェクトを描画できます。svgタグを使用して、長方形、円、線、楕円、ポリライン、またはポリゴンを作成できます。

開始点（x1およびx2）と終了点（y1およびy2）の2つのパラメーターのみを持つlineタグを使用した単純な行：

<svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

ストロークまたはストローク幅の属性またはスタイルを追加して、色と幅を設定することもできます。

 style="stroke-width:1; stroke:rgb(0,0,0);"

デモ

破線

構文は前の構文と似ています。 ポリラインタグが使用され、 points属性はポイントを指定します。

 <svg> <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

デモ

長方形

rectタグによって呼び出され、いくつかの属性を追加できます。

 <svg> <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

デモ

円周

この例では、 r属性を使用してcircleタグによって呼び出され、半径を設定し、 cxおよびcyは中心座標を設定します。

 <svg> <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

デモ

楕円

ellipseタグによって呼び出され、 circleと同様に機能しますが、 rxとryの 2つの半径を設定できます。

 <svg> <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

デモ

ポリゴン

多角形タグによって呼び出されると、 多角形の辺の数は異なります。

 <svg> <polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

デモ

エディターを使用する

例からわかるように、基本的なSVG図形の描画は非常に簡単ですが、オブジェクトははるかに複雑になる可能性があります。そのためには、Adobe IllustratorやInkscapeなどのベクターグラフィックエディターを使用する必要があります。SVG形式でファイルを保存し、テキストエディターで編集できます。埋め込み、iframe、およびオブジェクトを使用してSVGページを埋め込むことができます。

 <object data="images/ipod.svg" type="image/svg+xml"></object>

例は、 OpenClipArt.orgの iPodの画像です。

svg-ipod

ブラウザのサポート

SVGは、Internet Explorer 8以下を除くほとんどすべての最新ブラウザーでサポートされています。ただし、 Raphael.js javascriptライブラリを使用して修正することもできます。 ReadySetRaphael.comでSVGファイルをこのライブラリの形式に変換できます。

svg-raphael

まず、 Raphael.jsライブラリを目的のページに接続してから、SVGファイルをロードし、生成されたコードをコピーして関数に貼り付ける必要があります。

 window.onload=function() { //   Raphael }

ページで、 rsr属性を持つdivを挿入します。

 <div id="rsr"></div>

デモ

おわりに

これがSVGのすべての基本です。次の記事では、ベクターグラフィックスのより複雑な使用例について説明します。

ちょっとした有用な読み物：

SVGグラフィックスの紹介