SVG زبانی برنامه نویسی برای گرافیک دو بعدی است که مخفف Scalable Vector Graphics می باشد. برای ایجاد گرافیک های برداری در صفحات وب بکار می رود که با مانور روی آن مثل زوم، کیفیت خود را از دست نمی دهد.

SVG از عناصری خاصی برای ساختاربندی استفاده می کند که در این مقاله قصد داریم برخی از اصلی ترین آنها را توضیح دهیم.

این عنصر برای گروه بندی است که از حرف g که حرف اول group است نام گذاری شده است.
در تمامی نرم افزارهای طراحی گرافیک دو بعدی؛ عناصر مرتبط به هم را یک گروه می کنند تا مثلا هنگام جابجایی یا تغیر اندازی یا… همه با هم تغییر کنند.
تگ g مانند همه تگ های دیگر می تواند class یا id داشته باشد و استایل بگیرد؛ این cssها به عناصر داخل گروه هم اعمال می شود.

در مثال ما بالا؛ ما اشکال و المانهای مربوط به پرنده را در یک گروه قرار داده‌ایم با id با اسم brid:

<svg width='1144.12px' height='400px' viewBox='0 0 572.06 200'>
  <style>
    svg{background-color:white;}
    #wing{fill:#81CCAA;}
    #body{fill:#B8E4C2;}
    #pupil{fill:#1F2600;}
    #beak{fill:#F69C0D;}
    .eye-ball{fill:#F6FDC4;}
  </style>
  <g id='bird'>
    <g id='body'>
        <path d='M48.42,78.11c0-17.45,14.14-31.58,31.59-31.58s31.59,14.14,31.59,31.58c0,17.44-14.14,31.59-31.59,31.59 S48.42,95.56,48.42,78.11'/>
        <path d='M109.19,69.88c0,0-8.5-27.33-42.51-18.53c-34.02,8.81-20.65,91.11,45.25,84.73 c40.39-3.65,48.59-24.6,48.59-24.6S124.68,106.02,109.19,69.88'/>
        <path id='wing' d='M105.78,75.09c4.56,0,8.84,1.13,12.62,3.11c0,0,0.01-0.01,0.01-0.01l36.23,12.38c0,0-13.78,30.81-41.96,38.09 c-1.51,0.39-2.82,0.59-3.99,0.62c-0.96,0.1-1.92,0.16-2.9,0.16c-15.01,0-27.17-12.17-27.17-27.17 C78.61,87.26,90.78,75.09,105.78,75.09'/>
    </g>
    <g id='head'>
        <path id='beak' d='M50.43,68.52c0,0-8.81,2.58-10.93,4.86l9.12,9.87C48.61,83.24,48.76,74.28,50.43,68.52'/> 
        <path class='eye-ball' d='M60.53,71.68c0-6.33,5.13-11.46,11.46-11.46c6.33,0,11.46,5.13,11.46,11.46c0,6.33-5.13,11.46-11.46,11.46 C65.66,83.14,60.53,78.01,60.53,71.68'/>
        <path id='pupil' d='M64.45,71.68c0-4.16,3.38-7.53,7.54-7.53c4.16,0,7.53,3.37,7.53,7.53c0,4.16-3.37,7.53-7.53,7.53 C67.82,79.22,64.45,75.84,64.45,71.68'/>
        <path class='eye-ball' d='M72.39,74.39c0-2.73,2.22-4.95,4.95-4.95c2.73,0,4.95,2.21,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95 C74.6,79.34,72.39,77.13,72.39,74.39'/>
    </g>
  </g></svg>

حال مثلا اگر بخواهیم رنگ داخل تمام المان ها عوض کنیم کافیست به بدنه g استایل css رنگ بدهیم؛ یا مثلا اگر بخواهیم اندازه همه را دو برابر کنیم فقط با دادن استایل به بدنه؛ به تمام المانها اعمال می‌شود.

#bird {
  transform: scale(2);
}

یکی از مزایای گروه بندی این است که می توان برای هر گروه یکو نوشت که ربات های صفحه خوان وباطلاعاتی را در مورد آن دریافت کنند.

<g id='bird'>
  <title>پرنده</title>
  <desc>تصویری از یک پرنده کاکل به سر بی کاکل</desc>  
</g>

به کمک این عنصر می توانیم از المانی چندبار استفاده کنیم بدون نیاز به تکرار یا مجدد نوشتن آن عنصر.
این المان ویژگی هایی کاربردی height و width و xlink:href را دارد. مثلا در مثال زیر می خواهیم از پرنده یک کپی در (x,y) دیگری داشته باشیم.

<use x='100' y='100' xlink:href='#bird' />

لازم به تذکر است که ویژگی های x و y همان transform است که مقادیر آن و جابه جایی المانها از همان مکانی که هستند انجام می شود. یعنی مثال بالا با مثال زیر برابر است:

<use xlink:href='#bird' transform='translate(100, 100)' />

نکته دیگری که حائز اهمیت است این است که تمامی استایلهایی که به عنصر اصلی داده میشود در همه عناصر اعمال می شود. به عبارتی با استفاده از useبا دادن یک refrence از یک شکل دیگر؛ شکل کپی همان ایجاد می کنیم.
فرض کنید شکل کپی را از طریق transform بچرخانیم و شکل اصلی را باز به کمک transform دو برابر کنیم؛ نتیجه اینکه شکل کپی شده علاوه بر چرخیدن دوبرابر هم شده است.

تگ use این امکان را به ما می دهد که از یک عنصر چندجا استفاده کنیم اما اگر بخواهیم عنصری را ایجاد کنیم ولی نمایش ندهیم تا بعدا از آن استفاده کنیم نمی توان از use استفاده کرد و باید از تگ defs کمک گرفت.
با تگ هر چیزی را می توان تعریف کرد و تمپلیت استفاده ساخت. به مثال زیر توجه کنید:

<svg>
  <defs>
    <linearGradient id='gradient'>
      <stop offset='0%' style='stop-color: deepPink'>stop>
      <stop offset='100%' style='stop-color: #009966'>stop>
    linearGradient>
  defs>
  <rect stroke='#eee' stroke-width='5' fill='url(#gradient)'>rect>
svg>

سه تفاوت اساسی با تگ دارد:
• در use؛ مکان شکل نسبت به مکان اولیه مشخص می شود ولی در defs نسبت به
• در use استایل شکل اصلی را نمی توان در شکل کپی شده override کرد ولی در defs چنین مشکلی وجود ندارد البته در صورتی که در defs تعریف نشود.
• در defs می توان ایجاد شده را نمایش نداد ولی در use شکل اصلی حتما باید در صفحه موجود باشد.

این تگ هم مانند تگ g برای دسته بندی عناصر است ولی دو تفاوت اساسی دارد:
• مثل defs رسم نمی شود و زمانیکه use از آن استفاده کند ایجاد می شود.
• Symbol می تواند ویژگی های viewbox و preserveAspectRadio بگیرد

تگ symbol با توجه به ویژگی هایی که دارد بهترین گزینه برای تعریف عناصری است که می خواهیم چندبار استفاده کنیم.