مشاهده RSS Feed

کامیار

فرمت svg چیست ؟ چه تفاوت هایی با png دارد

به این مطلب امتیاز بدهید

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

مثال ۱: ترسیم دایره‌ای به مرکز (۲۰۰ ,۶۰۰) (با واحد پیکسل) و با شعاع ۳ سانتیمتر

کد HTML:
 <svg>
<circle cx="600" cy="200" r="3cm"/>
</svg>
مثال ۲: ترسیم پاره خطی با نقطهٔ شروع (۵۰ ,۷۰)، و نقطهٔ انتهایی (۴۰۰ ,۲۰۰) (با واحد پیکسل)، به رنگ قرمز، و دارای ضخامت ۸ پیکسل

کد HTML:
 <svg>
<line x1="70" y1="50" x2="300" y2="400" style="stroke: red; stroke-width: 8"/>
</svg>
مثال ۳: در ابتدا، یک مستطیل با رأس گوشهٔ بالایی سمت چپ (۶۰ ,۸۰)، دارای عرض ۴۰۰ و قاعدهٔ ۶۰ رسم می‌شود، و سپس، پهنای مستطیل در مدت زمانی ۱۵ ثانیه (زمان اسمی و نه واقعی) از ۴۰۰ به ۲۰ به صورت انیمیشن کاهش می‌یابد. (همهٔ واحدها پیکسل است)

کد HTML:
 <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>
مثال ۴: یک انیمیشن واقعی‌تر

کد HTML:
 <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>

از این فرمت بیشتر در ساخت لوگوی سایت های مختلف استفاده میشود از مزیت های این فرمت پایین نیامدن کیفیت ان است برای مثال اگر شما دایره ای کوچک با فرمت اس وی جی بسازید و ان را صد برابر بزرگ کنید از کیفیت ان کم نمیشود
از لوگوهای معروفی که با این فرمت ساخت شده میتوان به لوگوی سایت شبکه ی معروف MTV , لوگوی سایت وردپرس , لوگوی سایت BBC , لوگوی سایت دیجی کالا , لوگوی سایت استون مارتین (شرکت موفق ماشین سازی) , لوگوی سایت شرکت تویوتا , لوگوی سایت شبکه ی CBS امریکا و... بسیاری دیگر نام برد

فرمت SVG در برنامه ی الاستریتور قابل ایجاد یا ویرایش هستند دانلود این نوع عکس به صورت دانلود عکس های معمولی نمی باشد ! و نمیتوان بر روی عکس کلیک راست کرد باید به View page info ان صفحه مراجعه کرده و لینک عکس مورد نظر را بیابید و ان را کپی و در دانلود منیجرتان اد کنید

این فرمت را فتوشاپ های قدیمی ساپورت نمی کند اما خوشبختانه در فتوشاپ 2015 این قابلیت هم به این برنامه اضافه شده

آپدیت شده 10-29-2015 در 08:38 PM توسط [ARG:5 UNDEFINED]

دسته بندی ها
دسته بندی نشده

نظرات

Designed With Cooperation

Of Creatively