スケーラブルベクトルグラフィックス：基本を描く

この記事では、SVG画像内の基本的な概念、構造、および描画要素を調査します。 SVGSを初めて使用する場合は、進行する前にスケーラブルベクトルグラフィックスの入門リソースを確認することを検討してください。

重要な概念：

SVGは、任意のサイズにスケーラブルなXMLドキュメントです。それらの座標系はピクセルに結び付けられていません。

属性は、画像の座標空間を定義します
• 基本的なSVG要素には、線、ポリリン、ポリゴン、長方形、円、楕円、テキストが含まれ、それぞれが外観と位置を制御する属性を備えています。 viewBox強力な要素は、コマンドと座標を使用して複雑な形状を作成し、他の基本的な形状を効果的に複製します。
• テキストエディターまたはInkscapeやAdobe Illustratorなどの専用ツールを使用してSVGを編集します。 Smil、CSS、またはJavaScriptを使用してそれらをアニメーション化します。 最適化には、不要なメタデータの削除、座標の簡素化、および合理化されたパスが含まれます。
• pathsvg座標系：
数学グラフとは異なり、SVG座標系は、左（0,0）で発生し、X軸は右に伸び、y軸がダウンします。 ポイント（100、200）は、100ユニット右であり、200単位は原点から200単位です。

属性（ "minx miny幅の高さ"）は、座標領域を定義します。

が容器に合わせてスケーリングする方法を制御し、必要に応じてアスペクト比を維持します。 および

本質的な画像サイズを設定します。

viewBox preserveAspectRatioviewBox widthheightsvg xmlドキュメント構造：

古いSVGはXML宣言とDoctypesを使用していますが、最新のSVGは通常、必要な

属性（

）を持つ単一のルート要素を使用します。 一般的な属性には、、

、

、および<svg></svg>が含まれます。 オプションのxmlnsおよびxmlns="https://www.w3.org/2000/svg"要素は、メタデータを提供します。viewBox preserveAspectRatiowidth例：height<title></title> <desc></desc>

要素のグループ化（）：

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
  <title>My First SVG</title>
  <desc>A simple SVG example.</desc>
  <!-- ... SVG elements here ... -->
</svg>

基本的な形状とパス：<g></g> 記事の記事は、

、<g></g>、

、

、、、および

要素の使用を詳しく説明し、それらの属性とレンダリングを示しています。 複雑なパスの作成に関するより詳細な情報を参照して、

要素の機能が強調表示されます。 ラインキャップと結合スタイルは、視覚的な例で説明されています。

最適化とさらなるリソース：

この記事は、SVG最適化手法を強調することで締めくくり、要素と属性の参照、パス作成ガイド、模倣ツールなど、さらなるリソースへのリンクを提供します。 よくある質問セクションでは、SVGの作成、編集、アニメーション、最適化、および応答性に関する一般的なクエリに対応しています。

以上がスケーラブルベクトルグラフィックス：基本を描くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。