حساب کاربری
​
زمان تقریبی مطالعه: 7 دقیقه
لینک کوتاه

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

نگاره‌سازی برداری مقیاس‌پذیر (به انگلیسی: Scalable Vector Graphics) یا اس‌وی‌جی (به انگلیسی: SVG) یک قالب تصویر برداری مبتنی بر XML برای گرافیک دوبعدی است که توانایی تعامل و پویانمایی را نیز دارد. مشخصات SVG یک استاندارد باز است که توسط ائتلاف وب جهان‌گستر (W3C) از سال ۱۹۹۹ تولید شده‌است.

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

تصاویر SVG در قالب گرافیک برداری تعریف می‌شوند و در فایل‌های متنی XML ذخیره می‌شوند. از این رو تصاویر SVG را بدون تأثیر روی کیفیتش می‌توان مقیاس‌دهی اندازه‌ای نمود، همچنین فایل‌های SVG قابلیت جستجو، نمایه‌سازی، اسکریت‌دهی و فشرده‌سازی را دارند. فایل‌های متنی XML را می‌توان توسط ویرایشگر متنی یا ویرایشگر گرافیک برداری ایجاد و ویرایش نمود، همچنین بیشتر مرورگرهای وب رایج کنونی آن‌ها را پردازه (رندر) می‌دهند.

فهرست

  • ۱ بررسی اجمالی
    • ۱.۱ چاپ
    • ۱.۲ اسکریپت‌دهی و پویانمایی
    • ۱.۳ فشرده‌سازی
  • ۲ تجربهٔ اوّل
    • ۲.۱ خودآموزها
  • ۳ SVG در وب
    • ۳.۱ پشتیبانی مرورگرها
  • ۴ جستارهای وابسته
  • ۵ منابع
  • ۶ پیوند به بیرون

بررسی اجمالی

SVG از سال ۱۹۹۹ در ائتلاف وب جهان‌گستر (W3C) در حال گسترش بوده‌است، پس از آنکه شش پیشنهاده رقیب برای زبان گرافیک برداری در سال ۱۹۹۸ به ائتلاف ارسال شد.

کارگروه ابتدایی SVG تصمیمی برای ایجاد هیچ‌کدام از موارد ارسالی تجاری را نداشت، بلکه می‌خواست یک زبان نشان‌گذاری جدید ایجاد کند که از همه الهام می‌گرفت ولی مبتنی بر هیچ‌کدام نبود.

در SVG سه نوع شیء گرافیکی وجود دارد: اشکال گرافیک برداری (مثل مسیر شامل خط مستقیم، و منحنی)، تصاویر بیت‌مپ و متن. اشیای گرافیکی را می‌توان به اشیای از قبل پرداز شده (رندر شده) گروه‌بندی، استایل‌دهی، تبدیل و ترکیب کرد. مجموعه ویژگی شامل تبدیل تودرتو، مسیر الصاقی، ماسک آلفا، تاثیرات فیلتری، و اشیای قالبی است. نقاشی SVG می‌تواند تعاملی باشد، همچنین می‌تواند شامل پویانمایی باشد، که در عناصر SVG XML تعریف شده‌است، یا اینکه از طریق اسکریپت‌دهی که به مدل شیء سند (DOM) برای SVG دسترسی دارد. SVG از CSS برای استایل‌دهی و از جاوااسکریپت برای اسکریپت‌دهی استفاده می‌کند. متن، که شامل بین‌المللی‌سازی و محلی‌سازی هم هست، در داخل متن ساده در SVG DOM پدیدار می‌شود، که این موضوع دسترس‌پذیری گرافیک SVG را افزایش می‌دهد.

در سال ۲۰۱۱ مشخصات SVG به نسخه ۱٫۱ روزآمدسازی شد. دو نوع «رخ‌نمای SVG موبایل» وجود دارد، یکی SVG Tiny و یکی SVG Basic، که برای دستگاه‌های همراه ساخته شده‌اند که توانایی محاسباتی و نمایشی کمتری دارند. در ۱۵ سپامبر ۲۰۱۶ مشخصات SVG 2 تبدیل به یک پیشنهاده کاندید W3C شد. مشخصات SVG 2 ویژگی‌های جدید زیادی، علاوه بر موارد موجود در SVG 1.1 و SVG Tiny 1.2، را شامل شده‌است.

چاپ

اگرچه مشخصات SVG در درجه اول روی زبان نشان‌گذاری گرافیک برداری تمرکز دارد، طراحی آن شامل توانمندی‌های اساسی برای یک زبان توصیف صفحه مثل موارد موجود در ادوبی PDF است. در این زبان قابلیت‌هایی برای گرافیک غنی وجود دارد، و برای اهداف استایل‌دهی با CSS سازگاری دارد. SVG شامل اطلاعات مورد نیاز برای قرار دادن هر گلیف و تصویر در یک محل انتخاب شده روی یک صفحه پرینتی است.

اسکریپت‌دهی و پویانمایی

نقاشی SVG می‌تواند پویا و تعاملی باشد. اصلاحات مبتنی بر زمان برای عناصر را می‌توان به زبان SMIL توصیف کرد، روش دیگر توصیف، برنامه‌نویسی در یک زبان اسکریپتی (مثل جاوااسکریپت) است. ائتلاف W3C صراحتاً زبان SMIL را به عنوان استاندارد پویانمایی در SVG پیشنهاد کرده‌است.

یک مجموعه غنی از رسیدگی به رویداد مثل "onmouseover" و "onclick" را می‌توان به هر شیء گرافیکی SVG انتساب داد تا به آن‌ها وقعه و عمل اعمال کنیم.

فشرده‌سازی

تصاویر SVG، که نوعی XML هستند، شامل تعداد زیادی قطعه متن تکراری هستند، از این رو برای الگوریتم‌های فشرده‌سازی داده بدون‌اتلاف بسیار مناسب اند. وقتیکه یک تصویر SVG توسط الگوریتم gzip فشرده شود، به آن یک تصویر SVGZ گفته می‌شود که از پسوند نام فایل متناظر .svgz استفاده می‌کند. نمایشگرهای سازگار با SVG 1.1 تصاویر فشرده‌سازی شده را نمایش می‌دهند. یک فایل SVGZ معمولاً ۲۰ تا ۵۰ درصد حجم کمتری از اندازه اصلی دارد. ائتلاف W3C چندین فایل SVGZ را برای آزمایش سازگاری ارائه کرده‌است.
استانداردهای وب

HTML
RDF
CSS
DOM
XHTML
XML
SVG
W3C
DHTML

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

SVG در وب

در حال حاضر وب سایت‌های بسیاری از جمله ویکی‌پدیا از SVG و Raster برای تصاویر استفاده می‌کنند.

گوگل در تاریخ ۳۱ اوت ۲۰۱۰ اعلام کرد که از این پس موتور جستجو گوگل می‌تواند تصاویر SVG را در قالب فایل یا به شکل جاسازی شده در HTML ایندکس کند، همچنین در تاریخ ۸ دسامبر ۲۰۱۰ گوگل ایندکس شدن تصاویر SVG را در جستجو تصاویر گوگل میسر ساخت.

پشتیبانی مرورگرها

Konqueror در نسخه ۳٫۲ منتشر شده در فوریه ۲۰۰۴ اولین مرورگری بود که از SVG پشتیبانی کرد. در سال ۲۰۱۱ تمامی مرورگرهای تحت دسکتاپ با ویژگی‌های کم قادر به پشتیبانی از SVG بودند. برخی از نسخه‌های قبلی فایرفاکس (نسخه‌های ۱٫۵ تا ۳٫۶) قادر به نمایش برخی از ویژگی‌های SVG بود البته موضوع تنها به کمک برچسب‌های <object> و <iframe> امکان‌پذیر بود.

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

وضعیت پشتیبانی مرورگرها از SVG
مرورگر نسخه‌های قابل پشتیبانی نسخه‌های غیرقابل پشتیبانی
اینترنت اکسپلورر(IE) ۹٬۱۰٬۱۱ ۶٬۷٬۸
اج(Edge) از نسخه (۱۲) به بعد −
فایرفاکس(Firefox) از نسخه (۳) به بعد −
گوگل کروم(Chrome) از نسخه (۴) به بعد −
سافاری(Safari) از نسخه (۳٫۲) به بعد −
اپرا(Opera) از نسخه (۱۰٫۱) به بعد −

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

  • اینترنت
  • اکس‌ام‌ال
  • ریاضیات کاربردی
  • گرافیک رایانه‌ای
  • اینک‌اسکیپ

منابع

  1. ↑ "Media Type Registration for image/svg+xml". W3C. Retrieved 5 February 2014.
  2. ↑ St. Laurent, Simon; Makoto, Murata; Kohn, Dan (January 2001). "XML Media Types". Retrieved 5 February 2014.
  3. ↑ "Secret Origin of SVG". World Wide Web Consortium. 21 December 2007. Retrieved 1 January 2011.
  4. ↑ "Scalable Vector Graphics (SVG) 1.1 (Second Edition)". W3C.
  5. ↑ Capin, Tolga. "Mobile SVG Profiles: SVG Tiny and SVG Basic". W3C. Retrieved 28 January 2017.
  6. ↑ "Scalable Vector Graphics (SVG) 2". W3C. Retrieved 28 January 2017.
  7. ↑ Alex, Danilo; Fujisawa, Jun (2002). "SVG as a Page Description Language". svgopen.org. Retrieved 24 February 2010.
  8. ↑ Paul, Festa (9 January 2003). "W3C releases scripting standard, caveat". CNet. Retrieved 24 February 2010.
  9. ↑ See www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers which states, "SVG implementations must correctly support gzip-encoded [RFC1952] and deflate-encoded [RFC1951] data streams, for any content type (including SVG, script files, images)."
  10. ↑ "Saving compressed SVG (SVGZ)". SVG Zone. Adobe Systems. 14 July 2009. Retrieved 24 February 2010.
  11. ↑ For example, dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/conform-viewers-01-t.html
  • جوهره‌های اساسی اس‌وی‌جی

پیوند به بیرون

  • گرافیک برداری مقیاس‌پذیر از W3C
  • ابزار اس‌وی‌جی
  • اس‌وی‌جی در ادوبی (Adobe)
  • مقدّمه‌ای بر ارائهٔ داده‌های علمی و پزشکی در وب با استفاده از اس‌وی‌جی
آخرین نظرات
کلیه حقوق این تارنما متعلق به فرا دانشنامه ویکی بین است.