اس‌وی‌جی
| استانداردهای وب |
|---|
نگاره‌سازی برداری مقیاس‌پذیر (به انگلیسی: Scalable Vector Graphics) یا اس‌وی‌جی (به انگلیسی: SVG) زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دوبعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده است. به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی وب می‌گردد.
تجربهٔ اوّل
از آنجا که برخی از مرورگرهای وب (مثل IE) هنوز توانایی ارائهٔ (rendering) اس‌وی‌جی را دارا نشده‌اند، پیش از همه‌چیز، باید به تهیه و نصب یک نرم‌افزار ویژه موسوم به اس‌وی‌جی‌نگر (SVG viewer) اقدام نمائیم. پس از آن می‌توانیم هریک از مثال‌های ساده و ابتدائی زیر را در فایل‌های جداگانه‌ای که به svg. ختم می‌شوند ذخیره نموده و مورد آزمایش قرار دهیم.
مثال ۱: ترسیم دایره‌ای به مرکز (۲۰۰ ,۶۰۰) (با واحد پیکسل) و با شعاع ۳ سانتیمتر
<svg>
<circle cx="600" cy="200" r="3cm" />
</svg>
مثال ۲: ترسیم پاره خطی با نقطهٔ شروع (۵۰ ,۷۰)، و نقطهٔ انتهایی (۴۰۰ ,۲۰۰) (با واحد پیکسل)، به رنگ قرمز، و دارای ضخامت ۸ پیکسل
<svg>
<line x1="70" y1="50" x2="300" y2="400" style="stroke: red; stroke-width: 8" />
</svg>
مثال ۳: در ابتدا، یک مستطیل با رأس گوشهٔ بالایی سمت چپ (۶۰ ,۸۰)، دارای عرض ۴۰۰ و قاعدهٔ ۶۰ رسم می‌شود، و سپس، پهنای مستطیل در مدت زمانی ۱۵ ثانیه (زمان اسمی و نه واقعی) از ۴۰۰ به ۲۰ به صورت انیمیشن کاهش می‌یابد. (همهٔ واحدها پیکسل است)
<svg>
<rect x="80" y="60" width="400" height="60" stroke="black" fill="none">
<animate attributeName="width" attributeType="XML"
from="400" to="20"
begin="0s" dur="15s"
fill="freeze" />
</rect>
</svg>
مثال ۴: یک انیمیشن واقعی‌تر
<svg>
<rect x="210" y="210" width="20" height="20" style="stroke: black; fill: red;">
<animate attributeName="width" attributeType="XML"
begin="0s" dur="1s"
from="20" to="120"
fill="freeze" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="1.0s"
from="20" to="120"
fill="freeze" />
</rect>
<circle cx="270" cy="270" r="60"
style="fill: green; stroke: black;">
<animate attributeName="r" attributeType="XML"
begin="0.7s" dur="0.8s" from="20" to="50" fill="freeze" />
</circle>
</svg>
نمونه‌های مختلف
- نمونه‌های مختلف اس‌وی‌جی - موزیلا
- مثال‌های گوناگون به همراه خودآموزها و مقالات
- پرونده‌های اس‌وی‌جی ایجادشده به وسیلهٔ برنامه‌های کامپیوتری پرطرفدار
- نمونه‌های مختلف اس‌وی‌جی از ادوبی
خودآموزها
جستارهای وابسته
منابع
پیوندهای بیرونی
- گرافیک برداری مقیاس‌پذیر از W3C
- ابزار اس‌وی‌جی
- اس‌وی‌جی در ادوبی (Adobe)
- مقدّمه‌ای بر ارائهٔ داده‌های علمی و پزشکی در وب با استفاده از اس‌وی‌جی
 | این یک مقالهٔ خرد علوم رایانه است. می‌توانید با گسترش آن به ویکی‌پدیا کمک کنید. |