گرافیک برداری مقیاس‌پذیر
از ویکی‌پدیا، دانشنامهٔ آزاد.
| استانداردهای وب |
|---|
گرافیک برداری مقیاس‌پذیر (به انگلیسی: Scalable Vector Graphics) یا اس‌وی‌جی (به انگلیسی: SVG) زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دو بعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده است. به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول (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>
[ویرایش] نمونه‌های مختلف
- نمونه‌های مختلف اس‌وی‌جی - Mozilla
- مثال‌های گوناگون به همراه خودآموزها و مقالات
- پرونده‌های اس‌وی‌جی ایجادشده به وسیلهٔ برنامه‌های کامپیوتری پرطرفدار
- نمونه‌های مختلف اس‌وی‌جی از ادوبی - Adobe SVG Demos
[ویرایش] خودآموزها
[ویرایش] پیوندهای بیرونی
- گرافیک برداری مقیاس‌پذیر از W3C
- ابزار اس‌وی‌جی
- اس‌وی‌جی در ادوبی (Adobe)
- مقدّمه‌ای بر ارائۀ داده‌های علمی و پزشکی در وب با استفاده از اس‌وی‌جی
