কিভাবে ব্যাকগ্রাউন্ড হিসেবে এসভিজি প্যাটার্ন ব্যবহার করবেন

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

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

আপনি যা শিখবেন

এই টিউটোরিয়ালটি ভিডিও এবং পাঠ্য দুই ভাবেই পাবেন- আপনি যা শিখবেন তা সংক্ষেপে নিচে দেয়া হলো:

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

স্ক্রিনকাস্টটি দেখুন

১। সিএসএস টাইলিং

এবার চলুন সিএসএস টাইলিং দিয়ে শুরু করি যা কোন ব্যাকগ্রাউন্ড এর জন্য ইমেজ পুনরাবৃত্তি করার একটি প্রচলিত পদ্ধতি। আইডিয়াটি বেশ সহজ: আমরা কাঙ্খিত এলিমেন্টের background প্রপার্টির ভেতর দিয়ে একটি ইউআরএল পাস করব। ইউআরএলটি হবে একটি ইমেজ ফাইল, এই ক্ষেত্রে PNG ফাইল। ডিফল্টরূপে আমাদের ইমেজটি উভয় অক্ষ বরাবর পুনরাবৃত্ত হবে।

body {
    background: url("cuadros.png");
}

এটা যেমন দেখাবে:

২। SVG প্যাটার্নস

চলুন এবার দেখে নেই SVG প্যাটার্ন কি–এটা এমন একটি বিষয়, যা প্রথম প্রথম বুঝতে বেশ কষ্ট হবে। We’ll begin by hand-coding an example.

হাতে কোড করা SVG

নতুনদের জন্য কিভাবে একটি SVG এর বিভিন্ন অংশ কোড করতে হয়, তা জানতে কেয ব্র্যাসির এই টিউটোরিয়াল দুটি বেশ সহায়তা করবে:

একটি SVG দিয়ে শুরু করা

শুরুতে, আমরা একটি এসভিজি এলিমেন্ট তৈরি করবো, এবং এটার উচ্চতা ও দৈর্ঘ্য ১০০% দিবো ফলে এটা যে কন্টেইনারেই স্থাপন করা হোক না কেন তার সম্পূর্ণটাই দখল করে রাখবে।

<svg width="100%" height="100%">
    
</svg>

pattern তৈরি করতে আমাদেরকে এটা svg এর defs(definitions) সেকশনে স্থাপন করতে হবে, যেমন:

<svg width="100%" height="100%">
    <defs>
        <pattern>
            
        </pattern>
    </defs>
</svg>

চলুন, এবার প্যাটার্ন এলিমেন্টে কিছু বৈশিষ্ট্য বা অ্যাট্রিবিউট যোগ করি। আমরা এটাকে একটি ID দিবো যাতে পরবর্তীতে এটার রেফারেন্স দিতে পারি, তারপর X এবং Y কোঅরডিনেটস, দৈর্ঘ্য এবং উচ্চতার মান, এবং patternUnits কে userSpaceOnUse দ্বারা বিবৃত করবো (এটা দিয়ে আসলে কোঅরডিনেটস সিস্টেম সংজ্ঞায়িত করা হয়, যা আপনি MDN থেকে আরও জানতে পারেন):

<svg width="100%" height="100%">
    <defs>
        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
            
        </pattern>
    </defs>
</svg>

এই প্যারামিটারগুলো সেটআপ করার পর, আমরা নির্দিষ্ট ইমেজটি সংজ্ঞায়িত করবো যা পুনরাবৃত্ত হবে। চলুন এবার একটি বেসিক সার্কেল বা বৃত্ত তৈরি করি:

<svg width="100%" height="100%">
    <defs>
        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
            
            <circle fill="#bee9e8" cx="50" cy="50" r="25">
            </circle>
            
        </pattern>
    </defs>
</svg>

এখনও কোনও প্যাটার্ন দেখা যাবে না, কারন আমরা এটা মাত্রই এটা সংজ্ঞায়িত করলাম তাই আসলে এখনও কোনও কিছুর উপর প্রয়োগ করিনি। চলুন, এবার এটা <defs> এর বাইরে একটি <rect> এ প্রয়োগ করি।

<svg width="100%" height="100%">
    <defs>
        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
            
            <circle fill="#bee9e8" cx="50" cy="50" r="25">
            </circle>
            
        </pattern>
    </defs>
    
    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect>
</svg>

চূড়ান্তরূপে, আপনি fill অ্যাট্রিবিউটটি দেখতে পাবেন (যা হয়তোবা একটি রঙের মান অথবা নাম হতে পারে) যা আমাদের নতুন সংজ্ঞায়িত করা প্যাটার্নের ইউআরএল এর আইডি হিসেবে ব্যবহার করা হবে: fill="url(#polka-dots)"

নিচের ডেমোটি চেক করুন:

আরও জটিল SVG প্যাটার্ন

আরও জটিল উদাহরনের জন্য আমরা হাতে কোড না করে একটি থার্ড পার্টি টুলের মাধ্যমে একটি প্যাটার্ন জেনারেট করতে পারি। আমরা heropatterns.com ব্যবহার করবো, এটা এমন একটি ওয়েবসাইট যা দিয়ে আপনি প্রিডিফাইন এসভিজি প্যাটার্ন সিলেক্ট করতে পারবেন, এগুলো রঙ এবং বৈশিষ্ট্য পরিবর্তন করুন, তারপর জেনারেট হওয়া কোডটি কপি করলেই হবে।

আমি এবার জিগসো প্যাটার্ন ব্যবহার করতে যাচ্ছি:

জেনারেট হওয়া সম্পূর্ণ সিএসএস কপি করার পরিবর্তে আমি কেবল d="" প্যারামিটারটি কপি করবো, যা আসলে মূল প্যাটার্নটি।

যেই এসভিজি কোডটি সেটআপ করবো তা আসলে ঠিক আগের উদাহরনের মতই। <pattern> এর ভিতরের আইডিটি অবশ্যই আলাদা হবে, এবং এটার জন্য আমরা হেরোপ্যাটার্নস থেকে কিছুটা ভিন্ন মাত্রা বা ডাইমেনশন নির্ধারণ করবো।

তাই, যেখানে আমাদের আগের উদাহরনে আমরা <circle> সংজ্ঞায়িত করেছি, এখন আমরা একটি <path> সংজ্ঞায়িত করবো। আমরা এটাকে একটি ভরাট রঙ দিবো, তারপর আমরা একটু আগে কপি করা পাথটি পেস্ট করবো। ফলাফলটি দেখতে এমন হবে:

৩। সিএসএস টাইলিং বনাম এস ভিজি প্যাটার্নস

সিএসএস স্টাইলিং এর সুবিধা:

ব্যবহার করার সহজ বিশেষ করে অনভিজ্ঞদের জন্য
অসংখ্য ব্রাউজার সাপোর্ট

😡 সিএসএস পাইলিংয়ের অসুবিধা:

বিটম্যাপে স্ক্যালাবল নয়।
নিম্নমানের পারফরম্যান্স
কাস্টমাইজ করা বেশ কঠিন
চতুর্ভুজ পুনরাবৃত্তি তে সীমিত

😀 এস পি জি প্যাটার্ন এর সুবিধা

লাইটওয়েট
সিএসএস থেকে কাস্টমাইজ করা যায়
স্ক্যালাবল
জটিল প্যাটার্ন তৈরি করতে সক্ষম

😡 এভিজি প্যাটার্নের অসুবিধা

ব্যবহার করা বেশ কঠিন
নন ইউনিভার্সাল ব্রাউজার সাপোর্ট

৪। এসভিজি প্যাটার্ন টুলস

এই চারটি রিসোর্স দেখুন, এগুলো আইডিয়া অনুযায়ী কোড জেনারেট করার জন্য সত্যিই অসাধারণ!

৫। ব্রাউজার সাপোর্ট

SVG একটি ব্যাপকভাবে সমর্থিত প্রযুক্তি, এমনকি IE9 এর মত পুরোনো ব্রাউজারেও। যদিও বেশ কিছু SVG ফিচার এতটা সাপোর্ট পায় নি, এবং pattern প্রোপার্টির বেশ কিছু নির্দিষ্ট প্রোপার্টি (যেমন, patternUnits, patternContentUnits, patternTransform) এর জন্য খুব বেশি তথ্য আসলে নেই। মজিলা-ডকুমেন্টেসহ বেশ কিছু দরকারী লিঙ্কে নীচে দেয়া হয়েছে, যা থেকে আপনি বর্তমানে উপলব্ধ তথ্য সম্পর্কে একটি ধারনা পাবেন।

আমার অভিজ্ঞতা থেকে এটুকু বলতে পারি যে, উইন্ডোজ এবং ম্যাকওএসের সব ব্রাউজারেই SVG প্যাটার্ন সমূহ সুন্দরভাবে দেখা যায়। এমনকি IE11 এর নিচেও।

পরিসমাপ্তি

চলুন এই টিউটোরিয়ালের মূল বিষয়গুলো মিলিয়ে দেখি।

SVG প্যাটার্ন দিয়ে পুনরাবৃত্তিমূলক ব্যাকগ্রাউন্ড তৈরি করা যায়।
এটা হচ্ছে সিএসএস টাইলিংয়ের একটি টেকসই ও কাস্টমাইজেবল বিকল্প।
এগুলোর সিনট্যাক্স (যদি বিস্তারিত হয়) বেশ সহজ। defs এর ভিতর আপনার প্যাটার্ন সংজ্ঞায়িত করুন, একটি ID দিন, তারপর এই ID দিয়ে আপনার পছন্দমত শেপ তৈরি করুন।
এইভাবে SVG প্যাটার্ন তৈরি করার অনেক সুবিধা আছে।

আরও জানুন

কেয ব্র্যাসির লিখিত কিভাবে SVG কোড করবেন
কেয ব্র্যাসির SVG ভিউপোর্ট এবং ভিউবক্স (একেবারে নতুনদের জন্য)
সিএসএস ট্রিক্সের SVG প্যাটার্নস
SVG ব্রাউজার সাপোর্ট
SVG প্যাটার্নস MDN Web Docs
<pattern> MDN Web Docs