কোনও উচ্চ রেজোলিউশন পিএনজি, জেপিজি বা জিআইএফ এর চেয়ে এসভিজি চিত্রগুলি কী আরও ভাল মাপানো দেখায়?

Question

আমি জানি যে আপনি যদি কোনও চিত্র স্কেল আপ করতে চান তবে একটি এসভিজি হ'ল বুদ্ধিমান পছন্দ।

তবে আমার পরিস্থিতি হ'ল আমার কাছে আইকন রয়েছে যা আমি চাই যে ব্যবহারকারীরা কোনও সিএমএসের মাধ্যমে আপলোড করতে সক্ষম হন to এসভিজিগুলি তৈরি করা ঠিক ততটাই কৌশলযুক্ত এবং তাই jpg, gif বা png অ্যাডমিনদের আদর্শ ফর্ম্যাট বলে মনে হয়।

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

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

Comments

একটি ভাল প্রশ্ন তবে আমি বিশ্বাস করি উত্তরটি "এটি ব্রাউজারের উপর নির্ভর করে"।

— usr2564301

Answer 1

(দ্রষ্টব্য: দয়া করে ওপিটির নিজস্ব উত্তরটি এর আগে পড়ুন, যেহেতু আমার উত্তরটি ওপি'র তদন্ত সম্পর্কিত মন্তব্য)

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

এই সমস্যাটি নিয়ে স্ট্যাক ওভারফ্লোতে বেশ কয়েকটি থ্রেড রয়েছে। তাদের মধ্যে একটি এখানে রয়েছে:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

আমি আইপড টাচ সাফারি তে একই সমস্যার কোনও রেফারেন্স খুঁজে পাইনি তবে সম্ভবত এটি এক্সট্রোপোলেট এবং সমস্যাটি একই বলে ধরে নেওয়া নিরাপদ।

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

Comments

ওয়েবেকিট-ব্যাকফেস-দৃশ্যমানতা যুক্ত করা: গোপনের অর্থ হ'ল নন-এসভিজগুলি আইপডে এসভিজেএসের মতো একইভাবে ঝাপসা হয়ে যায়, এবং এটি আমার প্রশ্নের উত্তর দেয় - অর্থাত্ যখন স্কেলিংয়ের সময় অন্যটির উপরে কোনও বাছাই করার দরকার নেই। অদ্ভুতভাবে অ্যান্ড্রয়েড ফিক্সটি আমার সংস্করণে অ্যান্ড্রয়েড ক্রোম / নেটিভ ব্রোসওয়ারে রেন্ডারিং আচরণকে মানক করে না বলে মনে হয়, তবে এটি একটি আলাদা সমস্যা। আপনার সাহায্যের জন্য ধন্যবাদ.

— রিচার্ড বি

Answer 2

আমি সবেমাত্র একটি পরীক্ষা চালিয়েছি এবং কেবলমাত্র মোবাইল ব্রাউজারগুলিতেই পার্থক্য দেখা যাচ্ছে।

আমি টুইটার আইকনটির একটি 990 x 900px চিত্র তৈরি করেছি (সেই আইকনটি খুব ভাল স্কেলিংয়ের জন্য একটি নকশাকৃত ডিজাইন বলে মনে হচ্ছে, এই পরীক্ষার জন্য খুব ভাল)। আমি এটি এসভিজি, জেপিজি, জিআইএফ, স্বচ্ছ জিআইএফ (কেবল পাখির আকার, কোনও পটভূমির রঙ নয়, পরিবর্তে এটি সিএসএসের সাথে যুক্ত করে), পিএনজি, স্বচ্ছ পিএনজি হিসাবে সংরক্ষণ করেছি।

আমি এরপরে এগুলি সঙ্কুচিত করে 15px, 25px, 50px, 100px এবং 150px এ নিয়েছি।

ফায়ারফক্সে ফলাফল এখানে:

ক্রোমে ফলাফলগুলি এখানে:

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

যাইহোক, একটি আইপড টাচ সাফারি ব্রাউজারে, এসভিজি সংস্করণটি বেশ ঝাপসা লাগছে এবং অন্যরা বেশ পিক্সেলটেড:

অনুরূপ ফলাফল অ্যান্ড্রয়েড ক্রোমেও দেখা যায়। আমি এর স্ক্রিনশট নিই নি।

আমি ভাবছি যদি এর কারণটি পিক্সেল ঘনত্বের সাথে কিছু করতে পারে, যা প্রদর্শনের মূল পার্থক্য, যদিও এটি কেবলমাত্র এসভিজি চিত্রের চেয়ে সমস্ত চিত্র মোবাইলে হ্যান্ডেল করা হলে আমার কাছে আরও বেশি বোঝা যায়।

যদি কেউ ব্যাখ্যা করতে পারে যে কেন এটি হয় তবে আমি গৃহীত উত্তর টিকটি স্থানান্তর করব। অন্যথায়, আমি টিএল অনুমান করি; ডিআর উত্তরটি হ'ল এটি নির্ভর করে যে আপনি যদি ঝাপসা বা পিক্সেলিটেড আইকন পছন্দ করেন (বা আপনার প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলির জন্য পিক্সেল নিখুঁত আকারে প্রচুর আইকন তৈরি করতে পারেন)।

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

Comments

এসভিজি প্রদর্শন সময় প্রদর্শিত হয় এবং এএ থেকে উপকার পেতে পারে, অন্যরা স্থির রেজোলিউশন হয় এবং তাদের কেবলমাত্র এএ থাকতে পারে 2x রেন্ডার করে; আবছা; এবং হ্রাস করুন, যা "ডিজাইনারিং" পরিস্থিতি ব্যতীত সত্যই সহায়তা করবে না। এসভিজির জন্য, একটি নির্দিষ্ট এএ পদ্ধতি (যেমন বোর্ডের সহজ 4x এফএসএএ জুড়ে) অত্যধিক আক্রমণাত্মক হতে চলেছে যখন আপনার কেবল 8px প্রস্থ থাকবে এবং ডাউন-স্যাম্পলিংয়ের ফলে সর্বদা কিছুটা অস্পষ্টতা দেখা দেয়।

— ইয়োরিক

মনে রাখবেন যে স্কেলিং এবং পুনরায় মডেলিংয়ের ধরণটি সফ্টওয়্যার বাস্তবায়ন নির্ভর। বেশিরভাগ গুণমানের পরিবর্তে "দ্রুত" বা "ভারসাম্যবান" হন।

— ইয়োরিক

Answer 3

ভেক্টর চিত্র এবং বিটম্যাপ চিত্রগুলির মধ্যে একটি খুব গুরুত্বপূর্ণ পার্থক্য রয়েছে। ভেক্টর চিত্রগুলি, যদি আমরা কিছুটা সহজ করি তবে ক্লায়েন্ট দ্বারা রেন্ডার করা হয় যখন বিটম্যাপ চিত্রগুলি আপনার দ্বারা রেন্ডার করা হচ্ছে।

এর অর্থ হল যে চিত্রটি আপনার প্রেরণ করতে পাঠানো হয়েছে তাতে এটি কীভাবে আচরণ করে সে সম্পর্কে আরও বেশি বলা আছে। শেষ ফলাফলটি হ'ল আপনার নিম্নোক্ত উত্সাহগুলি রয়েছে :

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

অন্যদিকে এর কিছু সুবিধা রয়েছে:

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

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

কোনটা ভাল

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

তৃতীয় বিকল্প আছে।

ফলাফলের সাথে সন্তুষ্ট না থাকলে আপনি নিজের রেন্ডারিং ইঞ্জিনটি সর্বদা চেষ্টা করতে পারেন। প্ল্যাটফর্মগুলির সাথে যা ওয়েবগেলকে সমর্থন করে can একটি উদাহরণের জন্য এখানে দেখুন । তবে এটি বেশ কঠোর এবং এটি প্রয়োগের বিশদটি আপনাকে সংরক্ষণ করে না।

Answer 4

(সরাসরি রিচার্ড বি এর উত্তর সম্পর্কে মন্তব্য করার পর্যাপ্ত পয়েন্ট নেই।)

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

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

Comments

কারণ হিসাবে বোধ করে। যদিও লজ্জা এসভিজিতে অন্য চিত্রের ধরণের সাথে সামঞ্জস্য নেই বলে মনে হয়।

— রিচার্ড বি

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

— ব্রেক