فرمت SVG و مزایا استفاده در طراحی سایت
آموزشفرمت SVG و مزایا استفاده در طراحی سایت و مزایا استفاده
فرمت SVG مخفف گرافیک برداری مقیاس‌پذیر و فرمت استاندارد تصاویر برداری است ، اکثر مرورگرهای امروزی از این فرمت پشتیبانی می کنند،اما در این میان مشکلی وجود دارد! چطور این فایل‌ها را بسازیم و یا ویرایش کنیم؟!
فرمت Scalable Vector Graphic (فرمت SVG ) زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دوبعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده است. به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی طراحی سایت می‌گردد . برای درک بهتر می توانید این پست را مشاهده کنید ۱۲ لودینگ SVG
متاسفانه فقط تعداد کمی از نرم‌افزارهای معروف گرافیکی قادر به بازکردن فایل‌هایSVG هستند! و Photoshop جزو این فهرست محدود نیست! اما راه حل آن یافت شد و نه تنها همه خصوصیات ذکر شده را داراست بلکه متن‌باز هم هست.
نرم‌افزار Inkscape ویرایشگر متن‌باز تصاویر برداری فرمت SVG با قابلیت‌هایی مشابه Illustrator ، CorelDraw ، یا Xara X با استفاده از فرمت استاندارد W3C یا همان SVG است. Inkscape بسیاری از امکانات پیشرفته فرمت SVG را پشتیبانی می‌کند
علاوه بر موارد ذکر شده امکان خروجی گرفتن در فرمت‌هایی نظیر ( ، PDF PNG ، EPS ، EMF ، WMF و غیره) را داراست. و از طریق برنامه‌های جانبی نیز می‌توان به شکل گروهی فرمت هزاران فایل را با این نرم‌افزار تبدیل کرد (ConversionSVG)
برنامه متن‌باز دیگری نیز البته وجود دارد به نام Uniconvertor که استفاده از آن آسان و مناسب برای تبدیل سریع تعداد زیادی فایل است. علاوه بر این از تعداد زیادی فرمت نیز پشتبانی می‌کند. فرمت SVGZ نیز نسخه فشرده شده SVG است.
قابلیتهای فرمت SVG :
- کاملا قابلیت zoom کردن و pan کردن را دارد
- قابلیت موقعیت یابی پیکسل
- کیفیت بالای گرادیانت، سایه و سایر افکتها
- کنترل رنگ و دقت رنگ بهبود یافته
- بالاترین رزولوشن ممکن برای چاپ شدن
- کنترل بهتر روی type مانند kerning، متن روی خط و تعداد نامحدود فونت
- متن قابل ویرایش و جستجو شدن
- قابلیت جستجوی متن درون گرافیک
- محتوا و انیمیشن dynamic و قابلیت ارتباط برقرار کردن با کاربر به صورت script نویسی
- سایز کوچک برای download
- پشتیبانی از CSS
- درجه های مختلف شفافیت (transparency)
- پشتیبانی برای سایر دستگاهها شامل GPS و موبایلها
نرم‌افزار Inkscape
Inkscape نرم افزاری متن باز برای گرافیک های برداری (Vector) نظیر برنامه های Adobe Illustrator، Corel Draw، Freehand و Xara X است. تصاویر وکتور دارای مشخصاتی متفاوت از تصاویر Bitmap است که بارزترین آن ها، امکان بزرگنمایی تصاویر تا حد دلخواه بدون افت پیکسل است که این مورد به دلیل شیوه نگارش برداری تصاویر است. Inkscape بر خلاف نرم افزار های بر پایه Bitmap نظیر Photoshop و Gimp تصاویر خود را بر اساس Vector ایجاد می نماید. اگر تا کنون سابقه کار با نرم افزار های وکتور را داشته اید کار با این نرم افزار نیز برایتان بسیار ساده خواهد بود. Inkscape از مطرح ترین نرم افزار های برداری است که به صورت کاملا رایگان و متن باز منتشر می شود. آخر همین پست دانلود برنامه موجود است.
سلام کسی میدونه چرا فایل svgکه میسازم رو موقع استفاده نمیتونم رنگشو عوض کنم مثل بقیه ایکن هایی که دانلود میکنیم؟
ممنون میشم جوابمو بدید
سلام و عرض ادب
در نرم افزار Adobe Illustrator می توانید رنگ فایل های SVG را تغییر دهید .
با تشکر
سلام
شبتون بخیر
من با نرم افزار Adobe Illustrator تصویری طراحی کردم و تصویر رو با فرمت svgz. خروجی گرفتم .
متاسفانه در کامپیوتر همچین تصویر با این فرمت نمی شناسه . چطوری می تونم خروجی تصویر رو ببینم ؟
سلام و عرض ادب
بله ، برنامه نمایش تصاویر ویندوز از این فرمت پشتیبانی نمی کند.
نیاز است فایل را در مرورگر برای مثال Firefox مشاهده کنید .
در صورتی که نیاز است در سایت وردپرس نیز آپلود کنید پیش از آن پلاگین SVG Support را نصب نمایید .
شاد و موفق باشید
سلام وقت بخیر بنده یک انیمیشن 5 ثانیه دارم که با فرمت ویدئویی هست و می خوام به svg تبدیل کنم.با کانورتور های آنلاین از ویدئو تعداد زیادی اسلاید عکس تحویل میده . می خواستم ببینم امکان خروجی گرفتن به صورت ویدئو یا متحرک با پسوند svg هست؟ و اگر هست راهنمایی بفرمایید.
همانطور که میدانید فرمت Svg در دسته تصاویر قرار دارد . یعنی ویدیو رو به صورت مستقیم نمیشه تبدیل به svg کرد . برای انجام این کار یک راه حل پیشنهادی وجود دارد . اینکه انیمیشن رو به فرمت gif تبدیل کنین و سپس اون رو به svg تبدیل کنین . برای تبدیل فرمت gif به svg میتونین از سایت زیر هم کمک بگیرید :
https://convertio.co/gif-svg/
سلام من وقتی در برنامه ایلوستریور ایکونی رو خروجی میگیرم کد که به من میده در هدر سایتم وارد میکنم ایکون خیلی بزرگه چه جوری می تونم به سایز دل خواهم برسم
من خروجی svg از فایلم میگیرم. اما تگ img میندازه تو کد ها
امکانش هست راهنماییم کنین که چطور انجام بدم این اتفاق نیفته ؟
سلام وقت شما بخیر
این اتفاق احتمال به دلیل استفاده شما از خود فایل svg هست برای رفع این مشکل باید فایل را با یک ویرایشگر متن مثل notepad باز کنید و تگ svg داخل آن را برداشته و داخل کد خود کپی فرمایید
سلام دوست عزیز ، میتونی از طریق استایل دادن به تصویر سایز رو کنترل کنید.
سلام. ببخشید من وقتی از ایلاستریتور فرمت SVG رو خروجی میگیرم نوشته ها به هم ریخته نمایش داده میشه در حالی که این مشکل رو داخل خود نرم افزار حل کردم و نوشته ها درست نمایش داده میشه.
این مشکل قابل حله؟
و اگر آره چطوری؟
سلام
لطفا به نوع shape تغییر بدید و خروجی بگیرید ، به احتمال زیاد درست میشه
موفق باشید
ممنون از شما دوست عزیز
خیلییییی ممنون چو نرم افزار لوگو میکر ک داشتم تصاویرو pngاکسپرت میکرد و کیفیت پایین بود و از svg خبر نداشتم اما حالا با این فرمت لوگویی ک میسام به راحی در کرول دراو قابل تغیر است .ممنون
فق یسری طرح لایه بازpsdدان کردم برای ویرایش توی cldکیفیتش میاد پاین نمیدونم چی کنم مجبورم تو خود psdحذفیاتشو حذف ببرم cldی چیزای اضافه کنم بعد دوباره اکسپرت کنم psd برای تغییر cmykو فرمتtifdک اماده چاپ بنر باشه..
اگر راهی بلدی به منم ایمیل کن خیلی ممنون میشم.خدا خیرتون بده مشکل لوگو رو برطرف کردید.
لینک دانلود نرم افزار Inkscape-0.48.1 معیوب میباشد . لطفا اصلاح بفرمایید.
سلام
کاربر گرامی لینک دانلود تصحیح شد
موفق باشد
سلام خسته نباشید
برای باز کردن لودینگ های SVG که تو پست بعد گذاشتید از این برنامه استفاده می کنم، اما متاسفانه برنامه قادر به باز کردن اون نیست. ممنون میشم راهنمایی بفرمایید.
سلام
برای شما باز می کنه اما رنگ آن سفید است ، بعد از باز کردن با ماوس بر روی صفحه که کلیک کنید می بینید چیزی به انتخاب در آمده ، سپس بر روی رنگ هایی که پایین برنامه هست کلیک کنید.
موفق باشید
ممنونم.