هدف ازین مقاله معرفی و توضیح اشکال اصلی و پایه ای در SVG است که شامل: مستطیل؛ خط راست؛ دایره؛ بیضی؛ چندضلعی؛ چندخطی است. تمامی تصاویر ساخته شده در SVG با ترکیبی از این اشکال به وجود می آیند.

مستطیل

با استفاده از تگ می توان یک مستطیل ایجاد کرد.

<svg>
  <rect width='200' height='100' fill='#BBC42A' />
</svg>

همان طور که در مثال بالا مشاهده می کنید ویژگی های width و height برای شکل مستطیل وجود دارد و همچنین با استفاده ویژگی fill داخل شکل را رنگ آمیزی کنید. از ویژگی x و y می توان برای مکاندهی در راستای محور های افقی عمودی در سیستم مختصاتی svg استفاده کرد.

<svg>
  <rect x='20' y='20' width='200' height='100' />
</svg>

دو ویژگی rx و ry که مخفف radiusx و radiusy است؛ گوشه های مستطیل را گرد میکند. Rx وظیفه گرد گردن سمت افقی و ry وظیفه گرد کردن سمت عمودی را به عهده دارند.

<svg>
  <rect width='200' height='100' rx='5' ry='10' />
</svg>

دایره

با استفاده از تگ می توان دایره رسم کرد.

<svg>
  <circle cx='75' cy='75' r='75' fill='#ED6E46' />
</svg>

دایره را با استفاده از یک نقطه مرکزی و یک شعاع شکل می گیرد که مکان نقطه مرکزی با دو ویژگی cx و cy مشخص می شدو r تعیین کننده شعاع دایره است.

بیضی

بیضی را با استفاده از تگ ایجاد می شودکه دارای ویژگی های cx و cy برای مکان نقطه مرکزی و rx و ry برای اندازه شعاع افقی و عمودی است.

<svg>
  <ellipse cx='100' cy='100' rx='100' ry='50' fill='#7AA20D' />
</svg>

پاره خط

به کمک تگ و تعیین نقطه اول و آخر می توان پاره خط رسم کرد. مکان نقاط با استفاده از ویژگی های x1 و y1 و x2 و y2 تعیین می شود.

<svg>
  <line x1='5' y1='5' x2='100' y2='100' stroke='#765373' stroke-width='8'/>
</svg>

همان طور که در مثال بالا مشاهده می کنید؛ ویژگی fill تعریفی برای پاره خط ندارد و با استفاده از strokeمی توان رنگ مشخص کرد. و تعیین اندازه خط با ویژگی stroke-width امکان پذیر است.

چندخطی

برای ایجاد چندخطی تگ در نظر گرفته شده است که با استفاده از points می توان نقاط را به صورت لیست مشخص کرد. نقاط توسط یک space از هم جدا شده اند و به صورت مختصات های x,y داده می شوند.
از ویژگی fill می توان برای تعیین رنگ سطح داخلی شکل استفاده کرد.

<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>

چندضلعی

چندضلعی با استفاده از تگ ایجاد می شود که در نهایت یک شکل بسته و پیوسته تشکیل می دهد.

<svg>
  <polygon points='50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30' fill='#ED6E46' />
</svg>

تعیین نقاط یک مثل چندخطی صورت می گیرد.

با این تگ شکل های زیادی می توان ایجاد کرد که در زیر نمونه هایی آورده ایم.

<svg>
  <polygon points='50 15, 100 100, 0 100' fill='#e43' />
</svg> 

<svg>
  <polygon points='26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 ' fill='hsl(56,80%,50%)'/>
</svg>

<svg>
  <polygon points='50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5' fill='hsl(106,80%,50%)'/>
</svg>

<svg>
  <polygon points='30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5' fill='hsl(156,80%,50%)'/>
</svg>

<svg>
  <polygon points='34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4'  fill='hsl(216,80%,50%)'/>
</svg>