SVG متحرک در مقابل GIF [CAGEMATCH]

SVG می تواند بسیار بیشتر از نمایش تصاویر استاتیک انجام دهد. قابلیت‌های انیمیشن یکی از قدرتمندترین ویژگی‌های آن است که به آن برتری متمایز نسبت به سایر فرمت‌های تصویر می‌دهد. آنها یکی از دلایل بسیاری هستند که تصاویر SVG را بهتر از تصاویر بیت مپ از جمله GIF می کند. اما این البته فقط برای تصاویری که کاندیدای خوبی برای SVG هستند، مانند:

• لوگو
• تصاویر ساده و مبتنی بر برداری،
• کنترل های رابط کاربری،
• اینفوگرافیک،
• و آیکون ها

البته، اگر تصویری دارید که با فرمت بیت مپ مناسب تر است – مانند یک عکس یا یک تصویر برداری بسیار پیچیده (که معمولاً از نظر اندازه بسیار بزرگ مانند یک SVG است)، باید به جای آن از فرمت بیت مپ استفاده کنید. نه تنها تصویر باید کاندید خوبی برای SVG باشد، بلکه SVG باید کاندید خوبی برای تصویر باشد. اگر اندازه تصویر بسیار کوچکتر است مانند PNG، باید از PNG استفاده کنید و نسخه‌ها/رزولیشن‌های مختلف آن تصویر را با استفاده از srcset، یا ، بسته به چیزی که روی آن کار می کنید و برای رسیدن به آن تلاش می کنید.

نه تنها تصویر باید کاندید خوبی برای SVG باشد، بلکه SVG باید کاندید خوبی برای تصویر باشد.

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

با این حال، هفته گذشته پیوندی در جدول زمانی توییتر من ظاهر شد که به مجموعه‌ای از آیکون‌هایی که به صورت GIF متحرک شده بودند پیوند داشت.

اولین چیزی که با دیدن آنها به ذهنم خطور کرد این بود که آنها کاندیدای عالی برای SVG هستند و باید به عنوان تصاویر SVG ایجاد شوند، نه GIF.

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

بنابراین، به همین دلیل است که من فکر می کنم هر زمان که می توانید باید به جای GIF از SVG استفاده کنید.

کیفیت تصویر

اولین مزیت استفاده از SVG نسبت به GIF – یا هر فرمت تصویری، بدون تعجب، ویژگی شماره یک SVG است: استقلال وضوح. یک تصویر SVG در هر وضوح صفحه نمایش فوق العاده واضح به نظر می رسد، مهم نیست که چقدر آن را افزایش دهید. در حالی که GIF ها – فرمت تصویر بیت مپ – این کار را نمی کنند. سعی کنید روی صفحه‌ای که حاوی یک تصویر GIF است بزرگنمایی کنید و ببینید که GIF پیکسلی شده و محتوای آن تار می‌شود.

به عنوان مثال، GIF انیمیشن SVG زیر در این اندازه کوچک خوب به نظر می رسد:

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

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

برای ارائه تصاویر واضح برای نمایشگرهای با وضوح بالا هنگام استفاده از فرمت تصویر بیت مپ مانند GIF، باید از یا srcset و تصاویر را برای زمینه های مختلف تغییر دهید.

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

وقتی نمادها یا تصاویر متحرک GIF ایجاد می کنید، اندازه آنها ثابت می شود. صفحه را تغییر اندازه یا بزرگنمایی کنید و آنها پیکسلی خواهند شد. با SVG، اندازه آزاد است و وضوح ثابت است. شما می توانید یک SVG کوچک ایجاد کنید و آن را در صورت نیاز بدون کاهش وضوح تصویر، آن را بزرگ کنید.

نتیجه گیری:

GIF	SVG متحرک
گیف‌ها، مانند سایر فرمت‌های تصویر، مستقل از رزولوشن نیستند و بنابراین در صورت بزرگ‌نمایی یا مشاهده با وضوح بالاتر، پیکسلی به نظر می‌رسند.	SVG مقیاس پذیر و مستقل از وضوح است و در هر وضوح صفحه نمایش واضح به نظر می رسد.

رنگ ها و شفافیت

شاید مشکل شماره یک GIF ها نحوه کار با شفافیت باشد، به خصوص زمانی که تصویر در پس زمینه ای غیر از پس زمینه سفید نمایش داده می شود.

این مشکلی است که به احتمال زیاد هنگام استفاده از نمادهای GIF (چه متحرک یا غیر متحرک) رخ می دهد، زیرا آیکون ها معمولاً با پس زمینه شفاف ایجاد می شوند.

به عنوان مثال، دایره خط‌دار زیر را در نظر بگیرید که هم به‌عنوان یک تصویر SVG (سمت چپ) و هم یک GIF با پس‌زمینه شفاف (راست) ایجاد شده است. مشکل به محض اینکه به دو تصویر نگاه می کنید آشکار می شود: دایره GIF دارای حاشیه های خاکستری در اطراف خط است.

اگر این را در مرورگر نمی‌خوانید، ممکن است افکت برای شما قابل مشاهده نباشد زیرا ممکن است سبک‌های شکل اعمال نشده باشند. در اینجا یک اسکرین شات وجود دارد که مشکل را نشان می دهد (راست):

این به این دلیل است که شفافیت در تصاویر GIF باینری است. یعنی هر پیکسل یکی از این دو است در یا خاموش شدیک پیکسل شفاف یا کاملاً مات است. این به نوبه خود به این معنی است که انتقال بین رنگ پیش‌زمینه و رنگ پس‌زمینه به همان اندازه صاف نیست و منجر به ایجاد مصنوعاتی می‌شود که در اثر نرخ نمونه نامناسب ایجاد می‌شود. نام مستعار.

وقتی خط کاملاً صاف نیست، باعث می‌شود برخی از پیکسل‌ها (در لبه‌ها) تا حدی شفاف و تا حدی مات شوند، بنابراین نرم‌افزار باید تشخیص دهد که چه رنگی برای آن پیکسل‌ها استفاده کند. اثر هاله “به این دلیل ایجاد می شود که تمام پیکسل هایی که بیش از 50٪ مات هستند کاملاً مات هستند و از رنگ bg رنگی که شطرنجی شده اند استفاده می کنند” (کریس لیلیبنابراین این افکت معمولاً نتیجه آلودگی پیکسلی از رنگ پس‌زمینه‌ای است که تصویر هنگام ایجاد/ذخیره در ویرایشگر گرافیکی در برابر آن ایجاد شده است.

نام مستعار معمولاً مخالف است ضد آلیاسینگ، اما وقتی شفافیت باینری باشد، کار چندان ساده ای نیست:

وجود دارد تعامل قوی بین شفافیت ضد آلیاسینگ و باینریاز آنجایی که رنگ پس‌زمینه تصویر با رنگ‌های پیش‌زمینه ترکیب می‌شود، صرفاً جایگزین کردن یک رنگ پس‌زمینه با رنگ دیگر برای شبیه‌سازی شفافیت کافی نیست. طیف وسیعی از سایه ها وجود خواهد داشت مخلوط می کند از رنگ های پس زمینه و پیش زمینه […].افکت در این مورد یک هاله سفید در اطراف اشیاء است زیرا تصویر اصلی ضد مستعار به رنگ پس زمینه سفید است.

– کریس لیلی (منبع)

راه حل این مشکل شفافیت متغیر است که به عنوان کانال آلفا شناخته می شود، که اجازه می دهد تا درجات مختلفی از شفافیت و بنابراین انتقال نرم تر بین رنگ پیش زمینه و پس زمینه، که در GIF در دسترس نیست. از این رو مشکل اثر هاله است. تصاویر افکت هاله معمولاً هنگامی که با پس‌زمینه سفید استفاده می‌شوند بهترین به نظر می‌رسند. هر رنگ پس زمینه دیگری با کنتراست بالا، مصنوع را قابل مشاهده می کند.

من کاملاً مطمئن نیستم که راهی برای حل این مشکل وجود دارد یا خیر، اما هنوز با یک GIF با پس‌زمینه شفاف و لبه‌های منحنی مواجه نشده‌ام که این مشکل را نداشته باشد. من حتی اشکال مستطیلی را دیده ام که از این مشکل رنج می برند.

اگر می‌خواهید از تصویر/آیکون خود در پس‌زمینه غیرسفید استفاده کنید – مثلاً یک پس‌زمینه پاورقی تیره، این خود می‌تواند یک مشکل باشد. اما دلایل دیگری نیز وجود دارد که SVG بهتر از GIF است که در قسمت های بعدی به آنها خواهیم پرداخت.

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

چرا ممکن است نتوانید حاشیه ها را در اندازه های کوچکتر ببینید؟ پاسخ این است: مرورگر لبه ها را به عنوان بخشی از فرآیند تغییر اندازه تصویر صاف می کند.
آیا این به این معنی است که می توانید از این برای خلاص شدن از شر حاشیه استفاده کنید و همچنان از GIF استفاده کنید؟ بله، شما می توانید. اما برای انجام این کار، باید از یک GIF استفاده کنید که بسیار بزرگتر از اندازه ای است که می خواهید آن را رندر کنید، و سپس اندازه آن را تغییر دهید. این همچنین به این معنی است که شما تصاویری را به کاربران خود ارائه می دهید که بسیار بزرگتر از نیاز آنها هستند، بنابراین تعداد بیشتری از دستگاه های پهنای باند تلفن همراه آنها را اشغال می کنید و همچنین به اندازه و عملکرد کلی صفحه آسیب می رساند. لطفا این کار را نکنید

نتیجه گیری:

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

تکنیک های انیمیشن و عملکرد انیمیشن

می توانید SVG را با استفاده از CSS، javaScript یا SMIL متحرک کنیدو هر کدام سطح متفاوتی از کنترل را به شما می دهد که می توانید از آن برای ایجاد انواع انیمیشن ها بر روی عناصر SVG استفاده کنید.

هیچ “تکنیکی” برای متحرک سازی تصاویر GIF وجود ندارد. آنها با نمایش یک سری عکس – یکی برای هر فریم – به ترتیب، به شیوه ای ثابت و با سرعت ثابت متحرک می شوند. می دانید، روش کار گیف ها. مطمئناً، می‌توانید قبل از تبدیل کردن آیکون‌ها به GIF، با آیکون‌های خود خلاقیت به خرج دهید و سپس انیمیشن را «ذخیره» کرده و آن را به GIF تبدیل کنید، اما چقدر خوب به نظر می‌رسد؟ و بعد از آن چقدر کنترل روی زمان بندی انیمیشن خواهید داشت؟ وجود ندارد.

مگر اینکه مطمئن شوید که حداقل 60 فریم (یعنی 60 تصویر) دارید.در هر ثانیه برای ایجاد GIF خود، انیمیشن صاف به نظر نمی رسد. در حالی که با SVG، دستیابی به انیمیشن های روان با استفاده از بهینه سازی مرورگر بسیار آسان تر و ساده تر است.

اندازه فایل GIF بزرگتر از PNG یا JPEG است و هر چه انیمیشن طولانی تر باشد اندازه آن بزرگتر خواهد بود. حالا اگر انیمیشن شما حداقل 5 یا 6 ثانیه پخش شود چطور؟ اگه خیلی بیشتر پخش بشه چی؟

شما عکس را دریافت می کنید.

بیایید به یک مثال خاص تر اما حداقلی نگاه کنیم. در زیر دو تصویر وجود دارد: یک SVG متحرک در سمت چپ و یک GIF متحرک در سمت راست. رنگ مستطیل در هر دو تصویر به مدت شش ثانیه تغییر می کند.

در اینجا چند نکته قابل توجه است:

• انیمیشن GIF صاف به نظر می رسد، اما اگر به دقت نگاه کنید، متوجه خواهید شد که مستطیل SVG از رنگ ابتدایی تا رنگ پایانی، طیف وسیع تری از رنگ ها را طی می کند. تعداد رنگ هایی که یک GIF از آن عبور می کند به تعداد فریم ها محدود می شود. در تصویر بالا، GIF از 60 فریم یعنی 60 رنگ عبور می کند در حالی که SVG از کل طیف بین سایه صورتی استفاده شده و رنگ سبز نهایی عبور می کند.
• برای تکرار انیمیشن‌هایی مانند این، معمولاً بهتر است از پرش رنگ نشان داده شده در انیمیشن بالا اجتناب کنید و انیمیشن را طوری طراحی کنید که پس از رسیدن به رنگ سبز، معکوس شود. به این ترتیب به آرامی به صورتی تبدیل می شود و سپس دور دوم انیمیشن را نیز از آنجا شروع می کند و از پرش رنگ زشت اجتناب می کند.

  با CSS می توانید انیمیشن را با استفاده از آن معکوس کنید alternate مقدار جهت انیمیشن اما با استفاده از GIF، باید روی تعداد فریم کار کنید و احتمالاً در نهایت آن را دو برابر کنید تا این اتفاق بیفتد. این البته اندازه تصویر را نیز افزایش می دهد.

ابعاد دو تصویر نشان داده شده در بالا عبارتند از:

• اندازه تصویر GIF: 21.23 کیلوبایت
• اندازه تصویر SVG: 0.355 کیلوبایت

این یک تفاوت پیش پا افتاده نیست. اما همه ما می دانیم که می توانیم تصاویر خود را بهینه کنیم. پس بیایید آن را انجام دهیم.

بهینه سازی SVG با استفاده از SVGO Drag-and-Drop GUI اندازه فایل SVG را کاهش می دهد 0.249 کیلوبایت.

برای بهینه سازی یک GIF، می توانید از یکی از چندین ابزار بهینه سازی گیف آنلاین استفاده کنید. من برای بهینه سازی تصویر بالا از ezgif.com استفاده کردم. (ابزارهای دیگری وجود دارد؛ gifsicle یکی از آنهاست.) اندازه فایل به کاهش یافت 19.91 کیلوبایت.

گزینه های زیادی برای بهینه سازی تصاویر GIF وجود دارد. من تصویر بالا را بهینه کردم تا تعداد فریم ها با استفاده از فشرده سازی GIF با اتلاف دست نخورده باقی بماند می تواند اندازه فایل GIF متحرک را 30٪ -50٪ به قیمت برخی از لرزش / نویز کاهش دهد.

شما همچنین می توانید با حذف هر n فریم آن را بهینه کنید. این می تواند اندازه فایل را بیشتر کاهش دهد، اما به قیمت صاف نبودن انیمیشن. و در مورد انیمیشنی مانند انیمیشن مورد بحث، حذف فریم ها تغییر رنگ را “پرش” و محسوس می کند.

گزینه های بهینه سازی دیگری مانند کاهش رنگ (که برای انیمیشن وابسته به رنگ ما در اینجا مناسب نیست) و کاهش شفافیت در دسترس هستند. می توانید در صفحه بهینه سازی ezgif.com با این گزینه ها بیشتر آشنا شوید.

به طور خلاصه: اگر می‌خواهید انیمیشن GIF شما روان باشد، به فریم‌های بیشتری در ثانیه نیاز خواهید داشت و به همین دلیل اندازه فایل را افزایش می‌دهد. در حالی که با SVG شما احتمالاً اندازه فایل بسیار کمتری را حفظ خواهید کرد. مثال بالا حداقل است و من مطمئن هستم که نمونه های بهتری نیز وجود دارند، اما من می خواستم حداقل ترین مثال را برای نشان دادن تفاوت بین این دو فرمت داشته باشم.

حتی اگر مستطیل بالایی را با استفاده از جاوا اسکریپت یا حتی یک فریم جاوا اسکریپت متحرک کرده باشید – از آنجایی که برای مثال انیمیشن‌های SVG در IE کار نمی‌کنند، اندازه فایل آن فریم همراه با SVG احتمالاً کمتر یا حداقل برابر با اندازه تصویر GIF است. به عنوان مثال، با استفاده از TweenLite GreenSock، اندازه SVG به همراه کتابخانه کمتر از 13 کیلوبایت خواهد بود (که هنوز هم کمتر از اندازه GIF است) زیرا TweenLite با 12 کیلوبایت کوچک شده است. اگر در نهایت اندازه ای برابر با یک GIF داشته باشید، مزایای دیگر SVG ترازو را بالا می برد و از آن سود بیشتری خواهید برد.

چند کتابخانه جاوا اسکریپت دیگر وجود دارند که در یک زمان بر روی کارهای خاص انیمیشن تمرکز می‌کنند و در اندازه‌های فایل بسیار کوچکی هستند (بخشی که برای متحرک کردن مسیرهای SVG برای ایجاد جلوه‌های ترسیم خط استفاده می‌شود. این بخش با حجم 2.72 کیلوبایت کوچک شده است. این خیلی ضعیف نیست، درست است؟

ممکن است استثناهایی وجود داشته باشد، بنابراین همیشه باید تست کنید. اما با توجه به ماهیت گیف ها و نحوه عملکرد آنها، احتمالاً متوجه خواهید شد که SVG در بیشتر موارد گزینه بهتری است.

توجه: عملکرد SVG امروز بهترین نیست، اما امیدواریم در آینده تغییر کند. IE/MS Edge بهترین نمایش SVG را از هر مرورگر امروزی ارائه می دهد. با این حال، انیمیشن های SVG بهتر از انیمیشن های GIF به نظر می رسند، به خصوص در هنگام کار با انیمیشن های طولانی، زیرا اندازه فایل GIF – با فرض اینکه با سرعت 60 فریم در ثانیه ضبط شود – تأثیر منفی بر عملکرد کلی صفحه خواهد داشت. کتابخانه هایی مانند GreenSock نیز عملکرد چشمگیری ارائه می دهند.

نتیجه گیری:

GIF

SVG متحرک

تصاویر GIF معمولا بزرگتر از تصاویر SVG هستند. هرچه انیمیشن پیچیده‌تر و طولانی‌تر باشد، فریم‌های بیشتری برای ایجاد آن مورد نیاز است و در نتیجه هر چه اندازه فایل بزرگ‌تر باشد و تأثیر منفی بر عملکرد آن بیشتر باشد. مگر اینکه انیمیشن GIF با سرعت 60 فریم در ثانیه پخش شود، انیمیشن ناهموار و صاف نخواهد بود. همچنین، هرچه تعداد فریم در ثانیه بیشتر باشد، حجم فایل به خصوص برای انیمیشن های طولانی تر بیشتر می شود. نتیجه: مصالحه ای وجود خواهد داشت که باید انجام شود. یا انیمیشن GIF صاف است و حجم کلی فایل و صفحه و عملکرد تأثیر منفی می گذارد یا انیمیشن GIF با فریم های کمتر آسیب می بیند. یک شکل از عملکرد در هر دو سناریو در معرض خطر است.

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

نگهداری و اصلاح انیمیشن ها

اگر از فایل‌های GIF استفاده می‌کنید بسیار دردسرساز است. برای نام بردن از چند مورد، باید از یک ویرایشگر گرافیکی مانند Photoshop یا Illustrator یا After Effects استفاده کنید. و اگر شما هم مانند من هستید، ویرایشگرهای گرافیکی جایی نیستند که مهارت های شما درخشنده باشد و شما بیشتر در خانه هستید که به جای ویرایشگرهای گرافیکی، در کدها تغییراتی ایجاد می کنید.

اگر بخواهید زمان انیمیشن خود را تغییر دهید چه؟ یا اگر می خواهید توابع زمان بندی یک یا چند عنصر در تصویر خود را تغییر دهید؟ یا اگر می خواهید جهت حرکت یک عنصر را تغییر دهید؟ اگر بخواهید کل افکت را تغییر دهید و عناصر موجود در تصویرتان کاری کاملا متفاوت انجام دهند، چه؟

شما باید تصویر یا نماد را از ابتدا بازسازی کنید. هر تغییری مستلزم این است که وارد ویرایشگر گرافیکی شوید و با فریم ها و یک رابط کاربری مبتنی بر فریم کار کنید. این برای توسعه دهندگان شکنجه است و برای ما که این ویرایشگرها را به اندازه کافی نمی شناسیم تا بتوانیم آن تغییرات را انجام دهیم، ماموریت غیرممکن است.

با SVG، ایجاد هرگونه تغییر در انیمیشن(ها) تنها چند خط کد است.

نتیجه گیری (دیدگاه توسعه دهنده):

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

اندازه فایل، زمان بارگذاری صفحه و آمپر؛ عملکرد

در قسمت قبل به ارائه خود انیمیشن پرداختیم. در این مقاله می‌خواهم عملکرد کلی صفحه و نحوه تأثیرگذاری آن توسط انتخاب‌های قالب تصویری که انجام می‌دهید را روشن کنم.

واقعیت: هرچه اندازه فایل بزرگتر باشد، تأثیر منفی بر زمان بارگذاری و عملکرد صفحه بیشتر می شود. با در نظر گرفتن این موضوع، بیایید ببینیم که چگونه استفاده از SVG به جای GIF می‌تواند به بهبود زمان بارگذاری کلی صفحه با نگاه کردن به یک مثال کاربردی‌تر در دنیای واقعی کمک کند.

در اولین صحبتم در مورد SVG 18 ماه پیش، به این اشاره کردم که چگونه می توان از SVG برای جایگزینی GIF های متحرک استفاده کرد و منجر به عملکرد کلی صفحه بهتر شد. در این گفتگو، من یک نمونه واقعی از یک صفحه وب واقعی را ارائه کردم که از آنچه SVG ارائه می دهد استفاده کرد و از مزایای آن بهره برد: صفحه اصلی Sprout.

صفحه اصلی Sprout دارای دو تصویر متحرک است که در ابتدا به صورت GIF ایجاد و نمایش داده شدند. دو سال پیش قلعه مایک مقاله ای در وبلاگ Oak نوشت و توضیح داد که چگونه آنها GIF های متحرک، به ویژه نمودار GIF (تصویر زیر را ببینید) به عنوان یک تصویر SVG متحرک بازسازی کردند.

مایک در مقاله خود بینش های جالبی را در مورد عملکرد صفحه جدید خود در نتیجه انتقال به SVG به اشتراک می گذارد:

این نمودار و یک انیمیشن دیگر Sprout در اصل GIF بودند. با استفاده از SVG های متحرک به جای GIF، ما توانستیم اندازه صفحه خود را کاهش دهیم از 1.6 مگابایت تا 389 کیلوبایتو زمان بارگذاری صفحه ما را کاهش دهید از 8.75 ثانیه تا 412 میلی ثانیه. این یک تفاوت بزرگ است.

— قلعه مایک، “فایل های SVG متحرک: تسهیل و زمان بندی سفارشی”

واقعاً یک تفاوت بزرگ

نمودار Sprout یک کاندید مناسب برای SVG است. هیچ دلیلی برای متحرک سازی آن با تبدیل انیمیشن به GIF وجود ندارد در حالی که SVG می تواند مزایای بسیار بیشتری به همراه داشته باشد.

جیک آرچیبالد همچنین به قدرت انیمیشن های SVG پی برد و از آنها برای ایجاد و انیمیشن سازی تصاویر تعاملی برای تکمیل مقالات خود استفاده کرد. مقاله کتاب آشپزی آفلاین او یک نمونه عالی (و به هر حال یک مقاله عالی) است. آیا او می توانست از GIF برای این کار استفاده کند؟ مطمئناً اما با توجه به تعداد تصاویری که او استفاده کرد، GIF ها می توانستند به راحتی حجم کل صفحه را به یک یا چند مگابایت برسانند، با هر GIF حداقل صدها کیلوبایت. با توجه به آن وزن کل صفحه وب در حال حاضر تنها 128 کیلوبایت است همه تصاویر SVG تعبیه شده، زیرا می توانید از عناصر در SVG مجددا استفاده کنید، بنابراین هر عنصر تکراری نه تنها کل صفحه gzip را بسیار بسیار بهتر می کند، بلکه برای هر صفحه اندازه کلی SVG کوچکتر می شود.

در حال حاضر که قابل توجه است

من پایان نامه خود را در مورد بارگذاری صفحه و عملکرد در اینجا به پایان خواهم رساند. اما همچنان مهم است که توجه داشته باشید که وجود دارد می تواند استثنا باشند باز هم، در بیشتر موارد احتمالاً متوجه خواهید شد که SVG بهتر از GIF است، اما همیشه باید آزمایش کنید.

نتیجه گیری:

GIF	SVG متحرک
تصاویر GIF معمولاً از نظر اندازه بزرگتر از تصاویر SVG با انیمیشن های اضافه شده به آنها هستند. این بر اندازه کلی صفحه، زمان بارگذاری و عملکرد تأثیر منفی می گذارد.	تصاویر SVG را می توان مورد استفاده و استفاده مجدد قرار داد، و بهتر با gzip فشرده می شوند، بنابراین اندازه فایل آنها به طور کلی کوچکتر از GIF است، بنابراین زمان بارگذاری صفحه و عملکرد بهبود می یابد.

پشتیبانی از مرورگر

احتمالاً تنها مزیت مطلق GIF ها نسبت به SVG پشتیبانی از مرورگر است. GIF ها تقریباً در همه جا کار می کنند، در حالی که پشتیبانی SVG کمتر جهانی است. در حالی که ما راه‌های زیادی برای ارائه نسخه بازگشتی برای مرورگرهای پشتیبانی‌نشده داریم – و پشتیبانی فعلی مرورگر نباید مانع استفاده کسی از SVG شود، تصاویر بازگشتی اگر به‌صورت PNG یا JPG ارائه شوند، ثابت خواهند بود و هیچ انیمیشنی ندارند.

البته، همیشه می‌توانید یک GIF را به‌عنوان یک نسخه جایگزین برای SVG ارائه دهید، اما باید ملاحظات و معایب ذکر شده در بالا را در نظر داشته باشید.

نتیجه گیری:

GIF	SVG متحرک
GIF ها تقریبا در همه جا کار می کنند.	تصاویر SVG پشتیبانی کمتری از مرورگر جهانی دارند، اما راه‌های زیادی برای ارائه نسخه‌های بازگشتی برای مرورگرهای پشتیبانی‌نشده وجود دارد.

نگرانی‌های دسترسی (#a11y)

چیزی را به یک صفحه یا هر جایی برای آن موضوع منتقل کنید، و بلافاصله یک حواس‌پرتی اضافه کرده‌اید – چیزی که مطمئناً به محض شروع به پیمایش توجه کاربر را جلب می‌کند. این دقیقاً نحوه عملکرد مغز انسان است. این نیز یکی از دلایلی است که چرا تبلیغات بنری بسیار روی انیمیشن متمرکز شده اند – و با تمرکز زیادی روی انیمیشن ساخته می شوند. دلیل تبلیغات بنری متحرک نیز همین است فوق العاده آزار دهنده. آنها حواس پرتی را پرت می کنند، به خصوص زمانی که سعی می کنید کاری را در صفحه ای که به توجه کامل شما نیاز دارد، انجام دهید، مانند خواندن یک مقاله.

حالا صفحه ای را با مجموعه ای از آیکون ها (یا تصاویر) متحرک تصور کنید که هر کاری که انجام می دهید، متحرک سازی متوقف نمی شود. ما دیگر در مورد یک یا دو تصویر در یک صفحه اصلی یا در یک مقاله صحبت نمی کنیم. ما در مورد عناصر و کنترل‌های رابط کاربری و نمادهای کوچک‌تر صحبت می‌کنیم که احتمالاً در مکان‌های مختلف یک صفحه و در چندین صفحه وجود دارند. مگر اینکه نماد شما اینطور نباشد فرض شده است یک انیمیشن بی پایان باشد – برای مثال، اگر یک انیمیشن در حال چرخش در طول مرحله انتظار کاربر غیرفعال باشد، احتمالاً مشکلی ایجاد می کند و بیشتر آزاردهنده می شود تا یک “چیز خوب”.

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

وال هد، طراح و مشاور انیمیشن‌های وب، در مقاله‌اش طراحی انیمیشن وب ایمن‌تر برای حساسیت حرکتی، تأثیرات استفاده بیش از حد از انیمیشن‌های وب روی افراد مبتلا به اختلالات دهلیزی ناشی از بصری را مورد بحث قرار می‌دهد (تاکید من):

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

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

حالا تصور کنید که اگر انیمیشن انجام می شد نه پایان… دو هوم.

مقاله Val این مشکل را با جزئیات بیشتری توضیح می دهد زیرا او بازخوردهایی را از دو نفر که واقعاً این مشکلات را دارند جمع آوری می کند و تجربیات خود را در مورد انیمیشن در مثال های مختلف به اشتراک می گذارد.

یکی از راه‌حل‌هایی که می‌تواند به جلوگیری از این مشکلات کمک کند این است که به کاربر توانایی کنترل انیمیشن را بدهیم تا وقتی که حواس‌پرتی ایجاد می‌شود، آن را متوقف کند.

با SVG می توانید این کار را انجام دهید. می‌توانید انیمیشن را کاملاً کنترل کنید و آن را یک یا دو بار در بارگذاری صفحه پخش کنید – اگر واقعاً نیاز دارید که به محض ورود کاربر به صفحه شما آن را پخش کنید و سپس آن را در شناور برای tween‌های بعدی تنها با استفاده از چند خط CSS یا جاوا اسکریپت فعال کنید. برای ایجاد یک انیمیشن آیکون به صدها یا هزاران خط CSS یا جاوا اسکریپت نیاز ندارید.، مگر اینکه نماد شما یک صحنه واقعا پیچیده با اجزای زیادی باشد که در داخل آن متحرک هستند. اما من فکر می کنم در این مورد دیگر به عنوان یک “آیکون” به حساب نمی آید، بلکه یک تصویر ساده است.

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

یا می توانید یک جابجایی اضافه کنید تا به کاربر توانایی توقف پخش بی پایان انیمیشن را بدهد. شما نمی توانید این کار را با GIF انجام دهید … مگر اینکه تصمیم بگیرید که GIF را با یک تصویر ایستا در یک عمل تعویض خاص جایگزین کنید.

حتی ممکن است برخی استدلال کنند که می‌توانید یک نسخه ثابت از تصویر را نمایش دهید – مانند یک PNG برای مثال – و سپس نسخه GIF را در حالت شناور رندر کنید. اما این خود با چند مشکل همراه است:

• اگر تصاویر جاسازی شده باشند، باید آن تصاویر را با استفاده از جاوا اسکریپت جایگزین کنید. اگر از SVG استفاده می کنید این عمل نیازی به جاوا اسکریپت ندارد.
• اگر تصاویر تصاویر پیش زمینه هستند (از طریق HTML تعبیه شده اند ، و باید آن تصاویر را جایگزین کنید، در نهایت برای هر تصویر دو برابر درخواست HTTP خواهید داشت. و اگر آنها تصاویر پس‌زمینه تعبیه‌شده در شیوه نامه باشند (که توصیه نمی‌شود)، تصاویر (مخصوصاً GIF) به اندازه صفحه سبک و در نتیجه به کل زمان مسدود شدن رندر صفحه اضافه می‌شوند.
• اگر/زمانی که منابع تصویر را در حالت انتظار تغییر دهید، در اتصالات کندتر فلاش قابل توجهی بین تصاویر اول و دوم وجود دارد. اتصال من کند است. گاهی اوقات 3G کند است، و من هنوز نمونه ای را به خاطر نمی آورم که در آن تصویری با ماوس، تغییر اندازه درگاه دید یا هر چیز دیگری جایگزین شده باشد و من آن سوسو زدن را ندیده باشم. این وضعیت زمانی بدتر می‌شود که تصویر دوم (یک GIF بارگذاری‌شده در حالت انتظار) از نظر اندازه نسبتاً بزرگ باشد – یک فلاش و به دنبال آن یک انیمیشن آهسته و ژولیده از GIF در هنگام بارگیری کامل وجود خواهد داشت. این هرگز جذاب نیست.

بنابراین بله، می‌توانید منابع تصویر را برای کنترل پخش شدن انیمیشن GIF تغییر دهید، اما کنترل دقیق‌تری بر GIF از دست می‌دهید و بر تجربه کاربر با رابط کاربری تأثیر می‌گذارید.

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

چندین تصویر برای پشتیبانی، چندین درخواست HTTP، و یک راه حل کلی هک و غیربهینه برای آنچه که به راحتی با یک تصویر SVG قابل انجام است.

• جاسازی از یکی تصویر SVG در صفحه.
• هرطور که می خواهید/نیاز دارید انیمیشن بسازید. (یا قبل از جاسازی تصویر، انیمیشن را ایجاد کنید.)
• پخش، مکث، کنترل انیمیشن. و کاربر را قادر می سازد تا آن را کنترل کند.

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

نتیجه گیری:

GIF	SVG متحرک
تصاویر GIF نمی توانند توسط کاربر بدون نیاز به تصاویر اضافی و درخواست های HTTP اضافی متوقف شوند. و سپس کنترل کامل نیست.	انیمیشن های SVG را می توان به طور کامل سفارشی کرد تا کاربر بتواند بدون نیاز به رویکردهای هک، آنها را فعال، غیرفعال و کنترل کند.

دسترسی به محتوا

GIF	SVG متحرک
تصاویر GIF به اندازه تصاویر PNG و JPEG قابل دسترسی هستند – با استفاده از عکس مناسب alt مقدار ویژگی برای توصیف آنها. محتوای موجود در تصویر را نمی توان تشخیص داد یا مستقیماً در دسترس خوانندگان صفحه نمایش فراتر از آنچه توصیف کلی تصویر انجام می دهد، قرار داد.	تصاویر SVG و همچنین معنایی قابل دسترسی هستند. محتوای موجود در تصویر متحرک را نیز می‌توان با استفاده از عناصر دسترسی داخلی SVG توصیف کرد و در دسترس خوانندگان صفحه نمایش قرار داد و با استفاده از نقش‌ها و ویژگی‌های ARIA بهبود یافت. (شما می توانید همه چیز در مورد ایجاد SVG در دسترس را در اینجا بخوانید.)

تعامل

چیز زیادی برای اضافه کردن در اینجا وجود ندارد، به جز این واقعیت که می توانید با عناصر جداگانه در SVG، در حین، قبل یا بعد از انیمیشن تعامل داشته باشید، اما با GIF این امکان وجود ندارد. بنابراین اگر از GIF استفاده می‌کنید، توانایی انجام هر کاری جز شروع یا توقف انیمیشن را از دست می‌دهید، و حتی آن‌ها در واقع در داخل SVG انجام نمی‌شوند، همانطور که دیدیم، بلکه با تعویض GIF با یک جایگزین ثابت به دست می‌آیند. حتی تغییر رنگ عناصر در GIF به تصاویر اضافی برای انجام این کار نیاز دارد. یکی دیگر از مزایای استفاده از SVG نسبت به GIF است.

نتیجه گیری:

GIF	SVG متحرک
انیمیشن های تعریف شده در تصاویر GIF نمی توانند تعاملی باشند. شما نمی توانید با عناصر منفرد در یک عنصر GIF تعامل داشته باشید و همچنین نمی توانید از عناصر جداگانه پیوند ایجاد کنید.	محتوای SVG کاملا تعاملی است. می توانید فعل و انفعالات نگه دارید و کلیک کنید (و بیشتر) که عناصر تکی در تصویر SVG می توانند به آنها واکنش نشان دهند.

انیمیشن های واکنش گرا و تطبیقی

توانایی متحرک سازی SVG مستقیماً از کد، و همچنین دستکاری بسیاری از ویژگی های آن، منجر به ایجاد مزیت دیگری نسبت به انیمیشن های مبتنی بر GIF می شود: توانایی ایجاد انیمیشن های واکنش گرا، واکنش گرا و کارآمد بدون افزودن درخواست های اضافی HTTP، با استفاده از چند خط کد، و با اندازه فایل های بسیار کوچکتر.

سارا دراسنر مقاله ای در مجله Smashing نوشت که در آن روش های مختلف برای متحرک سازی SVG Sprites را نشان می داد. یکی از این راه ها این است که چندین “صحنه” در SVG داشته باشید، آنها را با CSS متحرک کنید، و سپس “ظاهر” SVG را تغییر دهید – با تغییر مقدار viewBox ویژگی – برای نمایش یک صحنه در یک زمان، بسته به اندازه نمای فعلی و فضای صفحه موجود.

اگر می‌خواهید همان انیمیشن را با استفاده از تصاویر GIF ایجاد کنید، قابلیت‌های کنترل انیمیشن را از دست می‌دهید و همچنین به چندین تصویر نیاز خواهید داشت که احتمالاً (از نظر اندازه فایل) بزرگتر از یک تصویر SVG است.

اما اگر نمی‌خواهید کد SVG را متحرک کنید، همیشه می‌توانید یک SVG sprite ایجاد کنید و آن را به روشی که هر فرمت تصویر دیگری را متحرک کنید، متحرک کنید. steps() و چند خط CSS. سارا نیز در مقاله خود در مورد این تکنیک صحبت می کند. متحرک سازی تصاویر SVG لازم نیست پیچیده باشد و به طور کلی موثر است.

نتیجه گیری:

GIF	SVG متحرک
با توجه به اینکه محتوای GIF را نمی‌توان با کد کنترل کرد، نمی‌توان انیمیشن‌ها را بدون توسل به تصاویر منفرد سازگار کرد یا به تغییرات نمای یا زمینه واکنش نشان داد.	با توجه به اینکه محتوای SVG را می توان مستقیماً با استفاده از کد متحرک کرد، محتوا و همچنین انیمیشن های آن را می توان برای تناسب و/یا سازگاری با اندازه ها و زمینه های مختلف دید بدون نیاز به متوسل شدن به دارایی های اضافی تغییر داد.

کلمات پایانی

گیف‌ها از مرورگرهای بسیار خوبی پشتیبانی می‌کنند، بله، اما مزایای SVG تقریباً از همه جنبه‌ها بیشتر از آنهاست. ممکن است استثناهایی وجود داشته باشد، و در این موارد، به هر طریقی از GIF یا فرمت تصویر دیگری استفاده کنید که عملکرد بهتری نسبت به SVG دارد. حتی می توانید از Video یا HTML5 Canvas یا چیز دیگری استفاده کنید.

SVG می تواند مزایای عملکردی زیادی را در مقایسه با سایر فرمت های تصویر، به ویژه GIF به ارمغان بیاورد.

بنابراین، با توجه به تمام موارد فوق، توصیه می‌کنم هر جا که می‌توان از SVG برای انیمیشن استفاده کرد، از GIF اجتناب شود. مطمئناً می‌توانید توصیه‌های من را نادیده بگیرید، اما از مزایای بسیاری که انیمیشن‌های SVG ارائه می‌دهند چشم‌پوشی خواهید کرد.

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

چند منبع برای کمک به شما برای شروع کار با انیمیشن های SVG:

---

امیدوارم این مقاله برای شما مفید بوده باشد.

ممنون که خواندید.

از Jake Archibald برای بررسی و بازخوردش در مورد مقاله و از Chris Lilley برای بازخوردش در مورد شفافیت GIF بسیار سپاسگزاریم. بدون بازخورد آنها به این اندازه جامع (بخوانید: به طرز مضحکی طولانی) نخواهد بود. ^^