اس‌وی‌جی: تفاوت میان نسخه‌ها

استانداردهای وب
HTML RDF CSS DOM XHTML XML SVG W3C DHTML

نگاره‌سازی برداری مقیاس‌پذیر (به انگلیسی: 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>

نمونه‌های مختلف

• نمونه‌های مختلف اس‌وی‌جی - موزیلا
• مثال‌های گوناگون به همراه خودآموزها و مقالات
• پرونده‌های اس‌وی‌جی ایجادشده به وسیلهٔ برنامه‌های کامپیوتری پرطرفدار
• نمونه‌های مختلف اس‌وی‌جی از ادوبی

خودآموزها

• اصول پایهٔ اس‌وی‌جی - SVG
• راهنماییهای کلّی برای نوشتن اس‌وی‌جی - SVG

جستارهای وابسته

• اینترنت
• اکس‌ام‌ال
• ریاضیات کاربردی
• گرافیک رایانه‌ای
• اینک‌اسکیپ

منابع

• جوهره‌های اساسی اس‌وی‌جی

پیوندهای بیرونی

• گرافیک برداری مقیاس‌پذیر از W3C
• ابزار اس‌وی‌جی
• اس‌وی‌جی در ادوبی (Adobe)
• مقدّمه‌ای بر ارائهٔ داده‌های علمی و پزشکی در وب با استفاده از اس‌وی‌جی