جعبهابزار
زبانهای دیگر
- Alemannisch
- العربية
- Žemaitėška
- Bosanski
- Català
- Česky
- Dansk
- Deutsch
- English
- Esperanto
- Español
- Euskara
- Suomi
- Français
- Galego
- עברית
- Hrvatski
- Magyar
- Bahasa Indonesia
- Italiano
- 日本語
- ქართული
- 한국어
- Lietuvių
- Bahasa Melayu
- Nederlands
- Norsk (bokmål)
- Polski
- Português
- Русский
- Simple English
- Slovenčina
- Slovenščina
- Српски / Srpski
- Svenska
- ไทย
- Türkçe
- Українська
- Tiếng Việt
- 中文
- 文言
- Bân-lâm-gú
گرافیک برداری مقیاسپذیر
| استانداردهای وب |
|---|
گرافیک برداری مقیاسپذیر (به انگلیسی: 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="#FFFFFF" 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: #FFFFFF; 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: #FFFFFF;">
<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)
- مقدّمهای بر ارائۀ دادههای علمی و پزشکی در وب با استفاده از اسویجی
