আধুনিক ওয়েব সাইটগুলিতে এসভিজি আইকন বনাম পিএনজি আইকন

Question

আমি ভাবছি কেন এত কম আধুনিক ওয়েব সাইট এখনও আইকনগুলির জন্য কেবল পিএনজি ব্যবহার করে (তবে এই ধারণাটি কেবল আমার পর্যবেক্ষণের ভিত্তিতে তৈরি)। আমি এখনও অবধি জানি, এসভিজির উপর পিএনজি ব্যবহারের মূল কারণগুলি হ'ল আই 8 এবং এসভিজি আরও সিপিইউ শক্তি ব্যবহার করে (তবে আমি বিশ্বাস করি না যে এটি সহজ 1K আইকনগুলির জন্য কোনও সমস্যা)। এসভিজিগুলি ব্যবহার করার ক্ষেত্রে আমি (এবং আমরা বর্তমানে ব্যবহার করি) অনেকগুলি সুবিধা দেখতে পাচ্ছি, হয় যখন এটি স্প্রাইট হিসাবে ব্যবহৃত হয়, চিত্র হিসাবে বা ইনলাইন এসভিজি হিসাবে।

(প্রশ্ন একটি গবেষণার সন্ধান করছে: পিএনজি স্প্রাইট বনাম এসভিজি স্প্রাইট বনাম আইকন ফন্টগুলির কার্যকারিতা উপর দৃষ্টি নিবদ্ধ করে এবং এর প্রাসঙ্গিক উত্তর নেই, আইকন ফন্ট বনাম এসভিজি ক্যাচিং এবং নেটওয়ার্ক উদ্বেগ নেটওয়ার্ক ট্র্যাফিকের উপর ফোকাস করে, তবে এটি উদাহরণস্বরূপ টেম্প্লেটিংয়ের মাধ্যমে সমাধানযোগ্য))

যদি নতুন ওয়েবসাইটটি কেবল আধুনিক ব্রাউজারগুলিকে সমর্থন করে তবে এসভিজি ব্যবহার না করার কোনও কারণ আছে (বা - আইকনগুলির জন্য পিএনজি ব্যবহার করার কোনও কারণ আছে)? আমরা যদি আই 8 এর বিষয়ে চিন্তা না করি এবং এসভিজি ব্যবহারকে টেম্প্লেট করে এবং / অথবা ক্যাশে সমর্থন করে তবে কেবল এসভিজির উপর নির্ভর করার জন্য কি কোনও ধরা আছে?

Comments

প্রিয় ভোটারগণ, আপনি কি দয়া করে আমাকে এই প্রশ্নটির ভিত্তিতে বিশেষত মতামত-ভিত্তিক কী জানতে চান, যেখানে আমি নির্দিষ্ট - প্রযুক্তিগত - কারণ জিজ্ঞাসা করেছি ? আমি এই ধরনের প্রতিক্রিয়া প্রশংসা করব, যাতে আমি আমার আরও প্রশ্ন উন্নত করতে পারেন।

— রবার্ট গোল্ডওইন

রবার্ট, এটি মতামত ভিত্তিক বলে মনে হচ্ছে না, তবে লোকেরা কখনও কখনও জম্বি মোডে চলে যায় এবং কেবল এগুলি না পড়ে প্রশ্নগুলি ফাঁকি দেয়।

— ব্রিগেন্ড

আমি সরলতার জন্য পিএনজি পছন্দ করি এবং একটি ক্লিনার ডিওএম। নীচের উত্তরগুলিতে যুক্ত করার জন্য একটি পয়েন্ট হ'ল এসভিজি দিয়ে আপনি গতিশীলভাবে রঙ পরিবর্তন করতে পারেন। যদি আইকনটিতে তিনটি রঙ থাকে: নিয়মিত, সক্রিয় ও হোভার, এটি 3 পিএনজি চিত্র তবে কেবল একটি এসভিজি।

— কোডটোড

@ রবার্ট [জুমবি মোড] দুর্দান্ত মানুষ :): ডি

— কিউমাস্টার

Answer 1

কারণগুলি এসভিজি একটি ভাল পছন্দ হতে পারে:

• এটি নির্বিঘ্নে যেকোন আকারের ব্রাউজারগুলিকে সমর্থন করে, বিশেষত CSS এর সাহায্যে background-size
• আপনি সেগুলি উপরে / ডাউন ইচ্ছাকে স্কেল করতে পারেন, যেমন একটি হোভার ইফেক্ট হিসাবে
• আপনি এসভিজিগুলি এম্বেড করতে এবং জাভাস্ক্রিপ্ট এবং ডিওএম দিয়ে তাদের সাথে রিয়েল-টাইম পরিবর্তন করতে পারেন
• আপনি এসভিজি এবং এসভিজির অংশগুলি সিএসএস সহ স্টাইল করতে পারেন (রঙ পরিবর্তন, রূপরেখা ইত্যাদি)
• আপনি ক্লায়েন্ট বা সার্ভারে গতিশীলভাবে এসভিজিগুলি তৈরি করতে পারেন। তাদের পাঠ্যভিত্তিক প্রকৃতির কারণে এগুলি তৈরি করার জন্য আপনার নিম্ন-স্তরের গ্রন্থাগার বা শক্তিশালী সার্ভারের প্রয়োজন নেই।

কারণগুলি পিএনজি একটি ভাল পছন্দ হতে পারে:

• ব্রাউজার সমর্থন
• পিএনজি স্প্রিটশিট তৈরির জন্য বিদ্যমান সরঞ্জামাদি
• বেশিরভাগ লোকের কম্পিউটারে একটি পিএনজি সামঞ্জস্যপূর্ণ সম্পাদক থাকে
• আপনার গ্রাফিক্স ফটোগুলি বা ইমেজ ভেক্টরাইজ করা অন্যান্য কঠিন

অন্যান্য উদ্বেগ:

• কিছু এসভিজি সম্পাদক আপনার এসভিজিতে মেটাডেটা সঞ্চয় করতে পারে, ফাইলের আকার বাড়ে এবং সম্ভবত অনিচ্ছাকৃতভাবে ডেটা প্রকাশ করে
  • উদাহরণস্বরূপ, আপনি যখন ইনকস্কেপে কোনও পিএনজি রফতানি করেন তখন এসভিজিতে এই ডিরেক্টরিটির পরম পাথটি সংরক্ষণ করে / যখন আপনি সংরক্ষণ করেন
  • এসভিজি সংকোচকারীরা এটি সরিয়ে ফেলতে পারে তবে আমি এটি পরীক্ষা করেছি না (যদি আপনার কাছে থাকে তবে নির্দ্বিধায়)

Comments

ধন্যবাদ, আমাদের গ্রাফিক ব্যক্তিরা ইলাস্ট্রেটারে এসভিজি তৈরি করে, এবং তারপরে এগুলি সম্পাদনা করুন, তাই এটি সাধারণত <svg> কয়েকটি উপাদান এবং বৈশিষ্ট্য সহ, তাই এই উদ্বেগগুলি নিঃশব্দ - আমার উদ্বেগটি ছিল যে আমি মারাত্মক কিছু উপেক্ষা করেছি, যেহেতু আমি প্রায় কেবলমাত্র সুবিধা দেখি ক্লাসিকাল পিএনজি-র উপরে - তবে এটি সম্ভবত সত্যিই <= IE8 বা> IE8 এ ফোটে। উদাহরণস্বরূপ, প্লাস সাইন সহ বৃত্ত সহ স্ট্যান্ডার্ড আইকনটি পিএনজির চেয়ে এসভিজিতে আরও কমপ্যাক্ট।

— রবার্ট গোল্ডওইন

হ্যাঁ, কিছু লোক তৃতীয় পক্ষগুলি থেকে তাদের এসভিজিগুলি পান এবং কোনও পাঠ্য সম্পাদককে এগুলি খোলেন না, বা তারা সংকুচিত হয়েছেন তা নিশ্চিত করে না। শুধু এটা ছেড়ে যেতে চান না। পিএনজির ক্ষেত্রে এখন একই সমস্যা রয়েছে যে আমি এটি সম্পর্কে চিন্তা করি; প্রায়শই অকেজো ডেটা (ওয়েবের প্রসঙ্গে) তাদের মধ্যে সংরক্ষণ করা হয়। এই ডেটাটি সম্পাদক, ফাইল ব্রাউজার এবং অন্যান্য প্রোগ্রাম দ্বারা ব্যবহৃত হয়। এটি (জেনারেল স্টোর ব্র্যান্ড, মডেল, লেন্স, সেটিংস ইত্যাদি) জেপিগের সাথে বেশি দেখা যায়।

— ব্রিগেন্ড

ধন্যবাদ, সুতরাং আমি অনুমান করি যে আমাদের প্রকল্পগুলিতে এসভিজি ব্যবহারের পক্ষে আসলেই কোনও অসুবিধা নেই এবং আমরা এগুলি আরও গভীরভাবে সংহত করব। আপনার অন্তর্দৃষ্টি জন্য আপনাকে ধন্যবাদ।

— রবার্ট গোল্ডওইন

ভেক্টর আইকনগুলির জন্য যাওয়ার সঠিক উপায় হ'ল আইকন ফন্টগুলি। আমার জন্য এসভিজি আইকনগুলির সাথে সবচেয়ে বড় অসুবিধা হ'ল, সিএসএসে ডেটা অ্যাট্রিবিউট IE10 / 11 এর জন্য কাজ করে না।

— গিফ্রিড

@ জিফ্রিড আইকন ফন্টগুলিতে অনেকগুলি অ্যাক্সেসযোগ্যতার সমস্যা রয়েছে। যখনই কোনও ব্যবহারকারী ওয়েব ফন্টগুলি ব্লক করার বা সমস্ত ফন্টকে তাদের নিজস্ব (যে কোনও কারণেই হোক না কেন) ওভাররাইড করার সিদ্ধান্ত নেওয়ার সাথে সাথে সমস্ত সুন্দর আইকন তত্ক্ষণাত্ ভেঙে যায়। ফলব্যাকস রয়েছে তবে আমি নিজে এখনও একটি 100% কাজের সমাধান দেখিনি। এসভিজি চিত্রগুলির ক্ষেত্রে এটি হয় না।

— tomasz86

Answer 2

আপনি যদি খুব সাধারণ আকার / নকশা প্রদর্শন না করেন বা অ্যাপ্লিকেশনটির সাথে গ্রাফিকের অংশগুলি বিশেষত পরিবর্তন করতে না চান তবে এসভিজি ব্যবহারের জন্য পুরোপুরি উত্সাহের প্রয়োজন নেই। আপনি মূল আকারের দ্বিগুণ (রেটিনা প্রদর্শনের জন্য) পিএনজি উত্পাদন করতে পারেন এবং ফাইলসাইজটি আরও ছোট আকারের ক্রম হতে পারে - লিগ্যাসি ব্রাউজারগুলির জন্য ভাল কভারেজের উল্লেখ না করা (জাভাস্ক্রিপ্ট বা পলিফিলের প্রয়োজন নেই)।

আমি ভেক্টর গ্রাফিক্সের সাথে ইউআই তৈরির এমন কেউ হিসাবে এটি বলছি। এটি দুর্দান্ত একটি ডিজাইনের সরঞ্জাম, তবে ডেলিভারি / ব্যান্ডউইথ / পৌঁছানোর জন্য শীর্ষে পিএনজিতে পৌঁছানো শক্ত। ঠিক গত রাতে আমি একটি পরিচিত লোগো পরীক্ষা করেছি tested কোকাকোলা.এসভিজি প্রায় 20K ছিল। যেহেতু এটি একটি শক্ত / সমতল রঙ ছিল আমি 12-রঙের প্যালেট সংকোচনের সাথে পিএনজি -8 হিসাবে রফতানি করেছি এবং এটি 1.6 কে (!!!) এ নামিয়েছি কেবলমাত্র কয়েকটি লোগোর জন্য এটি কোনও বড় বিষয় নয়, তবে যখন আপনাকে 40 দেখাতে হবে তাদের মধ্যে .. ভাল, আপনি ছবি পেতে।

সর্বোত্তম অংশটি হ'ল আপনি কোনও পিএনজিকে বেস 64 ডেটা ইউরিতে পরিণত করতে পারেন এবং এগুলি আপনার স্টাইলশীটে এম্বেড করতে পারেন। এটি এসভিজির সাথে প্রস্তাবিত নয় - এমন একটি ফর্ম্যাট যা ইতিমধ্যে কর্মক্ষমতা এবং সামঞ্জস্যতা ইস্যুগুলির জন্য বিখ্যাত, বিশেষত মোবাইল ব্রাউজারগুলিতে।

সমাপ্তিতে আমাকে বলতে হবে যে উভয়ের জন্য শক্তি এবং ব্যবহারের কেস রয়েছে তবে পিএনজি আরও অনেকগুলি ট্রেল জ্বলে উঠেছে এবং আপনি যখন স্রোতের সাথে যান তখন আপনার কম প্রতিরোধের মুখোমুখি হতে হয়। এসভিজি আরও ভাল ফিট করে এমন অদ্ভুত ক্ষেত্রে, আমি এই নিবন্ধটি এবং এই শেখার সংস্থানটির জন্য অত্যন্ত সুপারিশ করি

হ্যাপি ডিজাইনিং!

Comments

আইএমও, এটি সেরা উত্তর।

— মার্কো ডেমাইও

আপনি কোন কোকা কোলা লোগো নিয়ে কাজ করেছেন তা নির্দিষ্ট করে দেওয়া উচিত। 2007 এর বর্তমান লোগোটি খুব সাধারণ এবং 8KB এর কাছাকাছি । এটি এখনও পিএনজি -8 এর তুলনায় কিছুই নয়, তবে 20KB এর চেয়ে অনেক বেশি ভাল।

— কালেব টেলর

Answer 3

এসভিজি দুর্দান্ত (কীভাবে ফেকরাইনব্রিগ্যান্ড সুন্দরভাবে বর্ণনা করা হয়েছে) এবং সুন্দরভাবে রেন্ডার করে তবে বেশ জটিল হতে পারে। পিক্সেল ভিত্তিক চিত্রগুলির পরিবর্তে ভেক্টর ডেটা নিয়ে কাজ করার সময় একটি ব্রাউজারের আরও কাজ করতে হয়। একটি চিত্র একটি উপাদান, একটি এসভিজির অনেকগুলি বাচ্চা থাকতে পারে যা ইনলাইন ব্যবহার করার সময় এমনকি ডিওমে যুক্ত হতে পারে।

আমি কোনও মূল্যবান পারফরম্যান্স টেস্ট করিনি তবে যৌক্তিক দৃষ্টিকোণ থেকে এসভিজি সাবধানতার সাথে ব্যবহার করা উচিত যখন বিশেষত মধ্য বয়সী মোবাইল ব্রাউজারগুলি (সিপিইউ-স্ট্রেস) নিয়ে কাজ করার সময় পারফরম্যান্সের বিষয়টি আসে। একটি চার্ট পাওয়া খুব দরকারী হবে যেখানে আপনি বিভিন্ন অ্যান্ড্রয়েড এবং আইওএস ডিভাইসগুলিতে 100 এসভিজি চিত্র বনাম 100 পিএনজি চিত্র ব্যবহার করে সিপিইউ শক্তি দেখতে পাবেন ...

এসভিজির সাথে অন্য একটি বগিং জিনিসটি হ'ল যে কোনও ব্রাউজার এবং আমাদের ভাল পুরাতন আইই যাই হোক না কেন কিছু অ্যান্ড্রয়েড / স্যামসাংয়ের জন্য ট্যাগটির প্রস্থ এবং উচ্চতা বিশিষ্টতা প্রয়োজন। এবং বেশিরভাগ আধুনিক এসভিজি সম্পাদকরা এ *** ই ইলাস্ট্রেটারের মতো কেবল "ভিউবক্স" বৈশিষ্ট্য যুক্ত করে।

এসভিজি সম্পর্কে দুর্দান্ত জিনিসটি হ'ল এটি কোনও পিক্সেল ঘনত্বটিতে সুন্দর এবং খাস্তা দেয়।

Answer 4

এটি সত্য, png প্রায় সর্বত্র ব্যবহৃত হয়। আমি মনে করি কারণ এটি বেশিরভাগ ক্ষেত্রে এসভিজিটি বেশ অকেজো, চিত্রটি বড় হওয়া উচিত (আমি মনে করি) এবং যখনই আপনি এটি জুম করবেন তখন কম্পিউটারটিকে চিত্রটি পুনরায় তৈরি করতে হবে (কারণ আপনি সর্বদা চিত্রগুলি জুম করেন, তাই না ?) আমি মনে করি এটি সবচেয়ে গুরুত্বপূর্ণ কারণ।

Comments

এসভিজি হ'ল আইকনগুলির জন্য খুব দরকারী, যা আধুনিক (মোবাইল) ওয়েবসাইটগুলিতে সর্বব্যাপী। তারা কোনও মানের জরিমানা ছাড়াই স্কেলিং এবং সিএসএস-স্টাইলিং অফার করে, দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য পিএনজির সাথে উপস্থিত নেই।

— ব্যবহারকারী 1884155

ব্যবহারকারীর দৃষ্টিকোণ থেকে এটি অর্থহীন, তবে একটি মাল্টিমিডিয়া বিকাশকারী হিসাবে, কেবলমাত্র একটি ফাইল ব্যবহার করা দুর্দান্ত যে কোনও স্ক্রিনে ব্যবহার করা যেতে পারে এবং সর্বদা একই মানের সংরক্ষণ করবে।

— সেবাস্তিয়ান রোমেরো

Answer 5

আসুন লক্ষ্য করুন যে পারফরম্যান্সওয়ালি এসভিজি ভয়ঙ্কর হয়ে উঠতে পারে। এমনকি আধুনিক ব্রাউজারগুলিতে, ক্রোমের মতো (2019 এ এটি লিখছেন!) এসভিজি আইকনগুলির কয়েকটি 100 (প্রায় 3-800) সহ একটি সিএমএস-মতো পৃষ্ঠাটি রেন্ডারিং শেষ করতে ব্রাউজারকে আক্ষরিকভাবে 5+ সেকেন্ডের জন্য স্তব্ধ করে দেয়। ইতিমধ্যে সিপিইউ সর্বাধিক আউট করা হচ্ছে।

অন্য কোথাও উল্লিখিত হয়েছে, পৃষ্ঠাতে এমবেড হওয়া এসভিজির সংখ্যা বিস্তৃতভাবে ব্রাউজারে লোড বাড়িয়ে তোলে , তাই যদি আপনি এমন পরিস্থিতির মুখোমুখি হন

বিকল্প # 1: এসএলজিগুলিকে ওয়েবফন্টে রূপান্তর করুন (এখানে পারফর্মেন্স চার্ট দেখুন: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

বিকল্প # 2: সাধারণ পুরানো পিএনজিগুলিতে ফিরে যান

এ জাতীয় পরিস্থিতিতে আপনি কখনই অন-দ্য ফ্লাই কালার মডিফিকেশনের মতো কোনও অভিনব কাজ করতে চান না এবং আপনার এসভিজির অনেকগুলি উদাহরণ রয়েছে, পুরানো পিএনজি কাজটি করে এবং দিনটি বাঁচায়!

Comments

আমার মনে হয় না, এসভিজির আরও ভাল পারফরম্যান্স রয়েছে। এটি পড়তে সুপারিশ করবে: vecta.io/blog/compering-svg-and-png-file-sizes

— হ্যারি সরশোগ