6 সাধারণ SVG ব্যর্থ (এবং কিভাবে তাদের ঠিক করবেন)

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

কিন্তু কখনও কখনও, আমরা এমনকি আমাদের SVG গুলি দেখতে পাই না। এই ক্ষেত্রে, ছয়টি নির্দিষ্ট জিনিস আছে যা আমি ডিবাগ করার সময় খুঁজছি।

1. দ্য viewBox মূল্যবোধ

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

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

এই ঠিক করার সবচেয়ে সহজ উপায়? যোগ করুন overflow="visible" SVG-তে, তা আমাদের স্টাইলশীটেই হোক না কেন, ইনলাইনে style বৈশিষ্ট্য বা সরাসরি একটি SVG উপস্থাপনা বৈশিষ্ট্য হিসাবে। কিন্তু আমরাও যদি একটি প্রয়োগ করি background-color SVG-এর কাছে বা এর আশেপাশে আমাদের অন্যান্য উপাদান থাকলে, জিনিসগুলি কিছুটা বন্ধ দেখাতে পারে। এই ক্ষেত্রে, সেরা বিকল্পটি সম্পাদনা করা হবে viewBox সমন্বয় সিস্টেমের সেই অংশটি দেখানোর জন্য যা লুকানো ছিল:

সম্পর্কে কিছু অতিরিক্ত জিনিস আছে viewBox আমরা বিষয়ের উপর থাকাকালীন যা কভার করার যোগ্য:

কিকরে viewBox কাজ?

SVG হল একটি অসীম ক্যানভাস, কিন্তু আমরা ভিউপোর্ট এবং viewBox.

সার্জারির ভিউপোর্ট অসীম ক্যানভাসে একটি উইন্ডো ফ্রেম। এর মাত্রা দ্বারা সংজ্ঞায়িত করা হয় width এবং height গুণাবলী, বা সংশ্লিষ্ট সঙ্গে CSS width এবং height বৈশিষ্ট্য আমরা যেকোন দৈর্ঘ্যের একক নির্দিষ্ট করতে পারি, কিন্তু আমরা যদি এককবিহীন সংখ্যা প্রদান করি, তাহলে সেগুলি পিক্সেলে ডিফল্ট হয়।

সার্জারির viewBox চারটি মান দ্বারা সংজ্ঞায়িত করা হয়। প্রথম দুটি হল উপরের-বাম কোণে শুরুর বিন্দু (x এবং y মান, ঋণাত্মক সংখ্যা অনুমোদিত)। আমি ইমেজ reframe এই সম্পাদনা করছি. শেষ দুটি হল ভিউপোর্টের অভ্যন্তরে স্থানাঙ্ক ব্যবস্থার প্রস্থ এবং উচ্চতা — এখানেই আমরা গ্রিডের স্কেল সম্পাদনা করতে পারি (যা আমরা এই বিভাগে প্রবেশ করব জুম বাড়ানো).

এখানে SVG দেখানো সরলীকৃত মার্কআপ viewBox এবং width এবং height বৈশিষ্ট্য উভয় সেট <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

রিফ্রেমিং

আমার স্নাতকের:

<svg viewBox="0 0 700 700">

…এর মানচিত্র:

<svg viewBox="start-x-axis start-y-axis width height">

আমরা যে ভিউপোর্ট দেখতে পাই তা যেখানে শুরু হয় 0 x-অক্ষে এবং 0 y-অক্ষে মিলিত হয়।

এটি পরিবর্তন করে:

<svg viewBox="0 0 700 700">

…এতে:

<svg viewBox="300 200 700 700">

…প্রস্থ এবং উচ্চতা একই থাকে (700 প্রতিটি ইউনিট) কিন্তু স্থানাঙ্ক ব্যবস্থার শুরু এখন এ 300 x-অক্ষের উপর বিন্দু এবং 200 y-অক্ষের উপর।

নিম্নলিখিত ভিডিওতে আমি একটি লাল যোগ করছি <circle> SVG এর কেন্দ্রে 300 x-অক্ষের উপর বিন্দু এবং 200 y-অক্ষের উপর। কিভাবে পরিবর্তন লক্ষ্য করুন viewBox একই মানগুলির স্থানাঙ্কগুলি ফ্রেমের উপরের-বাম কোণে বৃত্তের অবস্থান পরিবর্তন করে যখন SVG এর রেন্ডার করা আকার একই থাকে (700×700) আমি যা করেছি সব ছিল "রিফ্রেম" সঙ্গে জিনিস viewBox.

জুম বাড়ানো

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

আসুন দেখি ইলাস্ট্রেটরে কি হয় যখন আমরা এই প্যারামিটারগুলি পরিবর্তন করি। আর্টবোর্ড হল viewport যা একটি সাদা 700px বর্গ দ্বারা প্রতিনিধিত্ব করা হয়। এই এলাকার বাইরে অন্য সব কিছু আমাদের অসীম SVG ক্যানভাস এবং ডিফল্টরূপে ক্লিপ করা হয়।

নীচের চিত্র 1 এ একটি নীল বিন্দু দেখায় 900 x-অক্ষ বরাবর এবং 900 y-অক্ষ বরাবর। আমি যদি শেষ দুটি পরিবর্তন করি viewBox থেকে মান 700 থেকে 900 এটার মত:

<svg viewBox="300 200 900 900" width="700" height="700">

…তারপর নীল বিন্দুটি প্রায় সম্পূর্ণরূপে ফিরে এসেছে, যেমনটি নীচের চিত্র 2-এ দেখা গেছে। আমাদের ছবিটি ছোট করা হয়েছে কারণ আমরা ভিউবক্সের মান বাড়িয়েছি, কিন্তু SVG-এর প্রকৃত প্রস্থ এবং উচ্চতার মাত্রা একই রয়ে গেছে এবং নীল বিন্দুটি ক্লিপ করা জায়গার কাছাকাছি ফিরে এসেছে।

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

2. অনুপস্থিত width এবং height

ইনলাইন এসভিজি ডিবাগ করার সময় আমি আরেকটি সাধারণ জিনিস দেখি তা হল মার্কআপে রয়েছে কিনা width or height গুণাবলী অনেক ক্ষেত্রে এটি কোন বড় ব্যাপার নয় যদি না SVG পরম পজিশনিং বা একটি নমনীয় কন্টেইনারের ভিতরে থাকে (যেমন Safari SVG কম্পিউট করে width সঙ্গে মান 0px পরিবর্তে auto) বাদ দিয়ে width or height এই ক্ষেত্রে আমাদের সম্পূর্ণ চিত্র দেখতে বাধা দেয়, যেমনটি আমরা দেখতে পাচ্ছি এই CodePen ডেমো খোলা হচ্ছে এবং এটি ক্রোম, সাফারি এবং ফায়ারফক্সে তুলনা করা (বড় দৃশ্যের জন্য চিত্রগুলিতে আলতো চাপুন)।

সমাধান? একটি প্রস্থ বা উচ্চতা যোগ করুন, একটি উপস্থাপনা বৈশিষ্ট্য হিসাবে, শৈলী বৈশিষ্ট্যে ইনলাইন, বা CSS হিসাবে। নিজে থেকে উচ্চতা ব্যবহার করা এড়িয়ে চলুন, বিশেষ করে যখন এটি সেট করা হয় 100% or auto. আরেকটি সমাধান হল অধিকার সেট করুন এবং বাম মান.

আপনি সঙ্গে খেলা করতে পারেন নিম্নলিখিত পেন এবং বিভিন্ন বিকল্প একত্রিত করুন।

3. অসাবধানতা fill এবং stroke রং

এমনও হতে পারে যে আমরা রঙ প্রয়োগ করছি <svg> ট্যাগ, সেটা ইনলাইন স্টাইল হোক বা CSS থেকে আসছে। এটি ঠিক আছে, তবে মার্কআপ বা শৈলী জুড়ে অন্যান্য রঙের মান থাকতে পারে যা রঙ সেটের সাথে বিরোধপূর্ণ <svg>, যার ফলে অংশগুলি অদৃশ্য হয়ে যায়।

সেজন্য আমি খুঁজতে ঝোঁক fill এবং stroke SVG এর মার্কআপে বৈশিষ্ট্যগুলি এবং সেগুলি মুছে ফেলুন৷ নিচের ভিডিওটি লাল রঙের সাথে CSS-এ স্টাইল করা একটি SVG দেখায় fill. এমন কয়েকটি দৃষ্টান্ত রয়েছে যেখানে SVG-এর অংশগুলি মার্কআপে সরাসরি সাদা রঙে ভরা হয় যা আমি হারিয়ে যাওয়া অংশগুলি প্রকাশ করতে সরিয়ে দিয়েছি।

4. অনুপস্থিত আইডি

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

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

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

সুতরাং, আমি বলব এটি একটি কোড এডিটরে একটি রপ্তানি করা SVG ফাইল খোলার এবং জিনিসগুলি অদলবদল করার আগে এটির সাথে তুলনা করা মূল্যবান। ইলাস্ট্রেটর, ফিগমা এবং স্কেচের মতো অ্যাপগুলি স্মার্ট, কিন্তু এর মানে এই নয় যে আমরা সেগুলি যাচাই করার জন্য দায়ী নই৷

5. ক্লিপিং এবং মাস্কিং জন্য চেকলিস্ট

যদি একটি SVG অপ্রত্যাশিতভাবে ক্লিপ করা হয় এবং viewBox ঠিক আছে চেক আউট, আমি সাধারণত জন্য CSS তাকান clip-path or mask বৈশিষ্ট্য যা চিত্রের সাথে হস্তক্ষেপ করতে পারে। এটি ইনলাইন মার্কআপের দিকে নজর রাখা লোভনীয়, তবে এটি মনে রাখা ভাল যে একটি SVG এর স্টাইলিং অন্য কোথাও ঘটতে পারে।

CSS ক্লিপিং এবং মাস্কিং আমাদের একটি ছবি বা উপাদানের অংশ "লুকাতে" অনুমতি দিন। এসভিজিতে, <clipPath> একটি ভেক্টর অপারেশন যা অর্ধেক ফলাফল ছাড়াই একটি চিত্রের কিছু অংশ কেটে দেয়। দ্য <mask> ট্যাগ হল একটি পিক্সেল অপারেশন যা স্বচ্ছতা, আধা-স্বচ্ছতা প্রভাব এবং ঝাপসা প্রান্তগুলিকে অনুমতি দেয়।

এটি ডিবাগিং কেসগুলির জন্য একটি ছোট চেকলিস্ট যেখানে ক্লিপিং এবং মাস্কিং জড়িত:

• নিশ্চিত করুন ক্লিপিং পাথ (বা মাস্ক) এবং গ্রাফিক একে অপরকে ওভারল্যাপ করে। ওভারল্যাপিং অংশগুলি যা প্রদর্শিত হয়।
• আপনার যদি একটি জটিল পাথ থাকে যা আপনার গ্রাফিককে ছেদ করছে না, তাহলে রূপান্তরগুলি মেলে না হওয়া পর্যন্ত প্রয়োগ করার চেষ্টা করুন৷
• আপনি এখনও DevTools দিয়ে ভিতরের কোড পরিদর্শন করতে পারেন যদিও <clipPath> or <mask> রেন্ডার করা হয় না, তাই এটি ব্যবহার করুন!
• ভিতরে মার্কআপ কপি করুন <clipPath> এবং <mask> এবং বন্ধ করার আগে পেস্ট করুন </svg> ট্যাগ তারপর একটি যোগ করুন fill সেই আকারগুলিতে এবং SVG-এর স্থানাঙ্ক এবং মাত্রাগুলি পরীক্ষা করুন৷ আপনি যদি এখনও ছবিটি দেখতে না পান তবে যোগ করার চেষ্টা করুন overflow="hidden" থেকে <svg> ট্যাগ।
• পরীক্ষা করুন যে অনন্য আইডি জন্য ব্যবহার করা হয় <clipPath> or <mask>, এবং একই আইডি ক্লিপ করা বা মাস্ক করা আকার বা আকারের গ্রুপে প্রয়োগ করা হয়। একটি অমিল আইডি চেহারা ভেঙ্গে যাবে.
• এর মধ্যে মার্কআপে টাইপ করার জন্য পরীক্ষা করুন <clipPath> or <mask> ট্যাগ.
• fill, stroke, opacity, বা কিছু অন্যান্য শৈলী ভিতরে উপাদান প্রয়োগ <clipPath> অকেজো — একমাত্র দরকারী অংশ হল সেই উপাদানগুলির ভরাট-অঞ্চলের জ্যামিতি। সেজন্য যদি আপনি একটি ব্যবহার করেন <polyline> এটি একটি হিসাবে আচরণ করবে <polygon> এবং যদি আপনি একটি ব্যবহার করেন <line> আপনি কোন ক্লিপিং প্রভাব দেখতে পাবেন না.
• আবেদন করার পর যদি আপনি আপনার ছবি দেখতে না পান <mask>, নিশ্চিত করুন যে fill মাস্কিং বিষয়বস্তু সম্পূর্ণরূপে কালো নয়. মাস্কিং উপাদানের উজ্জ্বলতা চূড়ান্ত গ্রাফিকের অস্বচ্ছতা নির্ধারণ করে। আপনি উজ্জ্বল অংশগুলি দেখতে সক্ষম হবেন এবং গাঢ় অংশগুলি আপনার ছবির বিষয়বস্তু লুকিয়ে রাখবে৷

আপনি মুখোশযুক্ত এবং ক্লিপ করা উপাদানগুলির সাথে খেলতে পারেন এই কলম.

6. নামস্থান

আপনি কি জানেন যে SVG হল একটি XML-ভিত্তিক মার্কআপ ভাষা? আচ্ছা, এটা! SVG-এর জন্য নামস্থানে সেট করা আছে xmlns অ্যাট্রিবিউট:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

XML-এ নেমস্পেসিং সম্পর্কে অনেক কিছু জানার আছে এবং MDN-এর এটিতে একটি দুর্দান্ত প্রাইমার রয়েছে। বলাই যথেষ্ট, নামস্থান ব্রাউজারকে প্রসঙ্গ সরবরাহ করে, এটি জানিয়ে দেয় যে মার্কআপটি SVG-এর জন্য নির্দিষ্ট। ধারণাটি হল যে নামস্থানগুলি দ্বন্দ্ব প্রতিরোধ করতে সাহায্য করে যখন একই ফাইলে একাধিক ধরনের XML থাকে, যেমন SVG এবং XHTML। আধুনিক ব্রাউজারগুলিতে এটি একটি খুব কম সাধারণ সমস্যা তবে পুরানো ব্রাউজারগুলিতে বা Gecko-এর মতো ব্রাউজারগুলিতে SVG রেন্ডারিং সমস্যাগুলি ব্যাখ্যা করতে সাহায্য করতে পারে যা ডকটাইপ এবং নেমস্পেসগুলি সংজ্ঞায়িত করার সময় কঠোর।

SVG 2 স্পেসিফিকেশন নামস্থানের প্রয়োজন নেই HTML সিনট্যাক্স ব্যবহার করার সময়। কিন্তু এটা অত্যন্ত গুরুত্বপূর্ণ যদি লিগ্যাসি ব্রাউজারগুলির জন্য সমর্থন একটি অগ্রাধিকার হয় — প্লাস, এটি যোগ করার জন্য এটি কিছু ক্ষতি করে না। এই ভাবে, যখন <html> উপাদান এর xmlns বৈশিষ্ট্য সংজ্ঞায়িত করা হয়েছে, এটি সেই বিরল ক্ষেত্রে বিরোধ করবে না।

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

এটি CSS-এ ইনলাইন SVG ব্যবহার করার সময়ও সত্য, যেমন এটি একটি ব্যাকগ্রাউন্ড ইমেজ হিসেবে সেট করা। নিম্নলিখিত উদাহরণে, সফল যাচাইকরণের পরে ইনপুটে একটি চেকমার্ক আইকন প্রদর্শিত হবে। এই CSS এর মত দেখাচ্ছে:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

যখন আমরা ব্যাকগ্রাউন্ড প্রপার্টিতে SVG-এর ভিতরে নামস্থানটি সরিয়ে ফেলি, তখন ছবিটি অদৃশ্য হয়ে যায়:

আরেকটি সাধারণ নামস্থান উপসর্গ হল xlink:href. SVG-এর অন্যান্য অংশ যেমন: প্যাটার্ন, ফিল্টার, অ্যানিমেশন বা গ্রেডিয়েন্ট উল্লেখ করার সময় আমরা এটি অনেক বেশি ব্যবহার করি। সুপারিশ হল এটি দিয়ে প্রতিস্থাপন শুরু করা href যেহেতু অন্যটি SVG 2 থেকে অবহেলিত হচ্ছে, তবে পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যের সমস্যা থাকতে পারে। সেক্ষেত্রে আমরা উভয়ই ব্যবহার করতে পারি। শুধু নামস্থান অন্তর্ভুক্ত মনে রাখবেন xmlns:xlink="http://www.w3.org/1999/xlink" যদি আপনি এখনও ব্যবহার করেন xlink:href.

আপনার SVG দক্ষতা লেভেল আপ করুন!

আমি আশা করি এই টিপসগুলি আপনাকে অনেক সময় বাঁচাতে সাহায্য করবে যদি আপনি নিজেকে ভুলভাবে রেন্ডার করা ইনলাইন SVG এর সমস্যা সমাধান করতে পান। এই শুধু জিনিস আমি খুঁজছি. হতে পারে আপনার কাছে বিভিন্ন লাল পতাকা রয়েছে যা আপনি দেখেন — যদি তাই হয়, মন্তব্যে আমাকে বলুন!

নীচের লাইন হল যে এটি অন্তত একটি মৌলিক বোঝার আছে অর্থপ্রদান করে বিভিন্ন উপায়ে SVG ব্যবহার করা যেতে পারে. কোডপেন চ্যালেঞ্জ প্রায়ই SVG অন্তর্ভুক্ত করে এবং ভাল অনুশীলন অফার করে। লেভেল আপ করার জন্য এখানে আরও কয়েকটি সংস্থান রয়েছে:

SVG-সম্পর্কিত কল্যাণের জন্য আমি কিছু লোককে অনুসরণ করার পরামর্শ দিচ্ছি:

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• উত্স: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/