標準的な言語と定義の後には、<svg>エレメントが現れます。<svg>エレメントは、SVGドキュメント—を定義しますが、特に、ユーザの座標体系やさまざまなCSS単位指定要素の定義が可能です。直線<svg xml:space="preserve" width="3in" height="2in" viewBox="0 0 300 200">は、次のような指定を行います。1)テキスト・エレメント内のホワイトスペースの保存。2)SVGドキュメント"本質的な"幅と高さ（これは印刷出力のサイズを指定する際にとりわけ重要です）。3)グラフィックのエレメントのための"バウンディング・ボックス"。次の例では、SVGファイルは長方形のスペースでxy座標の左上を0,0、表示エリアの幅と高さを300と200に指定するよう画像の境界を指定しています。

<svg xml:space="preserve" width="3in"
 height="2in" viewBox="0 0 300 200">

"viewBox"属性は、閉じたエレメントのための二次元空間を定義します。バウンディング・ボックス領域を小さくすることによって、画像は"トリミング" あるいは "プリ・ズーム"されます。上の例の数字を100 75 100 50に変更したとすると、画像は次のように変わるはずです。

<svg xml:space="preserve" width="3in"
 height="2in" viewBox="100 75 100 50">

ズームアウト（Windowsの場合は、右マウスボタンをクリック、Macの場合は、コントロールキーを押しながらマウスボタンを押し下げます）しても、画像全体が見えることに注目してください。ただし、"original,"を選択した場合、表示はオリジナルの "ズームイン"した表示になります。

さて、グラフィック・エレメントが入る画像領域を指定したところで、今度はファイル内のエレメントの構成を見てみましょう。Illustratorがレイヤーとなっている場合、レイヤーはグループとして見えます。それぞれのグループは、Illustratorで指定されたレイヤー名を<g id= " ">の中に入れて名付けられます。その後に、グループを区切るコメント・タグが続きます。Illustrator画像内のすべてのエレメントが描画された順に並べられます。たとえば、画像の一番下にあるエレメントはSVGファイルでは一番最初に定義されます。

主要なエレメントを別レイヤーとしてグループ化したIllustratorファイルの構造は、単に組織だったツールとして使う場合だけでなく、アニメーションやインタラクティブなものをプログラミングする材料として参照する場合にも、重要になってきます。たとえば、ユーザがテキストは変えずに四角形の形を変えようとした場合、四角形をレイヤーから分離すれば、SVGファイル内の特定のエレメントだけを変形やインタラクティブ化の対象にすれいばいいのです。