اس‌وی‌جی: تفاوت میان نسخه‌ها
جز ربات:افزودن الگو ناوباکس {{مرورگرهای وب}}+تمیز(۲.۷) |
جز فارسی‌سازی برچسب‌ها: ویرایش همراه ویرایش از برنامهٔ همراه ویرایش با برنامهٔ اندروید |
||
| (۴۷ نسخهٔ میانی ویرایش شده توسط ۲۸ کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
{{Infobox file format |
|||
| name = اس‌وی‌جی |
|||
| icon = SVG Logo.svg |
|||
| icon_size = 200px |
|||
| iconcaption = |
|||
| screenshot = |
|||
| caption = |
|||
| _noextcode = on |
|||
| extensions = <code>.svg</code>, <code>.svgz</code> |
|||
| _nomimecode = on |
|||
| mime = <code>image/svg+xml</code><ref>{{cite web |title=Media Type Registration for image/svg+xml |url=http://www.w3.org/TR/SVG/mimereg.html |publisher=[[World Wide Web Consortium|W3C]] |access-date=5 February 2014}}</ref><ref>{{cite document |title=XML Media Types |date=January 2001 |url=http://tools.ietf.org/html/rfc3023#section-8.19 |access-date=5 February 2014|last1=St. Laurent |first1=Simon |last2=Makoto |first2=Murata |last3=Kohn |first3=Dan}}</ref> |
|||
| type_code = <!-- {{hlist |"svg" |"svgz"}} --> |
|||
| uniform_type = <code>public.svg-image</code> |
|||
| conforms_to = <!--<code>public.image</code>{{سخ}}<code>public.xml</code>--> |
|||
| magic = |
|||
| developer = [[ائتلاف وب جهان‌گستر|W3C]] |
|||
| released = {{start date and age|df=yes|paren=yes|2001|09|04}} |
|||
| latest_release_version = 1.1 (ویرایش دوم) |
|||
| latest_release_date = {{start date and age|2011|08|16|df=yes}} |
|||
| genre = [[گرافیک برداری]] |
|||
| container_for = |
|||
| contained_by = |
|||
| extended_from = [[XML]] |
|||
| extended_to = |
|||
| standard = {{URL|https://www.w3.org/TR/SVG/|W3C SVG}} |
|||
| open = بله |
|||
| url = {{URL|https://www.w3.org/Graphics/SVG/}} |
|||
}} |
|||
'''نگاره‌سازی برداری مقیاس‌پذیر''' {{به انگلیسی|Scalable Vector Graphics}} یا '''اس‌وی‌جی''' {{به انگلیسی|SVG}} یک [[گرافیک برداری|قالب تصویر برداری]] مبتنی بر [[اکس‌ام‌ال]] برای گرافیک [[فضای دوبعدی|دوبعدی]] است که توانایی تعامل و پویانمایی را نیز دارد. مشخصات اس‌وی‌جی یک [[استاندارد باز]] است که توسط [[ائتلاف وب جهان‌گستر]] (W3C) از سال ۱۹۹۹ تولید شده‌است. |
|||
تصاویر اس‌وی‌جی در قالب [[گرافیک برداری]] تعریف می‌شوند و در فایل‌های متنی اکس‌ام‌ال ذخیره می‌شوند. از این رو تصاویر اس‌وی‌جی را بدون تأثیر روی کیفیتش می‌توان [[مقیاس قسمی|مقیاس‌دهی]] اندازه‌ای نمود، همچنین فایل‌های اس‌وی‌جی قابلیت [[الگوریتم جستجو|جستجو]]، [[:en:Subject_indexing|نمایه‌سازی]]، [[زبان اسکریپت‌نویسی|اسکریپت‌دهی ... ]] و [[فشرده‌سازی داده‌ها|فشرده‌سازی]] را دارند. فایل‌های متنی اکس‌ام‌ال را می‌توان توسط [[ویرایشگر متن|ویرایشگر متنی]] یا [[ویرایشگر گرافیک برداری]] ایجاد و ویرایش نمود، همچنین بیشتر [[مرورگر وب|مرورگرهای وب]] رایج کنونی آن‌ها را [[:en:Comparison_of_layout_engines_(Scalable_Vector_Graphics)|پردازه (رندر)]] می‌دهند. |
|||
== بررسی اجمالی == |
|||
اس‌وی‌جی از سال ۱۹۹۹ در [[ائتلاف وب جهان‌گستر]] (W3C) در حال گسترش بوده‌است، پس از آنکه شش پیشنهاده رقیب برای زبان گرافیک برداری در سال ۱۹۹۸ به ائتلاف ارسال شد.<ref name="secretOrigin"/> |
|||
کارگروه ابتدایی اس‌وی‌جی تصمیمی برای ایجاد هیچ‌کدام از موارد ارسالی تجاری را نداشت، بلکه می‌خواست یک زبان نشان‌گذاری جدید ایجاد کند که از همه الهام می‌گرفت ولی مبتنی بر هیچ‌کدام نبود.<ref name="secretOrigin">{{cite web |url=http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG|title=Secret Origin of SVG|date=21 December 2007|publisher=[[World Wide Web Consortium]]|access-date=1 January 2011}}</ref> |
|||
در اس‌وی‌جی سه نوع شیء گرافیکی وجود دارد: اشکال [[گرافیک برداری]] (مثل مسیر شامل خط مستقیم، و منحنی)، تصاویر [[بیت‌مپ]] و متن. اشیای گرافیکی را می‌توان به اشیای از قبل [[رندرینگ (گرافیک رایانه‌ای)|پرداز شده (رندر شده)]] گروه‌بندی، استایل‌دهی، تبدیل و ترکیب کرد. مجموعه ویژگی شامل [[:en:Geometric_transformation|تبدیل]] تودرتو، [[:en:Clipping_path|مسیر الصاقی]]، [[:en:Alpha_compositing|ماسک آلفا]]، [[:en:SVG_filter_effects|تاثیرات فیلتری]]، و اشیای قالبی است. نقاشی اس‌وی‌جی می‌تواند [[:en:Interactivity|تعاملی]] باشد، همچنین می‌تواند شامل [[پویانمایی]] باشد، که در عناصر اس‌وی‌جی اکس‌ام‌ال تعریف شده‌است، یا اینکه از طریق [[زبان اسکریپت‌نویسی|اسکریپت‌دهی]] که به [[مدل شیءگرای سند|مدل شیء سند]] (DOM) برای اس‌وی‌جی دسترسی دارد. اس‌وی‌جی از [[سی‌اس‌اس]] برای استایل‌دهی و از [[جاوااسکریپت]] برای اسکریپت‌دهی استفاده می‌کند. متن، که شامل [[بین‌المللی‌سازی و محلی‌سازی]] هم هست، در داخل متن ساده در SVG DOM پدیدار می‌شود، که این موضوع [[دسترس‌پذیری]] گرافیک اس‌وی‌جی را افزایش می‌دهد.<ref name="SVG1.1-2E">{{cite web|url=http://www.w3.org/TR/2011/REC-SVG11-20110816/|title=Scalable Vector Graphics (SVG) 1.1 (Second Edition)|publisher=W3C}}</ref> |
|||
در سال ۲۰۱۱ مشخصات SVG به نسخه ۱٫۱ روزآمدسازی شد. دو نوع «رخ‌نمای اس‌وی‌جی موبایل» وجود دارد، یکی اس‌وی‌جی تاینی {{انگلیسی|SVG Tiny}} و یکی اس‌وی‌جی بیسیک {{انگلیسی|SVG Basic}}، که برای [[دستگاه همراه|دستگاه‌های همراه]] ساخته شده‌اند که توانایی محاسباتی و نمایشی کمتری دارند.<ref>{{cite web|last1=Capin|first1=Tolga|title=Mobile SVG Profiles: SVG Tiny and SVG Basic|url=https://www.w3.org/TR/SVGMobile/|publisher=W3C|access-date=28 January 2017}}</ref> در ۱۵ سپتامبر ۲۰۱۶ مشخصات اس‌وی‌جی ۲ تبدیل به یک [[ائتلاف وب جهان‌گستر#مرحله پیشنهاد نامزد (Candidate recommendation) با کوته‌نوشت CR|پیشنهاده کاندید]] W3C شد. مشخصات اس‌وی‌جی ۲ ویژگی‌های جدید زیادی، علاوه بر موارد موجود در اس‌وی‌جی ۱,۱ و اس‌وی‌جی تاینی ۱,۲، را شامل شده‌است.<ref>{{cite web|title=Scalable Vector Graphics (SVG) 2|url=https://www.w3.org/TR/SVG2/|publisher=W3C|access-date=28 January 2017}}</ref> |
|||
=== چاپ === |
|||
اگرچه مشخصات اس‌وی‌جی در درجه اول روی [[:en:Image_file_format#Vector_formats|زبان نشان‌گذاری گرافیک برداری]] تمرکز دارد، طراحی آن شامل توانمندی‌های اساسی برای یک [[:en:Page_description_language|زبان توصیف صفحه]] مثل موارد موجود در ادوبی [[پی‌دی‌اف]] است. در این زبان قابلیت‌هایی برای گرافیک غنی وجود دارد، و برای اهداف استایل‌دهی با [[سی‌اس‌اس|CSS]] سازگاری دارد. اس‌وی‌جی شامل اطلاعات مورد نیاز برای قرار دادن هر [[گلیف]] و تصویر در یک محل انتخاب شده روی یک صفحه پرینتی است.<ref>{{cite web|url=http://www.svgopen.org/2002/papers/danilo_fujisawa__svg_as_page_description_language/index.html|title=SVG as a Page Description Language|last1=Alex|first1=Danilo|first2=Jun|last2=Fujisawa|year=2002|publisher=svgopen.org|access-date=24 February 2010}}</ref> |
|||
=== اسکریپت‌دهی و پویانمایی === |
|||
نقاشی اس‌وی‌جی می‌تواند پویا و تعاملی باشد. اصلاحات مبتنی بر زمان برای عناصر را می‌توان به زبان [[:en:Synchronized_Multimedia_Integration_Language|SMIL]] توصیف کرد، روش دیگر توصیف، برنامه‌نویسی در یک [[زبان اسکریپت‌نویسی|زبان اسکریپتی]] (مثل [[جاوااسکریپت]]) است. ائتلاف W3C صراحتاً زبان SMIL را به عنوان استاندارد پویانمایی در اس‌وی‌جی پیشنهاد کرده‌است.<ref>{{cite web|url=http://news.cnet.com/2100-1023-979976.html|title=W3C releases scripting standard, caveat|last=Paul|first=Festa|date=9 January 2003|publisher=[[CNET Networks|CNet]]|access-date=24 February 2010}}</ref> |
|||
یک مجموعه غنی از [[رویداد (رایانش)|رسیدگی به رویداد]] مثل "''onmouseover"'' و "''onclick"'' را می‌توان به هر شیء گرافیکی اس‌وی‌جی انتساب داد تا به آن‌ها وقعه و عمل اعمال کنیم. |
|||
=== فشرده‌سازی === |
|||
تصاویر اس‌وی‌جی، که نوعی اکس‌ام‌ال هستند، شامل تعداد زیادی قطعه متن تکراری هستند، از این رو برای الگوریتم‌های [[فشرده‌سازی داده‌ها|فشرده‌سازی داده بدون‌اتلاف]] بسیار مناسب اند. وقتی که یک تصویر اس‌وی‌جی توسط الگوریتم [[gzip]] فشرده شود، به آن یک تصویر SVGZ گفته می‌شود که از پسوند [[نام پرونده (رایانه)|نام فایل]] متناظر <bdi><code>.svgz</code></bdi> استفاده می‌کند. نمایشگرهای سازگار با SVG 1.1 تصاویر فشرده‌سازی شده را نمایش می‌دهند.<ref>See {{URL|http://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)."</ref> یک فایل SVGZ معمولاً ۲۰ تا ۵۰ درصد حجم کمتری از اندازه اصلی دارد.<ref>{{cite web|url=https://www.adobe.com/svg/illustrator/compressedsvg.html|title=Saving compressed SVG (SVGZ)|work=SVG Zone|publisher=[[Adobe Systems]]|date=14 July 2009|access-date=24 February 2010}}</ref> ائتلاف W3C چندین فایل SVGZ را برای آزمایش سازگاری ارائه کرده‌است.<ref>For example, {{URL|http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/conform-viewers-01-t.html}}</ref> |
|||
[[پرونده:Bitmap VS SVG.svg|بندانگشتی|250px]] |
[[پرونده:Bitmap VS SVG.svg|بندانگشتی|250px]] |
||
{{استانداردهای وب}} |
{{استانداردهای وب}} |
||
اس‌وی‌جی زبانی‌ست از نوع [[اکس‌ام‌ال]] که به منظور ایجاد، انتشار، و کار با [[گرافیک دوبعدی]] و نیز کاربردهای گرافیکی بر روی [[اینترنت]] ایجاد گردیده‌است. به عنوان استانداردی جدید از سوی [[کنسرسیوم وب جهان‌شمول]] (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و [[پویانمایی|انیمیشن]] بر [[روی وب]] می‌گردد. نرم‌افزارهای گوناگونی از جمله [[اینک‌اسکیپ]] برای ساختن تصاویر اس‌وی‌جی به کار می‌روند. |
|||
== تجربهٔ اوّل == |
== تجربهٔ اوّل == |
||
از آنجا که برخی از [[مرورگر |
در حال حاضر، اکثر مرورگرهای امروزی (همچنین [[اینترنت اکسپلورر ۱۰]] و ۱۱) از اس‌وی‌جی پشتیبانی می‌کنند. از آنجا که برخی از [[مرورگر]]های وب قدیمی (مثل [[اینترنت اکسپلورر|IE]] نسخه ۶ و ۷) توانایی ارائهٔ (rendering) اس‌وی‌جی را ندارند، پیش از همه‌چیز، باید به تهیه و نصب یک نرم‌افزار ویژه موسوم به [http://www.adobe.com/svg/viewer/install اس‌وی‌جی‌نگر] (SVG viewer) اقدام نمائیم. پس از آن می‌توانیم هریک از مثال‌های ساده و ابتدائی زیر را در فایل‌های جداگانه‌ای که به اس‌وی‌جی. ختم می‌شوند ذخیره نموده و مورد آزمایش قرار دهیم. اگر از مرورگرهای امروزی استفاده می‌کند ([[کروم]]، [[فایر فاکس]] و …) نیازی با اینکار نیست. |
||
مثال ۱: ترسیم دایره‌ای به مرکز (۲۰۰ |
مثال ۱: ترسیم دایره‌ای به مرکز (۲۰۰ ،۶۰۰) (با واحد پیکسل) و با شعاع ۳ سانتیمتر |
||
< |
<syntaxhighlight lang="xml"> |
||
<svg> |
<svg> |
||
<circle cx="600" cy="200" r="3cm"/> |
<circle cx="600" cy="200" r="3cm"/> |
||
</svg> |
</svg> |
||
</syntaxhighlight> |
|||
</source> |
|||
مثال ۲: ترسیم پاره خطی با نقطهٔ شروع (۵۰ |
مثال ۲: ترسیم پاره خطی با نقطهٔ شروع (۵۰ ،۷۰)، و نقطهٔ انتهایی (۴۰۰ ،۲۰۰) (با واحد پیکسل)، به رنگ قرمز، و دارای ضخامت ۸ پیکسل |
||
< |
<syntaxhighlight 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> |
||
</syntaxhighlight> |
|||
</source> |
|||
مثال ۳: در ابتدا، یک مستطیل با رأس گوشهٔ بالایی سمت چپ (۶۰ |
مثال ۳: در ابتدا، یک مستطیل با رأس گوشهٔ بالایی سمت چپ (۶۰ ،۸۰)، دارای عرض ۴۰۰ و قاعدهٔ ۶۰ رسم می‌شود، و سپس، پهنای مستطیل در مدت زمانی ۱۵ ثانیه (زمان اسمی و نه واقعی) از ۴۰۰ به ۲۰ به صورت انیمیشن کاهش می‌یابد. (همهٔ واحدها پیکسل است) |
||
< |
<syntaxhighlight lang="xml"> |
||
<svg> |
<svg> |
||
<rect x="80" y="60" width="400" height="60" stroke="black" fill="none"> |
<rect x="80" y="60" width="400" height="60" stroke="black" fill="none"> |
||
| خط ۲۵: | خط ۷۷: | ||
from="400" to="20" |
from="400" to="20" |
||
begin="0s" dur="15s" |
begin="0s" dur="15s" |
||
fill="freeze"/> |
fill="freeze"/> |
||
</rect> |
</rect> |
||
</svg> |
</svg> |
||
</syntaxhighlight> |
|||
</source> |
|||
مثال ۴: یک انیمیشن واقعی‌تر |
مثال ۴: یک انیمیشن واقعی‌تر |
||
< |
<syntaxhighlight lang="xml"> |
||
<svg> |
<svg> |
||
<rect x="210" y="210" width="20" height="20" style="stroke: black; fill: red;"> |
<rect x="210" y="210" width="20" height="20" style="stroke: black; fill: red;"> |
||
| خط ۳۷: | خط ۸۹: | ||
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" |
||
| خط ۴۷: | خط ۹۹: | ||
<circle cx="270" cy="270" r="60" |
<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> |
</circle> |
||
</svg> |
</svg> |
||
</syntaxhighlight> |
|||
</source> |
|||
=== نمونه‌های مختلف === |
|||
نمونه‌های مختلف |
|||
* [https://web.archive.org/web/20030210062036/http://www.croczilla.com/svg/ نمونه‌های مختلف اس‌وی‌جی] - موزیلا |
|||
* [http://www.carto.net/papers/svg مثال‌های گوناگون به همراه خودآموزها و مقالات] |
|||
* [https://web.archive.org/web/20060401005954/http://www.carto.net/papers/svg/ مثال‌های گوناگون به همراه خودآموزها و مقالات] |
|||
* [http://www.svgmaker.com/examples.htm پرونده‌های اس‌وی‌جی ایجادشده به وسیلهٔ برنامه‌های کامپیوتری پرطرفدار] |
|||
* [https://web.archive.org/web/20060518093310/http://www.svgmaker.com/examples.htm پرونده‌های اس‌وی‌جی ایجادشده به وسیلهٔ برنامه‌های کامپیوتری پرطرفدار] |
|||
* [http://www.adobe.com/svg/demos/main.html نمونه‌های مختلف اس‌وی‌جی از ادوبی] |
* [http://www.adobe.com/svg/demos/main.html نمونه‌های مختلف اس‌وی‌جی از ادوبی] |
||
=== خودآموزها === |
=== خودآموزها === |
||
* [http://www.svgbasics.com اصول پایهٔ اس‌وی‌جی] - |
* [http://www.svgbasics.com/ اصول پایهٔ اس‌وی‌جی] - اس‌وی‌جی |
||
* [http://jwatt.org/svg/authoring راهنماییهای کلّی برای نوشتن اس‌وی‌جی] - |
* [http://jwatt.org/svg/authoring راهنماییهای کلّی برای نوشتن اس‌وی‌جی] - اس‌وی‌جی |
||
== اس‌وی‌جی در وب == |
|||
در حال حاضر وب سایت‌های بسیاری از جمله [[ویکی‌پدیا]] از اس‌وی‌جی و [[گرافیک شطرنجی|Raster]] برای تصاویر استفاده می‌کنند. |
|||
[[گوگل]] در تاریخ ۳۱ اوت ۲۰۱۰ اعلام کرد که از این پس [[موتور جستجوی وب|موتور جستجو]] گوگل می‌تواند تصاویر اس‌وی‌جی را در قالب فایل یا به شکل جاسازی شده در [[اچ‌تی‌ام‌ال]] ایندکس کند، همچنین در تاریخ ۸ دسامبر ۲۰۱۰ گوگل ایندکس شدن تصاویر اس‌وی‌جی را در [[جستجوی تصاویر گوگل|جستجو تصاویر گوگل]] میسر ساخت. |
|||
=== پشتیبانی مرورگرها === |
|||
[[کانکرور|Konqueror]] در نسخه ۳٫۲ منتشر شده در فوریه ۲۰۰۴ اولین مرورگری بود که از اس‌وی‌جی پشتیبانی کرد. در سال ۲۰۱۱ تمامی مرورگرهای تحت دسکتاپ با ویژگی‌های کم قادر به پشتیبانی از اس‌وی‌جی بودند. برخی از نسخه‌های قبلی [[فایرفاکس]] (نسخه‌های ۱٫۵ تا ۳٫۶) قادر به نمایش برخی از ویژگی‌های اس‌وی‌جی بود البته موضوع تنها به کمک برچسب‌های <code><object></code> و <code><iframe></code> امکان‌پذیر بود. |
|||
در جدول زیر وضعیت پشتیبانی مرورگرها آمده‌است: |
|||
{| class="wikitable sortable" |
|||
|+وضعیت پشتیبانی مرورگرها از اس‌وی‌جی |
|||
!مرورگر |
|||
!نسخه‌های قابل پشتیبانی |
|||
!نسخه‌های غیرقابل پشتیبانی |
|||
|- |
|||
|[[اینترنت اکسپلورر|اینترنت اکسپلورر(IE)]] |
|||
|۹٬۱۰٬۱۱ |
|||
|۶٬۷٬۸ |
|||
|- |
|||
|[[مایکروسافت اج|اج(Edge)]] |
|||
|از نسخه (۱۲) به بعد |
|||
|− |
|||
|- |
|||
|[[فایرفاکس|فایرفاکس(Firefox)]] |
|||
|از نسخه (۳) به بعد |
|||
|− |
|||
|- |
|||
|[[گوگل کروم|گوگل کروم(Chrome)]] |
|||
|از نسخه (۴) به بعد |
|||
|− |
|||
|- |
|||
|[[سفاری (مرورگر)|سافاری(Safari)]] |
|||
|از نسخه (۳٫۲) به بعد |
|||
|− |
|||
|- |
|||
|[[اپرا (مرورگر وب)|اپرا(Opera)]] |
|||
|از نسخه (۱۰٫۱) به بعد |
|||
|− |
|||
|} |
|||
== جستارهای وابسته == |
== جستارهای وابسته == |
||
| خط ۷۲: | خط ۱۶۵: | ||
== منابع == |
== منابع == |
||
{{پانویس}} |
{{پانویس|۲}} |
||
* [http://www.oreilly.com/catalog/svgess/index.html جوهره‌های اساسی اس‌وی‌جی] |
* [http://www.oreilly.com/catalog/svgess/index.html جوهره‌های اساسی اس‌وی‌جی] |
||
| خط ۸۰: | خط ۱۷۳: | ||
* [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 مقدّمه‌ای بر ارائهٔ داده‌های علمی و پزشکی در وب با استفاده از اس‌وی‌جی] |
||
{{داده‌های کتابخانه‌ای}} |
|||
{{رایانه-خرد}} |
|||
{{قالب‌های پرونده‌های گرافیکی}} |
{{قالب‌های پرونده‌های گرافیکی}} |
||
{{مرورگرهای وب}} |
{{مرورگرهای وب}} |
||
{{رابط‌های وب}} |
|||
{{استانداردهای W3C}} |
|||
[[رده:اچ‌تی‌ام‌ال۵]] |
|||
[[رده:استانداردهای وب]] |
[[رده:استانداردهای وب]] |
||
[[رده:پسوند نام پرونده]] |
[[رده:پسوند نام پرونده]] |
||
| خط ۹۱: | خط ۱۸۷: | ||
[[رده:قالب‌های پرونده‌های گرافیکی]] |
[[رده:قالب‌های پرونده‌های گرافیکی]] |
||
[[رده:گرافیک برداری مقیاس‌پذیر]] |
[[رده:گرافیک برداری مقیاس‌پذیر]] |
||
[[رده:معرفی‌شده‌های مرتبط با رایانه در ۲۰۰۱ (میلادی)]] |
|||
[[رده:استانداردهای ائتلاف وب جهان‌گستر]] |
|||
{{Link GA|de}} |
|||
[[رده:قالب‌های آزاد]] |
|||
[[als:Scalable Vector Graphics]] |
|||
[[ar:رسوميات متجهية متغيرة]] |
|||
[[az:SVG]] |
|||
[[bat-smg:SVG]] |
|||
[[bg:SVG]] |
|||
[[bs:Scalable Vector Graphics]] |
|||
[[ca:Scalable Vector Graphics]] |
|||
[[cs:Scalable Vector Graphics]] |
|||
[[da:Scalable Vector Graphics]] |
|||
[[de:Scalable Vector Graphics]] |
|||
[[en:Scalable Vector Graphics]] |
|||
[[eo:Streka Vari-skala Grafiko]] |
|||
[[es:Scalable Vector Graphics]] |
|||
[[et:SVG]] |
|||
[[eu:SVG]] |
|||
[[fi:SVG]] |
|||
[[fr:Scalable Vector Graphics]] |
|||
[[gl:SVG]] |
|||
[[he:SVG]] |
|||
[[hr:SVG]] |
|||
[[hu:SVG]] |
|||
[[hy:Scalable Vector Graphics]] |
|||
[[id:Scalable Vector Graphics]] |
|||
[[is:SVG]] |
|||
[[it:Scalable Vector Graphics]] |
|||
[[ja:Scalable Vector Graphics]] |
|||
[[ka:მასშტაბირებადი ვექტორული გრაფიკა]] |
|||
[[ko:SVG]] |
|||
[[ksh:Skalėerbaa Vëkktoər-Jraffikk]] |
|||
[[lt:SVG]] |
|||
[[ms:SVG]] |
|||
[[na:SVG]] |
|||
[[nl:Scalable Vector Graphics]] |
|||
[[no:Scalable Vector Graphics]] |
|||
[[pl:Scalable Vector Graphics]] |
|||
[[pt:SVG]] |
|||
[[ro:Scalable Vector Graphics]] |
|||
[[ru:SVG]] |
|||
[[simple:Scalable Vector Graphics]] |
|||
[[sk:Scalable Vector Graphics]] |
|||
[[sl:Scalable Vector Graphics]] |
|||
[[sr:Скалабилна векторска графика]] |
|||
[[sv:Scalable Vector Graphics]] |
|||
[[th:SVG]] |
|||
[[tr:SVG]] |
|||
[[uk:Scalable Vector Graphics]] |
|||
[[ur:پیمانی سمتیہ تخطیط]] |
|||
[[vi:SVG]] |
|||
[[zh:可縮放向量圖形]] |
|||
[[zh-classical:可縮放矢量圖形]] |
|||
[[zh-min-nan:SVG]] |
|||
نسخهٔ کنونی تا ۹ اوت ۲۰۲۴، ساعت ۱۸:۰۶
 | |
| پسوند(های) نام پرونده | .svg, .svgz |
|---|---|
| نوع رسانهٔ اینترنتی | |
| شناسانه نوع یکسان | public.svg-image |
| توسعه‌دهنده | W3C |
| ارائهٔ اولیه | ۴ سپتامبر ۲۰۰۱ |
| آخرین ویرایش | 1.1 (ویرایش دوم) (۱۶ اوت ۲۰۱۱) |
| گونه | گرافیک برداری |
| نیاکان | XML |
| استاندارد بین‌المللی | W3C SVG |
| وبگاه | |
نگاره‌سازی برداری مقیاس‌پذیر (به انگلیسی: Scalable Vector Graphics) یا اس‌وی‌جی (به انگلیسی: SVG) یک قالب تصویر برداری مبتنی بر اکس‌ام‌ال برای گرافیک دوبعدی است که توانایی تعامل و پویانمایی را نیز دارد. مشخصات اس‌وی‌جی یک استاندارد باز است که توسط ائتلاف وب جهان‌گستر (W3C) از سال ۱۹۹۹ تولید شده‌است.
تصاویر اس‌وی‌جی در قالب گرافیک برداری تعریف می‌شوند و در فایل‌های متنی اکس‌ام‌ال ذخیره می‌شوند. از این رو تصاویر اس‌وی‌جی را بدون تأثیر روی کیفیتش می‌توان مقیاس‌دهی اندازه‌ای نمود، همچنین فایل‌های اس‌وی‌جی قابلیت جستجو، نمایه‌سازی، اسکریپت‌دهی ... و فشرده‌سازی را دارند. فایل‌های متنی اکس‌ام‌ال را می‌توان توسط ویرایشگر متنی یا ویرایشگر گرافیک برداری ایجاد و ویرایش نمود، همچنین بیشتر مرورگرهای وب رایج کنونی آن‌ها را پردازه (رندر) می‌دهند.
بررسی اجمالی
[ویرایش]اس‌وی‌جی از سال ۱۹۹۹ در ائتلاف وب جهان‌گستر (W3C) در حال گسترش بوده‌است، پس از آنکه شش پیشنهاده رقیب برای زبان گرافیک برداری در سال ۱۹۹۸ به ائتلاف ارسال شد.[۳]
کارگروه ابتدایی اس‌وی‌جی تصمیمی برای ایجاد هیچ‌کدام از موارد ارسالی تجاری را نداشت، بلکه می‌خواست یک زبان نشان‌گذاری جدید ایجاد کند که از همه الهام می‌گرفت ولی مبتنی بر هیچ‌کدام نبود.[۳]
در اس‌وی‌جی سه نوع شیء گرافیکی وجود دارد: اشکال گرافیک برداری (مثل مسیر شامل خط مستقیم، و منحنی)، تصاویر بیت‌مپ و متن. اشیای گرافیکی را می‌توان به اشیای از قبل پرداز شده (رندر شده) گروه‌بندی، استایل‌دهی، تبدیل و ترکیب کرد. مجموعه ویژگی شامل تبدیل تودرتو، مسیر الصاقی، ماسک آلفا، تاثیرات فیلتری، و اشیای قالبی است. نقاشی اس‌وی‌جی می‌تواند تعاملی باشد، همچنین می‌تواند شامل پویانمایی باشد، که در عناصر اس‌وی‌جی اکس‌ام‌ال تعریف شده‌است، یا اینکه از طریق اسکریپت‌دهی که به مدل شیء سند (DOM) برای اس‌وی‌جی دسترسی دارد. اس‌وی‌جی از سی‌اس‌اس برای استایل‌دهی و از جاوااسکریپت برای اسکریپت‌دهی استفاده می‌کند. متن، که شامل بین‌المللی‌سازی و محلی‌سازی هم هست، در داخل متن ساده در SVG DOM پدیدار می‌شود، که این موضوع دسترس‌پذیری گرافیک اس‌وی‌جی را افزایش می‌دهد.[۴]
در سال ۲۰۱۱ مشخصات SVG به نسخه ۱٫۱ روزآمدسازی شد. دو نوع «رخ‌نمای اس‌وی‌جی موبایل» وجود دارد، یکی اس‌وی‌جی تاینی (به انگلیسی: SVG Tiny) و یکی اس‌وی‌جی بیسیک (به انگلیسی: SVG Basic)، که برای دستگاه‌های همراه ساخته شده‌اند که توانایی محاسباتی و نمایشی کمتری دارند.[۵] در ۱۵ سپتامبر ۲۰۱۶ مشخصات اس‌وی‌جی ۲ تبدیل به یک پیشنهاده کاندید W3C شد. مشخصات اس‌وی‌جی ۲ ویژگی‌های جدید زیادی، علاوه بر موارد موجود در اس‌وی‌جی ۱,۱ و اس‌وی‌جی تاینی ۱,۲، را شامل شده‌است.[۶]
چاپ
[ویرایش]اگرچه مشخصات اس‌وی‌جی در درجه اول روی زبان نشان‌گذاری گرافیک برداری تمرکز دارد، طراحی آن شامل توانمندی‌های اساسی برای یک زبان توصیف صفحه مثل موارد موجود در ادوبی پی‌دی‌اف است. در این زبان قابلیت‌هایی برای گرافیک غنی وجود دارد، و برای اهداف استایل‌دهی با CSS سازگاری دارد. اس‌وی‌جی شامل اطلاعات مورد نیاز برای قرار دادن هر گلیف و تصویر در یک محل انتخاب شده روی یک صفحه پرینتی است.[۷]
اسکریپت‌دهی و پویانمایی
[ویرایش]نقاشی اس‌وی‌جی می‌تواند پویا و تعاملی باشد. اصلاحات مبتنی بر زمان برای عناصر را می‌توان به زبان SMIL توصیف کرد، روش دیگر توصیف، برنامه‌نویسی در یک زبان اسکریپتی (مثل جاوااسکریپت) است. ائتلاف W3C صراحتاً زبان SMIL را به عنوان استاندارد پویانمایی در اس‌وی‌جی پیشنهاد کرده‌است.[۸]
یک مجموعه غنی از رسیدگی به رویداد مثل "onmouseover" و "onclick" را می‌توان به هر شیء گرافیکی اس‌وی‌جی انتساب داد تا به آن‌ها وقعه و عمل اعمال کنیم.
فشرده‌سازی
[ویرایش]تصاویر اس‌وی‌جی، که نوعی اکس‌ام‌ال هستند، شامل تعداد زیادی قطعه متن تکراری هستند، از این رو برای الگوریتم‌های فشرده‌سازی داده بدون‌اتلاف بسیار مناسب اند. وقتی که یک تصویر اس‌وی‌جی توسط الگوریتم gzip فشرده شود، به آن یک تصویر SVGZ گفته می‌شود که از پسوند نام فایل متناظر .svgz استفاده می‌کند. نمایشگرهای سازگار با SVG 1.1 تصاویر فشرده‌سازی شده را نمایش می‌دهند.[۹] یک فایل SVGZ معمولاً ۲۰ تا ۵۰ درصد حجم کمتری از اندازه اصلی دارد.[۱۰] ائتلاف W3C چندین فایل SVGZ را برای آزمایش سازگاری ارائه کرده‌است.[۱۱]
| استانداردهای وب |
|---|
اس‌وی‌جی زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دوبعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده‌است. به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی وب می‌گردد. نرم‌افزارهای گوناگونی از جمله اینک‌اسکیپ برای ساختن تصاویر اس‌وی‌جی به کار می‌روند.
تجربهٔ اوّل
[ویرایش]در حال حاضر، اکثر مرورگرهای امروزی (همچنین اینترنت اکسپلورر ۱۰ و ۱۱) از اس‌وی‌جی پشتیبانی می‌کنند. از آنجا که برخی از مرورگرهای وب قدیمی (مثل IE نسخه ۶ و ۷) توانایی ارائهٔ (rendering) اس‌وی‌جی را ندارند، پیش از همه‌چیز، باید به تهیه و نصب یک نرم‌افزار ویژه موسوم به اس‌وی‌جی‌نگر (SVG viewer) اقدام نمائیم. پس از آن می‌توانیم هریک از مثال‌های ساده و ابتدائی زیر را در فایل‌های جداگانه‌ای که به اس‌وی‌جی. ختم می‌شوند ذخیره نموده و مورد آزمایش قرار دهیم. اگر از مرورگرهای امروزی استفاده می‌کند (کروم، فایر فاکس و …) نیازی با اینکار نیست.
مثال ۱: ترسیم دایره‌ای به مرکز (۲۰۰ ،۶۰۰) (با واحد پیکسل) و با شعاع ۳ سانتیمتر
<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>
نمونه‌های مختلف
- نمونه‌های مختلف اس‌وی‌جی - موزیلا
- مثال‌های گوناگون به همراه خودآموزها و مقالات
- پرونده‌های اس‌وی‌جی ایجادشده به وسیلهٔ برنامه‌های کامپیوتری پرطرفدار
- نمونه‌های مختلف اس‌وی‌جی از ادوبی
خودآموزها
[ویرایش]- اصول پایهٔ اس‌وی‌جی - اس‌وی‌جی
- راهنماییهای کلّی برای نوشتن اس‌وی‌جی - اس‌وی‌جی
اس‌وی‌جی در وب
[ویرایش]در حال حاضر وب سایت‌های بسیاری از جمله ویکی‌پدیا از اس‌وی‌جی و Raster برای تصاویر استفاده می‌کنند.
گوگل در تاریخ ۳۱ اوت ۲۰۱۰ اعلام کرد که از این پس موتور جستجو گوگل می‌تواند تصاویر اس‌وی‌جی را در قالب فایل یا به شکل جاسازی شده در اچ‌تی‌ام‌ال ایندکس کند، همچنین در تاریخ ۸ دسامبر ۲۰۱۰ گوگل ایندکس شدن تصاویر اس‌وی‌جی را در جستجو تصاویر گوگل میسر ساخت.
پشتیبانی مرورگرها
[ویرایش]Konqueror در نسخه ۳٫۲ منتشر شده در فوریه ۲۰۰۴ اولین مرورگری بود که از اس‌وی‌جی پشتیبانی کرد. در سال ۲۰۱۱ تمامی مرورگرهای تحت دسکتاپ با ویژگی‌های کم قادر به پشتیبانی از اس‌وی‌جی بودند. برخی از نسخه‌های قبلی فایرفاکس (نسخه‌های ۱٫۵ تا ۳٫۶) قادر به نمایش برخی از ویژگی‌های اس‌وی‌جی بود البته موضوع تنها به کمک برچسب‌های <object> و <iframe> امکان‌پذیر بود.
در جدول زیر وضعیت پشتیبانی مرورگرها آمده‌است:
| مرورگر | نسخه‌های قابل پشتیبانی | نسخه‌های غیرقابل پشتیبانی |
|---|---|---|
| اینترنت اکسپلورر(IE) | ۹٬۱۰٬۱۱ | ۶٬۷٬۸ |
| اج(Edge) | از نسخه (۱۲) به بعد | − |
| فایرفاکس(Firefox) | از نسخه (۳) به بعد | − |
| گوگل کروم(Chrome) | از نسخه (۴) به بعد | − |
| سافاری(Safari) | از نسخه (۳٫۲) به بعد | − |
| اپرا(Opera) | از نسخه (۱۰٫۱) به بعد | − |
جستارهای وابسته
[ویرایش]منابع
[ویرایش]- ↑ "Media Type Registration for image/svg+xml". W3C. Retrieved 5 February 2014.
- ↑ St. Laurent, Simon; Makoto, Murata; Kohn, Dan (January 2001). "XML Media Types". Retrieved 5 February 2014.
{{cite journal}}: Cite journal requires|journal=(help) - ↑ ۳٫۰ ۳٫۱ "Secret Origin of SVG". World Wide Web Consortium. 21 December 2007. Retrieved 1 January 2011.
- ↑ "Scalable Vector Graphics (SVG) 1.1 (Second Edition)". W3C.
- ↑ Capin, Tolga. "Mobile SVG Profiles: SVG Tiny and SVG Basic". W3C. Retrieved 28 January 2017.
- ↑ "Scalable Vector Graphics (SVG) 2". W3C. Retrieved 28 January 2017.
- ↑ Alex, Danilo; Fujisawa, Jun (2002). "SVG as a Page Description Language". svgopen.org. Retrieved 24 February 2010.
- ↑ Paul, Festa (9 January 2003). "W3C releases scripting standard, caveat". CNet. Retrieved 24 February 2010.
- ↑ 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)." - ↑ "Saving compressed SVG (SVGZ)". SVG Zone. Adobe Systems. 14 July 2009. Retrieved 24 February 2010.
- ↑ For example, dev
.w3 .org /SVG /profiles /1 .1F2 /test /harness /htmlObject /conform-viewers-01-t .html
پیوند به بیرون
[ویرایش]
