وکتور چیست ؟ + آموزش SVG در وب

سایر آموزش ها ژانویه 2015 28

در این آموزش در مورد تصاویر وکتور و SVG براتون صحبت کردم ، فیلم این قسمت را میتوانید از باکس زیر دانلود کنید :

دانلود فیلم آموزشی
لینک دانلود30 مگابایت

 

در گرافیک تصاویر به دو دسته اصلی 1- پیکسلی 2- وکتور تقسیم میشن ؛ ساختار تصاویر پسکلی همانطور که از اسمش پیداست پیکسل ها تشکیل میدن اما ساختا تصاویر وکتور را بردار های هندسی و ریاضی تشکیل شده است. فرمت های رایج تصاویر پیکسل شامل JPG , PNG , GIF و … است و فرمت های رایج تصاویر وکتور SVG , AI , EPG  و … است.

تفاوت های این دو دسته به شرح زیر است :

1- باز زوم کردن در تصاویر ویکتور کیفیت و حجم هیچ تفاوتی اعمال نمیشه در صورتی که در تصاویر پیکسلی کیفیت خراب و حجم افزایش پیدا میکنه

2- معمولا عکس های دکتور بدلیل اینکه مختصات بردار را ذخیره میکنند حجم کمتری دارند در صورتی که در عکس های پیکسلی طیف رنگ هر پیکسل ذخیره میشه و حجم دو چندانی پیدا میکنه

 

همانطور که فرمت تصاویر پیکسلی با تصاویر وکتور متفاوت است برنامه هایی که برای ادیت و ویرایش هر فرمت استفاده میشه فرق میکنه ، برای تصاویر پیکسلی معمولا از photoshop و Gimp استفاده میشه اما برای تصاویر وکتور از Illustrator و InkScape استفاده میشود.

رایج ترین فرمت برای تصاویر وکتور SVG هست که در صفحات وب هم قابل استفاده است . برای اینکه از این عکس ها در وب استفاده کنیم دقیقا مثل عکس های پیکلس اقدام و از تگ img استفاده میکنیم :

و همچنین میتونیم بهش استایل بدیم و خاصیت های css بهش نسبت بدیم :

 

دیدگاه ها
  • softsun.ir گفت:

    سلام آقای برنامه نویس نمیخوام گیر بدما فقط جهت اطلاع بگم شاید از دستت در رفته باشه!
    وقتی با گوشی میام تو سایتت منو بالا و کادر های بعضی مطالب که کد توشونه چون رسپانسیو نیستن قالبتو خراب میکنن در ضمن میخواستم با گوشی نظر بدم این دکمه افزودن کد و سوال امنیتی رو هم رفته بود نمیتونستم پر کنم کادرش رو!
    اگه دوست دارید رسیدگی کنید
    خودمم یه سوال دارم میگم وقتی به نظرات کاربرانم پاسخ میدم به جای اینکه پاسخ نظر در همان کادر نظر قرار بگیره جداگانه قرار میگیره مثا یه نظر مجزا اگه میشه راهنمایی کنید چیکارش کنم

  • kamal گفت:

    سلام آقای برنامه نویس واقعا سایت توپی داری
    خیلی با سایتتو مطالبت حال میکنم
    موفق باشی

  • 3pa گفت:

    سلام آقای برنامه نویس اگر به جای تصاویر پیکسلی تصاویر شاخص رو svg کنم مشکلی پیش نمیاد؟؟
    منظورم از ایندکس گوگل ، سرچ تو عکسای گوگل و …

  • 3pa گفت:

    ببخشید سوال بی ربط اینجا می پرسم
    میگم میگن سه تا تصویر شاخص به پست تو وردپرس میشه داد (بندانگشتی ، عادی ، بزرگ)
    مال من فقط یه جا برا آپلود داره که!
    فقط برای تصویر بند انگشتی هست
    خیلی نیاز مندم راهنمایی کنید

    • حسین شفیعیان گفت:

      اگه برام مقدرو باشه جواب میدم ، انجمن وردپرس پارسی (forum.wp-parsi.com) میتونه پاسخگوی سوالات شما باشه
      منظور از تصاویر بند انگشتی همان تصاویر هست که آپلود کردید فقط اندازش کوچیکتر هست مثلا در ساید بار باکس مطالب تصادفی برای هر مطلب عکس داره که بهش میگن تصاویر بند انگشتی ، من این مورد را با کد تنظیم کردم که در جلسات طراحی قالب وردپرس توضح میدم.

  • ghadirkiani گفت:

    سلام
    بسیار عالی
    یه پیشنهاد
    ویدئو ها رو با 7zip زیپ کنید تا حجمشون کمتر بشه
    یاعلی

    • حسین شفیعیان گفت:

      سلام
      مرسی تشکر
      این ویدئو ها بصورت پیشفرض فشرده هستند و بیشتر از این امکانش نیست و تاثیر آنچنانی نخواهد داشت.

  • kamal گفت:

    درود
    یک سوال داشتم
    من تمام تصاویر مورد نظرم را که میخوام تو سایت قرار بدم px هست
    راهی هست که تبدیلش کنم به svg که هر چی خواستم بزرگش کنم ؟

    • حسین شفیعیان گفت:

      درود
      بله شما با CSS میتونید خاصیت width براش تعیین کنید ، در فیلم آموزشی هم توضیح دادم

      • kamal گفت:

        منظورم خاصیت width نبود
        کلا میشود عکس px را به svg تغییر داد
        مثلا عکس هایی که با دوربینم گرفتم رو میشه به svg تغییر داد؟

        • حسین شفیعیان گفت:

          نه کمال جان نمیشه عکس های پیکسلی را به وکتور تبدیل کرد مخصوصا عکس هایی که با دوربین گرفته شده ، البته مبشه کاری کرد که پسوند عکس های پیکسلی به وکتور و svg تبدیل بشه اما حجم چندین برابر میشه و کیفیتش نابود میشه

        • حسن گفت:

          ببخشید میخواستم بپرسم دوربینی هم داریم که بجای عکس پیکسلی عکس svg بگیره ؟

          • حسین شفیعیان گفت:

            ببینید اصلن امکان ثبت تصویر وکتور از یک منظره نیست !

  • runy گفت:

    سلام چرا یه سرچ برای قالب سایتت نمیزاری؟؟؟

    • حسین شفیعیان گفت:

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

  • امیر گفت:

    سلام ممنون از سایت خوبتون من سطح مجوز آپلود تصاویر svg رو به سایتم دادم اما وقتی میخوام از تصاویر svg برای تصویر شاخص استفاده کنم اونو نشون نمیده مشکل از کجاست
    من از این کد برای دسترسی استفاده کردم
    function my_myme_types($mime_types){
    $mime_types[‘svg’] = ‘image/svg+xml’; //Adding svg extension
    return $mime_types;
    }
    add_filter(‘upload_mimes’, ‘my_myme_types’, 1, 1);

    که تو قسمت image/svg+xml جواب نداد و به این images/svg+xml تغییر دادم اجازه آپلود داد