SVG 教程

HTML SVGチュートリアルの目的は、短い時間でSVGを始め、以降もチュートリアルを迅速なリファレンスとして使用できるようにすることです。ここでは、SVGの使用方法を迅速に把握するために多くのSVG例を提供し、範囲を広げます。

SVG紹介

SVGは拡張可能なベクトルグラフィックの略です。これは、XMLで形状を指定するグラフィック形式であり、SVGビューアによってXMLが表示されます。今ではほとんどのWebブラウザがSVGを表示できます。PNG、GIF、JPGと同様に。
Internet Explorer 8（およびそれ以前のバージョン）のユーザーは、ブラウザでSVGを表示するためにAdobe SVGビューアをインストールする必要がある場合があります。IE 9 +、ChromeおよびFirefoxが原生でSVGをサポートしています。
SVGは二次元ベクトルグラフィックに使用されます
SVGがあなたやあなたのプロジェクトに適しているかどうかがわからない場合は、SVGのサンプルページを迅速にブラウズし、SVGの機能を迅速に理解するために役立ちます。

SVGオンラインエディタ -　 オンラインでSVGを編集し、SVGをSVGソースコードに変換できます

SVG 実例全集　 - 基本的なSVGサンプル、SVGにすぐに慣れるのに役立ちます

SVGリファレンスマニュアル - SVGでよく使用される要素およびその属性の使用方法を収集します

SVGはベクトルグラフィックに使用されます

ベクトルグラフィック形式として、SVGはベクトルタイプの図形に最も有効です：

1. X、Y座標系における二次元図形

2. 円柱グラフ、パイチャートなど

3. Web、タブレット、モバイルアプリケーションおよびWebアプリケーションのための拡張可能なアイコンやロゴ

4. 建築およびデザイン図

5. など

「ベクトルグラフィック」形式として、表示される形状はベクトルまたはベクトルに似た構造として保存されます。言い換えれば、デジタルとしてです。ピクセル単位ではありません。

「可縮性のある」は、視聴者が品質を失わずにSVG画像を上下に拡大縮小できることを意味します。これは、図形がデジタルとして而不是ピクセルとして定義されているため可能です。SVG画像を拡大または縮小するのは、SVG形状を定義するデジタルを乗算または除算することを意味します。

ビットマップグラフィックをSVG画像に埋め込むことができますが、SVGは写真、映画などのビットマップグラフィックに対して理想的な選択肢ではありません。これはビットマップ画像上に形状やテキストを描画する便利な方法です。

SVGは画像の生成に非常に適しています/グラフィック/グラフ

SVGはXML形式（テキスト形式）であり、Servlet、JSP、ASP.NET、PHP、その他のWebアプリケーション技術から簡単に生成できます。これによりSVGはコンピュータ生成のグラフやチャートに非常に適しています。面白いことに、通常はWebアプリケーションでSVGに最適なチャートタイプ（グラフ、チャート、チャートなど）を正確に生成する必要があります。これによりSVGはグラフやチャートの生成にさらに適しています。

SVG スクリプトの作成

JavaScriptを使用して、ブラウザで生成されたSVG画像を変更することができます。これにより、SVGをよりダイナミックなデモや小規模なゲームに使用することができます。

このチュートリアルについて

このチュートリアルの目的は、SVGを短い時間で学び、使用できるようにすることです。また、今後もこのチュートリアルを迅速な参照として使用することができます。できるだけ多くのSVGをカバーしようと試みますが、SVG規範の全てを網羅することはありません。基礎知識を十分に理解した後は、より高度なテーマや特殊な状況についてSVG規範を参照することが容易になります。