گرافیک برداری

[Loyal]

در این بخش به توضیح گرافیک برداری و تفاوت هایی که با گرافیک پیکسلی داره و کاربردهای آنها می پردازیم.


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


تجربهٔ اوّل

از آنجا که برخی از مرورگرهای وب (مثل IE) هنوز توانایی ارائهٔ (rendering) اس‌وی‌جی را دارا نشده‌اند، پیش از همه‌چیز، باید به تهیّه و نصب یک نرم‌افزار ویژه موسوم به اس‌وی‌جی‌نگر (SVG viewer) اقدام نمائیم. پس از آن می‌توانیم هریک از مثال‌های ساده و ابتدائی زیر را در فایل‌های جداگانه‌ای که به svg. ختم می‌شوند ذخیره نموده و مورد آزمایش قرار دهیم.

مثال 1: ترسیم دایره‌ای به مرکز (200 ,600) (با واحد پیکسل - pixel) و با شعاع 3 سانتیمتر

کد php:

<svg>
<circle cx="600" cy="200" r="3cm" />
</svg> 


مثال 2: ترسیم پاره خطّی با نقطهٔ شروع (50 ,70)، و نقطهٔ انتهایی (400 ,300) (با واحد پیکسل - pixel)، به رنگ قرمز، و دارای ضخامت 8 پیکسل

کد php:

<svg>
<line x1="70" y1="50" x2="300" y2="400" style="stroke: red; stroke-width: 8" />
</svg> 


مثال 3: در ابتدا، یک مستطیل با رأس گوشۀ بالایی سمت چپ (60 ,80)، دارای عرض 400 و قاعدۀ 60 رسم می‌شود، و سپس، پهنای مستطیل در مدّت زمانی 15 ثانیه (زمان اسمی و نه واقعی) از 400 به 20 به صورت انیمیشن کاهش می‌یابد (همۀ واحد‌ها پیکسل است)

کد php:

<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> 


مثال 4: یک انیمیشن واقعی‌تر

کد php:

<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> 


[Loyal]

گرافیک برداری :


گرافیک برداری با استفاده از عناصر هندسی مانند نقطه، خط، منحنی و همچنین اشکال و چند ضلعی ها که برای نمایش عکس های در گرافیک رایانه ای است از معادلات ریاضی استفاده می کند.

گرافیک برداری مکمل گرافیک تصویری است که برای نمایش تصاویر از آرایه ای از پیکسل ها استفاده می شود.


نمایش کامپیوتری از نقاط کوچکی به نام پیکسل تشکیل شده است. عکس ها از این نقاط ساخته می شوند. هر چه این نقاط ریزتر و نزدیک تر به هم باشند کیفیت نمایش تصویر بالا می رود ولی در عوض فضا بیشتری برای ذخیره سازی این فایل نیاز است. اگر تصویر بزرگ شود به طوری که رزولوشن دید چشم قادر باشد، می توان عکس را به صورت دانه دانه و پیکس های جدا از هم مشاهده نمود. گرافیک برداری بر مبنای فرمول های ریاضی خطوط و اشکال و رنگ های سازنده تصویر را ذخیره می کند برنامه های گرافیک برداری با بهره گیری از روابط ریاضی، هنگام نمایش تصویر، بهترین حالت ممکن را برای نمایش فراهم می کند. این کار از طریق دریافت دیتاهای ریاضی رزولوشون انجام می شود. قوانین ریاضی پیش بینی می کنند که برای نمایش بهترین کیفیت تصویر باید نقاط یا همان پیکس ها در کجا قرار بگیرند.


از انجا که این روابط می توانند تصاویر با اسکیلینگ و بزرگ نمایی همراه با حفظ کیفیت را دهند باید بدانیم که یان ها فقط از طریق دیتا های رزولوشن که در فایل ذخیره شده است میسر گردیده است و این به حجم فایل ما بستگی دارد. چاپ بر روی کاغذ تصویر تیز تر و خروجی با رزولوشن بالا تر نسبت به نمایش در صفحه نمایش دارد ولی می توان از همان فایل برداری تصویر برای نداشتن این تفاوت استفاده کرد.

نرم افزار های ترسیم به منظور ساخت و ویرایش تصاویر برداری استفاده می شوند، ما می توانیم تصویر نمایش داده شده مان را ویرایش کنیم که بعد از ذخیره به صورت یک سری روابط ریاضی در فایل ما قرار می گیرد. عملگر های ریاضی نرم افزار را می توا ن به منظور باز کردن، کشیدن و یا فشردن قسمتی و یا کل تصویر به کار برد فایل نهایی را می توا ن به صورت bitmap ذخیره نمود و یا هر فایل برداری با تبدیل به bitmap جهت استفاده در سایر وسایل نمود.

[babyy]

سلام

میشه نرم افزارهایی که میگید مثل همین SVG viewerرو بزارید یا لینکی واسه دانلود بدید که اونایی هم که ندارن جا نمونن ؟؟
ممنون

[Loyal]

باشه. برنامشو پیدا می کنم و برای دانلود میذارم. برنامه های دیگه ای هم که به درد کارهای برداری بخورن رو بعداً معرفی می کنم.

[man4toman]

SVG رو با خود مرورگر هم میتونید باز کنید

[babyy]

سلام

قبلا امتحان کردم ، شبیه اسناد xml نشون میده ، چیزی ندیدیم ترسیم کنه

[Loyal]

احتمالاً SVGViwer باید نصب شده باشه تا داخل مرورگر نشون بده.

SVGViwer رو می تونین از لینک زیر دانلود کنین:

دانلود با حجم 2.27 مگابایت

بعد از دانلود و نصب نیاز دارید که مرورگر خودتون رو یک بار کاملاً ببینید و دوباره باز کنید تا تغییرات بر روی اون اعمال بشه.

برای تست کردن اینکه آیا SVGViewr درست کار میکنه یا نه می تونین از لینک زیر استفاده کنین:

تست

[man4toman]

شما از چه مرورگر و چه ورژنی استفاده میکنی؟؟
فایرفاکس 3.ط کاملا نشون میده. همچنین IE 7 به بالا.
اگه ورژن شما قدیمی هست همین الان آپدیت کنید که خیلی از تکنولوژی عقب افتادید!

[babyy]

سلام

ممنوم بابت تذکرتون راجع به تکنولوژی
فایر فاکس 3.0 دارم ،، اگه تنظیمات خاصی نباید انجام داد ، تو مرورگر من شبیه اسناد xml نشون میده ؛ خبری از ترسیم نیست !

[Loyal]

برای دیدن فایل هایی با پسوند svg می تونی از برنامه Adobe Illustrator هم استفاده کنی.
Corel Draw هم برنامه دیگه ایه که میتونه این کار رو برات انجام بده.
حتی میتونی کار خودتو توی برنامه Illustrator طراحی کنی و بعد با پسوند svg اون رو ذخیره کنی.
چندتا از کارهایی رو که انجام می دی رو بذار تا ببینیم چیکار کردی.

اگر نمیتونی فایل هاتو داخل مرورگرت ببینی این کاری که میگم رو انجام بده حتماً میشه.
اول مرورگرتو باز کن. بعد فایلی که ساختی رو به داخل مرورگرت درگ کن. من با مرورگرهای فایرفاکس و اپرا و اینترنت اکسپلورر امتحان کردم شد.

یک چیزی هم همین الآن به ذهنم رسید.
ببین برنامه نویسی که در بالا گفته شد فقط قطعه برنامه است.
اگر با HTML آشنایی داشته باشی باید اینو بدونی که وقتی متنی رو می نویسی برای اینکه مرورگر بدونه قالب متنت چیه یا از چه نوعی هست،‌باید اون رو داخل تگ قرار بدی.
اگر دقت کرده باشی برنامه های نوشته شده در بالا هم داخل یک تگ قرار داده شدن.
برای اینکه تگ های مورد نیاز که معرفی کننده svg به مرورگر هستن به فایلت اضافه بشه و بتونی با دابل کلیک روی فایلت اون رو توی مرورگرت ببینی کارهای زیر رو انجام بده:
فایلت رو داخل Illustrator یا Corel Draw بازش کن. محتویاتش رو یخورده جابجا کن تا تغییر داشته باشه. بعد دوباره فایلت رو ذخیره کن. کافیه File->Save رو انتخاب کنی.
حالا وقتی روی فایلت دابل کلیک کنی راحت داخل مرورگرت باز میشه.

[babyy]

سلام

ممنون ، یه نمونه فایل svg میزارید ؟
شاید حق با شماست ، من یلد نیستم فایل svg بسازم