اسویجی: تفاوت میان نسخهها
FreshmanBot (بحث | مشارکتها) جز اصلاح فاصله مجازی + اصلاح نویسه با استفاده از AWB |
جز ربات ردهٔ همسنگ (۳۰.۱) +املا+مرتب+تمیز (۱۴.۹ core): + رده:معرفیشدههای مرتبط با رایانه در ۲۰۰۱ (میلادی)+رده:اچتیامال۵ |
||
خط ۴: | خط ۴: | ||
== تجربهٔ اوّل == |
== تجربهٔ اوّل == |
||
از آنجا که برخی از [[مرورگر]]های وب (مثل [[اینترنت اکسپلورر|IE]]) هنوز توانایی ارائهٔ (rendering) اسویجی را دارا نشدهاند، پیش از همهچیز، باید به تهیه و نصب یک نرمافزار ویژه موسوم به [http://www.adobe.com/svg/viewer/install اسویجینگر] (SVG viewer) اقدام نمائیم. پس از آن میتوانیم هریک از مثالهای ساده و ابتدائی زیر را در فایلهای جداگانهای که به svg. ختم میشوند ذخیره نموده و مورد آزمایش قرار دهیم. |
از آنجا که برخی از [[مرورگر]]های وب (مثل [[اینترنت اکسپلورر|IE]]) هنوز توانایی ارائهٔ (rendering) اسویجی را دارا نشدهاند، پیش از همهچیز، باید به تهیه و نصب یک نرمافزار ویژه موسوم به [http://www.adobe.com/svg/viewer/install اسویجینگر] (SVG viewer) اقدام نمائیم. پس از آن میتوانیم هریک از مثالهای ساده و ابتدائی زیر را در فایلهای جداگانهای که به svg. ختم میشوند ذخیره نموده و مورد آزمایش قرار دهیم. |
||
مثال ۱: ترسیم دایرهای به مرکز (۲۰۰ ،۶۰۰) (با واحد پیکسل) و با شعاع ۳ سانتیمتر |
مثال ۱: ترسیم دایرهای به مرکز (۲۰۰ ،۶۰۰) (با واحد پیکسل) و با شعاع ۳ سانتیمتر |
||
<source lang="xml"> |
<source lang="xml"> |
||
<svg> |
<svg> |
||
خط ۱۲: | خط ۱۲: | ||
</svg> |
</svg> |
||
</source> |
</source> |
||
مثال ۲: ترسیم پاره خطی با نقطهٔ شروع (۵۰ ،۷۰)، و نقطهٔ انتهایی (۴۰۰ ،۲۰۰) (با واحد پیکسل)، به رنگ قرمز، و دارای ضخامت ۸ پیکسل |
مثال ۲: ترسیم پاره خطی با نقطهٔ شروع (۵۰ ،۷۰)، و نقطهٔ انتهایی (۴۰۰ ،۲۰۰) (با واحد پیکسل)، به رنگ قرمز، و دارای ضخامت ۸ پیکسل |
||
<source lang="xml"> |
<source lang="xml"> |
||
<svg> |
<svg> |
||
خط ۱۸: | خط ۱۸: | ||
</svg> |
</svg> |
||
</source> |
</source> |
||
مثال ۳: در ابتدا، یک مستطیل با رأس گوشهٔ بالایی سمت چپ (۶۰ ،۸۰)، دارای عرض ۴۰۰ و قاعدهٔ ۶۰ رسم میشود، و سپس، پهنای مستطیل در مدت زمانی ۱۵ ثانیه (زمان اسمی و نه واقعی) از ۴۰۰ به ۲۰ به صورت انیمیشن کاهش مییابد. (همهٔ واحدها پیکسل است) |
مثال ۳: در ابتدا، یک مستطیل با رأس گوشهٔ بالایی سمت چپ (۶۰ ،۸۰)، دارای عرض ۴۰۰ و قاعدهٔ ۶۰ رسم میشود، و سپس، پهنای مستطیل در مدت زمانی ۱۵ ثانیه (زمان اسمی و نه واقعی) از ۴۰۰ به ۲۰ به صورت انیمیشن کاهش مییابد. (همهٔ واحدها پیکسل است) |
||
<source lang="xml"> |
<source lang="xml"> |
||
<svg> |
<svg> |
||
خط ۲۸: | خط ۲۸: | ||
</rect> |
</rect> |
||
</svg> |
</svg> |
||
</source> |
</source> |
||
مثال ۴: یک انیمیشن واقعیتر |
مثال ۴: یک انیمیشن واقعیتر |
||
<source lang="xml"> |
<source lang="xml"> |
||
خط ۶۲: | خط ۶۲: | ||
=== خودآموزها === |
=== خودآموزها === |
||
* [http://www.svgbasics.com اصول پایهٔ اسویجی] - SVG |
* [http://www.svgbasics.com اصول پایهٔ اسویجی] - SVG |
||
* [http://jwatt.org/svg/authoring راهنماییهای کلّی برای نوشتن اسویجی] - SVG |
* [http://jwatt.org/svg/authoring راهنماییهای کلّی برای نوشتن اسویجی] - SVG |
||
== SVG در وب == |
== SVG در وب == |
||
در حال حاضر وب سایتهای بسیاری از جمله [[ویکیپدیا| |
در حال حاضر وب سایتهای بسیاری از جمله [[ویکیپدیا|ویکیپدیا]] از SVG و [[گرافیک شطرنجی|Raster]] برای تصاویر استفاده میکنند. |
||
[[گوگل]] در تاریخ ۳۱ آگوست ۲۰۱۰ اعلام کرد که از این پس موتور جستجو گوگل میتواند تصاویر SVG را در قالب فایل یا به شکل جاسازی شده در [[اچتیامال|HTML]] ایندکس کند، همچنین در تاریخ ۸ دسامبر ۲۰۱۰ گوگل ایندکس شدن تصاویر SVG را در [[جستجوی تصاویر گوگل|جستجو تصاویر گوگل]] میسر ساخت. |
[[گوگل]] در تاریخ ۳۱ آگوست ۲۰۱۰ اعلام کرد که از این پس موتور جستجو گوگل میتواند تصاویر SVG را در قالب فایل یا به شکل جاسازی شده در [[اچتیامال|HTML]] ایندکس کند، همچنین در تاریخ ۸ دسامبر ۲۰۱۰ گوگل ایندکس شدن تصاویر SVG را در [[جستجوی تصاویر گوگل|جستجو تصاویر گوگل]] میسر ساخت. |
||
خط ۸۲: | خط ۸۲: | ||
|[[اینترنت اکسپلورر|اینترنت اکسپلورر(IE)]] |
|[[اینترنت اکسپلورر|اینترنت اکسپلورر(IE)]] |
||
|9,10,11 |
|9,10,11 |
||
|6, |
|6,7،8 |
||
|- |
|- |
||
|[[مایکروسافت اج|اج(Edge)]] |
|[[مایکروسافت اج|اج(Edge)]] |
||
خط ۱۲۱: | خط ۱۲۱: | ||
* [http://xml.apache.org/batik ابزار اسویجی] |
* [http://xml.apache.org/batik ابزار اسویجی] |
||
* [http://www.adobe.com/svg اسویجی در ادوبی (Adobe)] |
* [http://www.adobe.com/svg اسویجی در ادوبی (Adobe)] |
||
* [http://www.medicalcomputing.net/svg_tutorial.html مقدّمهای بر ارائهٔ دادههای علمی و پزشکی در وب با استفاده از اسویجی] |
* [http://www.medicalcomputing.net/svg_tutorial.html مقدّمهای بر ارائهٔ دادههای علمی و پزشکی در وب با استفاده از اسویجی] |
||
{{دادههای کتابخانهای}} |
{{دادههای کتابخانهای}} |
||
{{قالبهای پروندههای گرافیکی}} |
{{قالبهای پروندههای گرافیکی}} |
||
خط ۱۲۸: | خط ۱۲۸: | ||
{{رایانه-خرد}} |
{{رایانه-خرد}} |
||
[[رده:اچتیامال۵]] |
|||
[[رده:استانداردهای وب]] |
[[رده:استانداردهای وب]] |
||
[[رده:پسوند نام پرونده]] |
[[رده:پسوند نام پرونده]] |
||
خط ۱۳۵: | خط ۱۳۶: | ||
[[رده:قالبهای پروندههای گرافیکی]] |
[[رده:قالبهای پروندههای گرافیکی]] |
||
[[رده:گرافیک برداری مقیاسپذیر]] |
[[رده:گرافیک برداری مقیاسپذیر]] |
||
[[رده:معرفیشدههای مرتبط با رایانه در ۲۰۰۱ (میلادی)]] |
نسخهٔ ۱۰ مهٔ ۲۰۱۸، ساعت ۰۶:۳۶
استانداردهای وب |
---|
نگارهسازی برداری مقیاسپذیر (به انگلیسی: 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 و Raster برای تصاویر استفاده میکنند.
گوگل در تاریخ ۳۱ آگوست ۲۰۱۰ اعلام کرد که از این پس موتور جستجو گوگل میتواند تصاویر SVG را در قالب فایل یا به شکل جاسازی شده در HTML ایندکس کند، همچنین در تاریخ ۸ دسامبر ۲۰۱۰ گوگل ایندکس شدن تصاویر SVG را در جستجو تصاویر گوگل میسر ساخت.
پشتیبانی مرورگرها
Konqueror در نسخه ۳٫۲ منتشر شده در فوریه ۲۰۰۴ اولین مرورگری بود که از SVG پشتیبانی کرد. در سال ۲۰۱۱ تمامی مرورگرهای تحت دسکتاپ با ویژگیهای کم قادر به پشتیبانی از SVG بودند. برخی از نسخههای قبلی فایرفاکس(نسخههای ۱٫۵ تا ۳٫۶) قادر به نمایش برخی از ویژگیهای SVG بود البته موضوع تنها به کمک برچسبهای <object>
و <iframe>
امکان پذیر بود.
در جدول زیر وضعیت پشتیبانی مرورگرها آمدهاست:
مرورگر | نسخههای قابل پشتیبانی | نسخههای غیر قابل پشتیبانی |
---|---|---|
اینترنت اکسپلورر(IE) | 9,10,11 | 6,7،8 |
اج(Edge) | از نسخه (۱۲) به بعد | − |
فایرفاکس(Firefox) | از نسخه (۳) به بعد | − |
گوگل کروم(Chrome) | از نسخه (۴) به بعد | − |
سافاری(Safari) | از نسخه (۳٫۲) به بعد | − |
اپرا(Opera) | از نسخه (۱۰٫۱) به بعد | − |