فرمت SVG و مزایا استفاده در طراحی سایت
  • 24 آذر 1393
  • 19 دیدگاه
  • وحید دانافرد

فرمت SVG و مزایا استفاده در طراحی سایت

آموزش

فرمت SVG و مزایا استفاده در طراحی سایت و مزایا استفاده

فرمت SVG مخفف گرافیک برداری مقیاس‌پذیر و فرمت استاندارد تصاویر برداری است ، اکثر مرورگرهای امروزی از این فرمت پشتیبانی می کنند،اما در این میان مشکلی وجود دارد! چطور این فایل‌ها را بسازیم و یا ویرایش کنیم؟!

فرمت Scalable Vector Graphic (فرمت SVG ) زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دوبعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده است. به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول  (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی طراحی سایت می‌گردد . برای درک بهتر می توانید این پست را مشاهده کنید ۱۲ لودینگ SVG

 متاسفانه فقط تعداد کمی از نرم‌افزارهای معروف گرافیکی قادر به بازکردن فایل‌هایSVG هستند! و Photoshop جزو این فهرست محدود نیست! اما راه حل آن یافت شد و نه تنها همه خصوصیات ذکر شده را داراست بلکه متن‌باز هم هست.

تفاوت svg و bitmap

نرم‌افزار 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 از مطرح ترین نرم افزار های برداری است که به صورت کاملا رایگان و متن باز منتشر می شود. آخر همین پست دانلود برنامه موجود است.

32مگابایت
امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
20 رای, 4,20 از 5
Loading...
وحید دانافرد

دیدگاه شما عزیزان

  • fatemeh
    12 اردیبهشت 1400

    سلام کسی میدونه چرا فایل svgکه میسازم رو موقع استفاده نمیتونم رنگشو عوض کنم مثل بقیه ایکن هایی که دانلود میکنیم؟
    ممنون میشم جوابمو بدید

    • وحید دانافرد
      17 اردیبهشت 1400

      سلام و عرض ادب
      در نرم افزار Adobe Illustrator می توانید رنگ فایل های SVG را تغییر دهید .
      با تشکر

  • رشوند
    22 فروردین 1400

    سلام
    شبتون بخیر
    من با نرم افزار Adobe Illustrator تصویری طراحی کردم و تصویر رو با فرمت svgz. خروجی گرفتم .
    متاسفانه در کامپیوتر همچین تصویر با این فرمت نمی شناسه . چطوری می تونم خروجی تصویر رو ببینم ؟

    • وحید دانافرد
      24 فروردین 1400

      سلام و عرض ادب
      بله ، برنامه نمایش تصاویر ویندوز از این فرمت پشتیبانی نمی کند.
      نیاز است فایل را در مرورگر برای مثال Firefox مشاهده کنید .
      در صورتی که نیاز است در سایت وردپرس نیز آپلود کنید پیش از آن پلاگین SVG Support را نصب نمایید .
      شاد و موفق باشید

  • شهروز
    1 خرداد 1399

    سلام وقت بخیر بنده یک انیمیشن 5 ثانیه دارم که با فرمت ویدئویی هست و می خوام به svg تبدیل کنم.با کانورتور های آنلاین از ویدئو تعداد زیادی اسلاید عکس تحویل میده . می خواستم ببینم امکان خروجی گرفتن به صورت ویدئو یا متحرک با پسوند svg هست؟ و اگر هست راهنمایی بفرمایید.

    • 9 خرداد 1399

      همانطور که میدانید فرمت Svg در دسته تصاویر قرار دارد . یعنی ویدیو رو به صورت مستقیم نمیشه تبدیل به svg کرد . برای انجام این کار یک راه حل پیشنهادی وجود دارد . اینکه انیمیشن رو به فرمت gif تبدیل کنین و سپس اون رو به svg تبدیل کنین . برای تبدیل فرمت gif به svg میتونین از سایت زیر هم کمک بگیرید :
      https://convertio.co/gif-svg/

  • faraidoon
    3 شهریور 1398

    سلام من وقتی در برنامه ایلوستریور ایکونی رو خروجی میگیرم کد که به من میده در هدر سایتم وارد میکنم ایکون خیلی بزرگه چه جوری می تونم به سایز دل خواهم برسم

    • سبا
      11 خرداد 1400

      من خروجی svg از فایلم میگیرم. اما تگ img میندازه تو کد ها
      امکانش هست راهنماییم کنین که چطور انجام بدم این اتفاق نیفته ؟

      • ترانه هاشمیان
        19 خرداد 1400

        سلام وقت شما بخیر
        این اتفاق احتمال به دلیل استفاده شما از خود فایل svg هست برای رفع این مشکل باید فایل را با یک ویرایشگر متن مثل notepad باز کنید و تگ svg داخل آن را برداشته و داخل کد خود کپی فرمایید

    • اسماعیل نصرتی
      18 فروردین 1399

      سلام دوست عزیز ، میتونی از طریق استایل دادن به تصویر سایز رو کنترل کنید.

  • حبیب
    20 فروردین 1398

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

    • آی وحید
      21 فروردین 1398

      سلام
      لطفا به نوع shape تغییر بدید و خروجی بگیرید ، به احتمال زیاد درست میشه
      موفق باشید

  • قالیشویی
    21 اسفند 1397

    ممنون از شما دوست عزیز

  • حمد
    8 شهریور 1397

    خیلییییی ممنون چو نرم افزار لوگو میکر ک داشتم تصاویرو pngاکسپرت میکرد و کیفیت پایین بود و از svg خبر نداشتم اما حالا با این فرمت لوگویی ک میسام به راحی در کرول دراو قابل تغیر است .ممنون
    فق یسری طرح لایه بازpsdدان کردم برای ویرایش توی cldکیفیتش میاد پاین نمیدونم چی کنم مجبورم تو خود psdحذفیاتشو حذف ببرم cldی چیزای اضافه کنم بعد دوباره اکسپرت کنم psd برای تغییر cmykو فرمتtifdک اماده چاپ بنر باشه..
    اگر راهی بلدی به منم ایمیل کن خیلی ممنون میشم.خدا خیرتون بده مشکل لوگو رو برطرف کردید.

  • ارش رجبی
    20 فروردین 1396

    لینک دانلود نرم افزار Inkscape-0.48.1 معیوب میباشد . لطفا اصلاح بفرمایید.

    • آی وحید
      6 اردیبهشت 1396

      سلام
      کاربر گرامی لینک دانلود تصحیح شد
      موفق باشد

  • علی
    2 دی 1393

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

    • آی وحید
      2 دی 1393

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

کادر ارسال دیدگاه شما کاربر عزیز

2842 442121
پکیج برنامه نویس واقعی