اسویجی: تفاوت میان نسخهها
جز ربات:حذف تصویر ناموجود پرونده:SVG.svg |
جز ربات:افزودن الگو ناوباکس {{مرورگرهای وب}}+تمیز(۲.۷) |
||
خط ۱: | خط ۱: | ||
[[پرونده:Bitmap VS SVG.svg| |
[[پرونده:Bitmap VS SVG.svg|بندانگشتی|250px]] |
||
{{استانداردهای وب}} |
{{استانداردهای وب}} |
||
'''نگارهسازی برداری مقیاسپذیر''' {{به انگلیسی|Scalable Vector Graphics}} یا '''اسویجی''' {{به انگلیسی|SVG}} زبانیست از نوع [[اکسامال]] که به منظور ایجاد، انتشار، و کار با [[گرافیک دوبعدی]] و نیز کاربردهای گرافیکی بر روی [[اینترنت]] ایجاد گردیده است. به عنوان استانداردی جدید از سوی [[کنسرسیوم وب جهانشمول]] (W3C)، اسویجی باعث کوچکتر گردیدن، سریعتر بودن، و تعاملیتر (interactive) شدن اسناد دربردارندهٔ گرافیک و [[پویانمایی|انیمیشن]] بر روی وب میگردد. نرمافزارهای گوناگونی از جمله [[اینکاسکیپ]] برای ساختن تصاویر اسویجی به کار میروند. |
'''نگارهسازی برداری مقیاسپذیر''' {{به انگلیسی|Scalable Vector Graphics}} یا '''اسویجی''' {{به انگلیسی|SVG}} زبانیست از نوع [[اکسامال]] که به منظور ایجاد، انتشار، و کار با [[گرافیک دوبعدی]] و نیز کاربردهای گرافیکی بر روی [[اینترنت]] ایجاد گردیده است. به عنوان استانداردی جدید از سوی [[کنسرسیوم وب جهانشمول]] (W3C)، اسویجی باعث کوچکتر گردیدن، سریعتر بودن، و تعاملیتر (interactive) شدن اسناد دربردارندهٔ گرافیک و [[پویانمایی|انیمیشن]] بر روی وب میگردد. نرمافزارهای گوناگونی از جمله [[اینکاسکیپ]] برای ساختن تصاویر اسویجی به کار میروند. |
||
خط ۹: | خط ۹: | ||
<source lang="xml"> |
<source lang="xml"> |
||
<svg> |
<svg> |
||
<circle cx="600" cy="200" r="3cm" |
<circle cx="600" cy="200" r="3cm"/> |
||
</svg> |
</svg> |
||
</source> |
</source> |
||
خط ۱۵: | خط ۱۵: | ||
<source lang="xml"> |
<source lang="xml"> |
||
<svg> |
<svg> |
||
<line x1="70" y1="50" x2="300" y2="400" style="stroke: red; stroke-width: 8" |
<line x1="70" y1="50" x2="300" y2="400" style="stroke: red; stroke-width: 8"/> |
||
</svg> |
</svg> |
||
</source> |
</source> |
||
خط ۲۵: | خط ۲۵: | ||
from="400" to="20" |
from="400" to="20" |
||
begin="0s" dur="15s" |
begin="0s" dur="15s" |
||
fill="freeze" |
fill="freeze"/> |
||
</rect> |
</rect> |
||
</svg> |
</svg> |
||
خط ۳۷: | خط ۳۷: | ||
begin="0s" dur="1s" |
begin="0s" dur="1s" |
||
from="20" to="120" |
from="20" to="120" |
||
fill="freeze" |
fill="freeze"/> |
||
<animate attributeName="height" attributeType="XML" |
<animate attributeName="height" attributeType="XML" |
||
begin="0s" dur="1.0s" |
begin="0s" dur="1.0s" |
||
from="20" to="120" |
from="20" to="120" |
||
fill="freeze" |
fill="freeze"/> |
||
</rect> |
</rect> |
||
خط ۵۰: | خط ۵۰: | ||
<animate attributeName="r" attributeType="XML" |
<animate attributeName="r" attributeType="XML" |
||
begin="0.7s" dur="0.8s" from="20" to="50" fill="freeze" |
begin="0.7s" dur="0.8s" from="20" to="50" fill="freeze"/> |
||
</circle> |
</circle> |
||
</svg> |
</svg> |
||
خط ۷۲: | خط ۷۲: | ||
== منابع == |
== منابع == |
||
{{پانویس}} |
|||
* [http://www.oreilly.com/catalog/svgess/index.html جوهرههای اساسی اسویجی] |
* [http://www.oreilly.com/catalog/svgess/index.html جوهرههای اساسی اسویجی] |
||
== پیوند به بیرون == |
|||
== پیوندهای بیرونی == |
|||
{{ |
{{ویکیانبار-رده|SVG}} |
||
* [http://www.w3.org/Graphics/SVG گرافیک برداری مقیاسپذیر از W3C] |
* [http://www.w3.org/Graphics/SVG گرافیک برداری مقیاسپذیر از W3C] |
||
* [http://xml.apache.org/batik ابزار اسویجی] |
* [http://xml.apache.org/batik ابزار اسویجی] |
||
خط ۸۳: | خط ۸۴: | ||
{{رایانه-خرد}} |
{{رایانه-خرد}} |
||
{{قالبهای پروندههای گرافیکی}} |
{{قالبهای پروندههای گرافیکی}} |
||
{{مرورگرهای وب}} |
|||
[[رده:استانداردهای وب]] |
[[رده:استانداردهای وب]] |
||
[[رده:پسوند نام پرونده]] |
[[رده:پسوند نام پرونده]] |
نسخهٔ ۱ سپتامبر ۲۰۱۲، ساعت ۲۲:۳۸
استانداردهای وب |
---|
نگارهسازی برداری مقیاسپذیر (به انگلیسی: 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>
نمونههای مختلف
- نمونههای مختلف اسویجی - موزیلا
- مثالهای گوناگون به همراه خودآموزها و مقالات
- پروندههای اسویجی ایجادشده به وسیلهٔ برنامههای کامپیوتری پرطرفدار
- نمونههای مختلف اسویجی از ادوبی