همه چیز درباره فایل های svg

ترم SVG درست برای زمان های حالا ایجاد شده است. تمام شرکت های طراحی ترجیح می دهند که به صورت دیوانه دار از SVG در هرجایی استفاده کنند .... اما واقعا می دانید که SVG چیست؟ 
البته شما می دانید که این یک فرمت گرافیگی است که به رزولوشن وابسته نمی باشد یا به زبان ساده یک فرمت وکتور تصویری است ... اما این واقعا چیست؟ چگونه کار می کند؟ چه چیزی آن را از EPS، WMF، JPG و PNG متفاوت می کند؟ اینجا سوالات زیادی وجود دارد که شما در ذهن تان دارید اما تاکنون یک توضیح ساده در مورد آن پیدا نکرده اید که همه اینها را توضیح دهد. 

پس امروز این مقاله را ارائه می دهیم که توضیح می دهد که SVG چیست؟ مناسب ترین جای آن کجاست و چگونه می توان از آن در طراحی وب و طراحی های گرافیکی از آن استفاده نمود. بیایید شروع کنیم.

SVG چیست؟
SVG مخفف Scalable Vector Graphics است. این یک فرمت فایل است. این یک فرمت فایل وکتور تصویری است. درست شبیه به EPS و WMF. طرح هایی که با فرمت SVG ذخیره می شوند وابسته به رزولوشن نیستند، به این معنا که این طرح ها می توانند به صورت نامحدود بزرگ شوند و کیفیت خود را از دست ندهند. این مورد در فایل های تصویری گرافیکی مانند JPG و PNG وجود ندارد.
مقایسه SVG با EPS/WMF
SVG به وسیله (W3C(World Wide Web Consortium) طراحی می شود و یک فرمت فایل وکتور است که فایل های محاوره ای و انیمیشن را پشتیبانی می کند پس طراحان وب می توانند از آن استفاده کنند تا CSS sprites و گرافیک های وکتور انیمیشنی تولید کنند. این چیزی است که تقریبا از آن نشنیده اید.
فرمت EPS یا Encapsulated Postscript محبوب ترین فرمت وکتور گرافیکی برای کاربران مدیا پرینت است. این می تواند تقریبا درون همه برنامه های طراحی وکتور قرار بگیرد، مثل Adobe Illustator، CorelDRAW و دیگر برنامه ها. این فرمت کامل و قابل اعتماد است. اما EPS طراحی شده است برای رسانه های پرینتی. SVG برای تکنولوژی های مدرن طراحی شده است.
فرمت WMF یا Windows Metafile همچنین یک فرمت فایل خوب است اما این یک فرمت EPS جایگزین برای ویندوز است. این فرمت را مایکروسافت برای فلاپی دیسک طراحی کرده است. در زمان های قدیم فرمت WMF کارآیی خود را داشت اما این روزها EPS قابل اعتمادتر است.
مزایای فرمت SVG

حالا ما می دانیم که این SVG از انیمیشن ها پشتیبانی می کند و توسط هیچ یک از W3C ها طراحی نشده است، اما اینجا چیز دیگری وجود ندارد که این فرمت را از بقیه فرمت های وکتور گرافیکی متمایز کند؟ بله، اینجا یک اختلاف بنیادین وجود دارد و این اختلاف بزرگترین مزیت است.
XML Data
اطلاعات تصویر SVG لزوما درون SVG ذخیره نمی شود. این اطلاعات در فرمت XML ذخیره می شود. بنابراین اگر شما یک دایره سبز 50 پیکسلی داشته باشید، آن مانند دستور زیر نوشته می شود:

<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="green"/>

این بدان معناست که فایل های SVG را می توان جست و جو کرد، ایندکس می شوند، اسکریپت و فشرده سازی می شوند. این یک اختلاف بینیادین از بقیه فرمت های وکتوری است. 

بنابراین آیا شما از NotePad استفاده کرده اید تا تصاویر SVG را ایجاد یا ویرایش کنید؟؟؟
نگران نباشید، شما انجام نداده اید. شما می توانید تصویر را با استفاده از همه ویرایش گر ها مانند Adobe Illustarator بکشید و تصویر را به صورت SVG ذخیره نمایید.

چگونه SVG در ادوبی ایلیستریتور ایجاد کنیم
زمانی که شما بر روی دستور Save در ادوبی ایلستریتور کلیک می کنید، شما آپشن SVG را در لیست پیدا نمی کنید. همچون اگر شما بر روی Save for Web کلیک کنید شما هنوز هم نمی توانید آپشن SVG را پیدا کنید... پس چگونه آن را پیدا کنید؟
شما می توانید آن را زمانی که بر روی دستور Save as کلیک می کنید بیابید، در پایین می توانید آن را مشاهده کنید.

در پایین پنجره ای را می بینید که زمانی که شما بر روی save کلیک کنید پدیدار می شود.

به یاد داشته باشید که از پروفایل SVG1.1 استفاده کنید. چرا؟ زیرا این فرمت با همه براوزرها پشتیبانی می شود. جزئیات بیشتر در بخش بعدی است.
نکته: شما تنها می توانید فایل های SVG را در ادوبی ایلستریتور CS6 و ورژن های بعدی باز کنید.
چگونه تصاویر SVG را در فتوشاپ باز کنیم
متاسفانه، هیچ روش مستقیمی وجود ندارد تا فایل های SVG را در فوتوشاپ باز کنید. اما البته، یک راه وجود دارد. راه این است که شما می توانید آن را با ادوبی ایلستریتور یا Inkscape باز کنید. زمانی که تصویر باز شد، شما می توانید آن را به عنوان یک فایل EPS یا JPG/PNG ذخیره نمایید.
زمانی که فایل EPS را داشتید، شما می توانید آن فایل را باز کنید و ویرایش نماید.
اینجا یک آموزش گام به گام وجود دارد:
گام اول: فایل را در ادوبی ایلستریتور یا Inkscape باز کنید.
گام دوم: آن را به عنوان یک فایل EPS ذخیره نمایید.
گام سوم: فایل EPS را در فوتوشاپ باز کنید.
گام چهارم: لایه ها را تبدیل به عکس کنید
گام پنجم: ویرایش لازم را انجام دهید.
نکته: البته تعدادی پلاگین مانند SVG Kit وجود دارد اما همه این پلاگین ها پولی هستند. شما پیش از این روش رایگان را فرا گرفته اید.
چگونه از SVG در طراحی وب استفاده کنیم
ایده های زیادی برای استفاده از SVG در طرح های وب سایتی وجود دارد. ما پیش از این قدرت اطلاعات XML را تشریح کردیم. اینجا یک مزیت خوب دیگر وجود دارد. برای نمونه حجم آن بسیار کوچک است. و همچنین همه ویژگی های وکتور گرافیکی را داراست بنابراین در تمام صفحات نمایش بزرگ همان جلوه را داراست.
اما سوال اینجاست که شما چگونه می توانید از آن در یک وب سایت استفاده کنید.
ممکن است شما پیش از این، اضافه کردن کد <img> را امتحان کرده باشید اما کار نمی کند. درست است، این کد در Internet Explorer 8 کار نمی کند. ورژن های قدیمی از فایرفاکس، کروم، اپرا و سافاری هم این کد را نمی شناسند.
<img src="circle.svg" alt="A Green Circle">
اینجا یک راه دیگر برای تصاویر SVG وجود دارد. استفاده از کد <object>
کد نهایی شما باید شبیه به این باشد:

<object type="image/svg+xml" data="circle.svg"> Green Logo </object>

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

اینجا یک خلاصه از مرورگرهایی که تگ <img> را می شناسند را آورده ایم. که کدامیک پشتیبانی می کند و کدامیک نمی کند.

 

پک های طراحی SVG رایگان
اینجا تعدادی پک های طراحی SVG وجود دارد که شما می توانید آنها را دانلود کنید و شروع به استفاده/ویرایش/ و تمرین کردن بر روی آن بکنید.
Linea Iconsets
این یک دسته آیکون طراحی شده درخشان است که شما می توانید از آن استفاده کنید.

Open Iconic
این یک پک دیگر طراحی شده است.

Seven Icon Pack
من در مورد فایل های SVG در این پک مطمئن نیستم. ممکن است PNG باشند اما هنوز هم شما می توانید ببینید که چگونه کار می کند.

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

منبع

مترجم : م.اختری