نگاره‌سازی برداری مقیاس‌پذیر

نگاره‌سازی برداری مقیاس‌پذیر (به انگلیسی: Scalable Vector Graphics) یا اس‌وی‌جی (به انگلیسی: SVG) زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دوبعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده است. به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی وب می‌گردد. نرم‌افزارهای گوناگونی از جمله اینک‌اسکیپ برای ساختن تصاویر اس‌وی‌جی به کار می‌روند.

نگاره‌سازی برداری مقیاس‌پذیر
پسوند(های) نام پرونده
.svg, .svgz
نوع رسانهٔ اینترنتی
image/svg+xml
شناسانه نوع یکسان
public.svg-image
توسعه‌دهندهکنسرسیوم وب جهان‌گستر
ارائهٔ اولیه۴ سپتامبر ۲۰۰۱ (۲۰۰۱-۰۹-04)
آخرین ویرایش
1.1 (Second Edition)
(۱۶ اوت ۲۰۱۱ (۲۰۱۱-۰۸-16))
گونهگرافیک برداری
نیاکاناکس‌ام‌ال
استاندارد بین‌المللیW3C SVG
قالب آزاد؟بله
وبگاه
استانداردهای وب

HTML
RDF
CSS
DOM
XHTML
XML
SVG
W3C
DHTML

تجربهٔ اوّل

در حال حاضر ، اکثر مرورگر های امروزی ( همچنین اینترنت اکسپلورر 10 و 11 ) از اس‌وی‌جی پشتیبانی میکنند . از آنجا که برخی از مرورگرهای وب قدیمی (مثل IE نسخه 6 و 7 ) توانایی ارائهٔ (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> امکان‌پذیر بود.

در جدول زیر وضعیت پشتیبانی مرورگرها آمده‌است:

وضعیت پشتیبانی مرورگرها از SVG
مرورگر نسخه‌های قابل پشتیبانی نسخه‌های غیرقابل پشتیبانی
اینترنت اکسپلورر(IE) 9,10,11 6,7،8
اج(Edge) از نسخه (۱۲) به بعد −
فایرفاکس(Firefox) از نسخه (۳) به بعد −
گوگل کروم(Chrome) از نسخه (۴) به بعد −
سافاری(Safari) از نسخه (۳٫۲) به بعد −
اپرا(Opera) از نسخه (۱۰٫۱) به بعد −

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

منابع

    پیوند به بیرون
    در ویکی‌انبار پرونده‌هایی دربارهٔ نگاره‌سازی برداری مقیاس‌پذیر موجود است.
    This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.