اسویجی: تفاوت میان نسخهها
جز ربات ردهٔ همسنگ (۲۶) +مرتب+تمیز (۱۰.۶ core): + رده:قالبهای آزاد |
بدون خلاصۀ ویرایش |
||
خط ۵۴: | خط ۵۴: | ||
</svg> |
</svg> |
||
</source> |
</source> |
||
== SVG در وب == |
|||
در حال حاظر وب سایت های بسیاری از جمله [[ویکیپدیا|ویکی پدیا]] از SVG و [[گرافیک شطرنجی|Raster]] برای تصاویر استفاده میکنند. |
|||
[[گوگل]] در تاریخ ۳۱ آگوست ۲۰۱۰ اعلام کرد که از این پس موتور جستجو گوگل میتواند تصاویر SVG را در قالب فایل یا به شکل جاسازی شده در [[اچتیامال|HTML]] ایندکس کند، همچنین در تاریخ ۸ دسامبر ۲۰۱۰ گوگل ایندکس شدن تصاویر SVG را در [[جستجوی تصاویر گوگل|جستجو تصاویر گوگل]] میسر ساخت. |
|||
=== پشتیبانی مرورگرها === |
|||
[[کانکرور|Konqueror]] در نسخه ۳٫۲ منتشر شده در فوریه ۲۰۰۴ اولین مرورگری بود که از SVG پیشتبانی کرد. در سال ۲۰۱۱ تمامی مرورگرهای تحت دسکتاپ با ویژگی های کم قادر به پشتیبانی از SVG بودند. برخی از نسخه های قبلی [[فایرفاکس]](نسخه های ۱٫۵ تا ۳٫۶) قادر به نمایش برخی از ویژگی های SVG بود البته موضوع تنها به کمک برچسب های <code><object></code> و <code><iframe></code> امکان پذیر بود. |
|||
در جدول زیر وضعیت پشتیبانی مرورگرها آمده است: |
|||
{| class="wikitable sortable" |
|||
|+وضعیت پشتیبانی مرورگر ها از SVG |
|||
!مرورگر |
|||
!نسخه های قابل پشتیبانی |
|||
!نسخه های غیر قابل پشتیبانی |
|||
|- |
|||
|[[اینترنت اکسپلورر|اینترنت اکسپلورر(IE)]] |
|||
|9,10,11 |
|||
|6,7,8 |
|||
|- |
|||
|[[مایکروسافت اج|ادج(Edge)]] |
|||
|12,13,14 |
|||
|− |
|||
|- |
|||
|[[فایرفاکس|فایرفاکس(Firefox)]] |
|||
|از نسخه (۳) به بعد |
|||
|− |
|||
|- |
|||
|[[گوگل کروم|گوگل کروم(Chrome)]] |
|||
|از نسخه (۴) به بعد |
|||
|− |
|||
|- |
|||
|[[سفاری (مرورگر)|سافاری(Safari)]] |
|||
|از نسخه (۳٫۲) به بعد |
|||
|− |
|||
|- |
|||
|[[اپرا (مرورگر وب)|اپرا(Opera)]] |
|||
|از نسخه (۱۰٫۱) به بعد |
|||
|− |
|||
|} |
|||
=== نمونههای مختلف === |
=== نمونههای مختلف === |
||
* [http://www.croczilla.com/svg/ نمونههای مختلف اسویجی] - موزیلا |
* [http://www.croczilla.com/svg/ نمونههای مختلف اسویجی] - موزیلا |
نسخهٔ ۷ ژوئیهٔ ۲۰۱۶، ساعت ۱۵:۱۸
استانداردهای وب |
---|
نگارهسازی برداری مقیاسپذیر (به انگلیسی: 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) | 12,13,14 | − |
فایرفاکس(Firefox) | از نسخه (۳) به بعد | − |
گوگل کروم(Chrome) | از نسخه (۴) به بعد | − |
سافاری(Safari) | از نسخه (۳٫۲) به بعد | − |
اپرا(Opera) | از نسخه (۱۰٫۱) به بعد | − |
نمونههای مختلف
- نمونههای مختلف اسویجی - موزیلا
- مثالهای گوناگون به همراه خودآموزها و مقالات
- پروندههای اسویجی ایجادشده به وسیلهٔ برنامههای کامپیوتری پرطرفدار
- نمونههای مختلف اسویجی از ادوبی