اگر تا به حال با فایل های SVG برخورد نداشته اید، باید بدانید که این عبارت، مخفف Scalable Vector Graphics می باشد. از نام پیداست که فرمتِ یک نوع فایل بُرداری می باشد.تصاویر برداری قابلیت افزایش سایز، بدون کاهش کیفیت را دارند. اما آنچه این فرمت را با موارد مشابه مانند EPS و Ai متفاوت می کند، امکان استفاده از SVG در طراحی وب سایت می باشد
2مورد از مزیت های مهم SVG:
- قابلیت تنظیم خودکار بر اساس طول یا عرض صفحه - باتوجه با اینکه تصاویر SVG فری سایز می باشد، با تغییر طول یا عرض، کیفیت کاهش پیدا نمی کند
- فایل های SVG مبتنی بر XML می باشند. بعبارت دیگر متنی هستند و گزینه خوبی برای فشرده سازی می باشند.
آیا معایبی هم وجود دارد؟
- در حال حاضر پشتیبانی نرم افزار های رایج گرافیک مانند فتوشاپ از این فرمت وجود ندارد.
(برای طراحی و یا ویرایش می توانید از نرم افزارهای دیگر مانند Inkscape و یا Adobe Illustrator استفاده کنید)
- همه مرورگرها این فرمت را پشتیبانی نمی کنند.
یک نمونه تصویر SVG
توجه : برای بازگشتن به سایز اصلی صفحه، کلیدهای CTRL و 0 (صفر) را باهم فشار دهید. (زبان کیبورد در حالت انگلیسی باشد)
نحوه استفاده :
مانند دیگر فرمت های رایج تصویر در وب (jpeg , gif , png) به کمک تگ img می توانید فایل را فراخوانی کنید :
<img alt="logo-svg" src="/images/news/logo.svg">
آیا امکان استفاده از فایل SVG بصورت inline وجود دارد؟
پاسخ بله است. شما می توانید کدها را درون فایل برنامه خود به کمک تگی با همین نام اضافه کنید:
این یک مثال ساده از کشیدن دایره با حاشیه سبز است . بمنظور دیدن خروجی کد بالا اینجا را کلیک کنید.
اگر برای شروع نمی خواهید وارد داستان طراحی شوید و فعلا از نمونه های موجود در اینترنت استفاده نمایید جستجویی در موتور گوگل انجام دهید: مثلا : Browser logo filetype:SVG
بمنظور کسب اطلاعات بیشتر نیز ویکی پدیا همیشه در کنار شماست!
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics