گرافیک برداری مقیاس‌پذیر

از ویکی‌پدیا، دانشنامهٔ آزاد.

استانداردهای وب

HTML
RDF
CSS
DOM
XHTML
XML
SVG
W3C
DHTML

گرافیک برداری مقیاس‌پذیر یا اس‌وی‌جی (SVG) scalable vector graphics)) زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دو بعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده‌ است. به عنوان استانداردی جدید از سوی W3C، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی وب می‌گردد.

فهرست مندرجات

[ویرایش] تجربهٔ اوّل

از آنجا که برخی از مرورگرهای وب (مثل IE) هنوز توانایی ارائهٔ (rendering) اس‌وی‌جی را دارا نشده‌اند، پیش از همه‌چیز، باید به تهیّه و نصب یک نرم‌افزار ویژه موسوم به اس‌وی‌جی‌نگر (SVG viewer) اقدام نمائیم. پس از آن می‌توانیم هریک از مثال‌های ساده و ابتدائی زیر را در فایل‌های جداگانه‌ای که به svg. ختم می‌شوند ذخیره نموده و مورد آزمایش قرار دهیم.

مثال 1: ترسیم دایره‌ای به مرکز (200 ,600) (با واحد پیکسل - pixel) و با شعاع 3 سانتیمتر

<svg>
<circle cx="600" cy="200" r="3cm" />
</svg>

مثال 2: ترسیم پاره خطّی با نقطهٔ شروع (50 ,70)، و نقطهٔ انتهایی (400 ,300) (با واحد پیکسل - pixel)، به رنگ قرمز، و دارای ضخامت 8 پیکسل

<svg>
<line x1="70" y1="50" x2="300" y2="400" style="stroke: red; stroke-width: 8" />
</svg>

مثال 3: در ابتدا، یک مستطیل با رأس گوشۀ بالایی سمت چپ (60 ,80)، دارای عرض 400 و قاعدۀ 60 رسم می‌شود، و سپس، پهنای مستطیل در مدّت زمانی 15 ثانیه (زمان اسمی و نه واقعی) از 400 به 20 به صورت انیمیشن کاهش می‌یابد (همۀ واحد‌ها پیکسل است)

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

مثال 4: یک انیمیشن واقعی‌تر

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


[ویرایش] نمونه‌های مختلف

[ویرایش] خودآموزها

[ویرایش] پیوندهای بیرونی

[ویرایش] منابع

[ویرایش] جستارهای وابسته

تصویر:Computer-stub.png این نوشتار دربارهٔ رایانه خُرد است. با گسترش آن به ویکی‌پدیا کمک کنید.