হাতেকলমে এসভিজি

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

Final product image — What You'll Be Creating

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

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

এই টিউটোরিয়ালে আমরা হাতেকলমে SVG কোড করার সবগুলো উপায়ই দেখবো, কিন্তু আমি আপনাকে খালি বক্তৃতা দ্বারা বিরক্ত করবো না যা প্রাসঙ্গিক শেইপ ও অ্যাট্রিবিউটসমূহ বোঝা আরও কঠিন করে তুলবে। তার পরিবর্তে আপনি এই টিউটোরিয়ালে হাতে কলমে অনুশীলনের মাধ্যমে ছয়টি আইকন তৈরি করতে শিখবেন যা চাইলে টিউটোরিয়ালের শুরুতে (অনলাইন ডেমো) থেকে চেক করে দেখতে পারেন। এই প্রক্রিয়ায়, আপনি হাতে কলমে SVG তৈরির জন্য প্রয়োজনীয় সমস্ত মৌলিক উপাদানগুলি ব্যবহার করবেন।

এই মৌলিক উপাদানগুলো নিয়ে কথা বলার আগে, চলুন এগুলোর প্রত্যেকটির সঙ্গে আগে পরিচিত হওয়া যাক।

বেসিক SVG উপাদানসমূহ

SVG নিয়ে কাজ করা আপনার কাছে বেশ জটিল মনে হতে পারে, তবে এগুলো আমরা যেসব আইকন তৈরি করতে যাচ্ছি তার জন্য প্রযোজ্য নয়। নিচের লিস্টে আমাদের প্রয়োজনীয় মূল উপাদানগুলো দেয়া হলো।

<svg> দিয়ে সম্পূর্ণ গ্রাফিক তৈরি ও সংজ্ঞায়িত করা হয়। <svg> দিয়ে একটি সম্পূর্ণ স্কেলেবল ভেক্টর গ্রাফিক বোঝানো হয়, যেখানে <html> উপাদান দিয়ে সম্পূর্ণ ওয়েব পাতাকে বোঝানো হয়।
<line> একক সোজা রেখা তৈরি করে।
<polyline> কর্তিত লাইন তৈরি করে।
<rect> আয়তক্ষেত্র এবং চতুর্ভুজ তৈরি করে।
<ellipse> বৃত্ত এবং ডিম্বাকৃতি তৈরি করে।
<polygon> সরাসরি পার্শ্বযুক্ত আকৃতি, বা ত্রিপার্শ্ব বা এর বেশি পার্শ্বযুক্ত আকৃতি তৈরি করে।
<path> দিয়ে পয়েন্ট এবং লাইন ব্যবহার করে যেকোনো শেইপ তৈরি করা যায়।
<defs> ব্যবহার করে পুনঃব্যবহারযোগ্য এসেটগুলো সংজ্ঞায়িত করা হয়। <defs>সেকশনের ভিতর কোনকিছু স্থাপন করলে তা দেখা যায় না।<defs> স্কেলেবল ভেক্টর গ্রাফিকের এমন একটি উপাদান যেমন ওয়েব পেজে <head> উপাদান।
<g> দিয়ে কয়েকটি আকৃতিকে একটি গ্রুপে রাখা হয়। <defs> সেকশনে কোনও গ্রুপ রাখলে সেগুলো একাধিকবার ব্যবহার করা যায়।
<symbol> গ্রুপের মতই, কিন্তু এর সাথে কিছু অতিরিক্ত ফিচার আছে। সাধারণত <defs> সেকশনে ব্যবহার করা হয়।
<use> ব্যবহার করে <defs> সেকশনে সংজ্ঞায়িত বিভিন্ন এসেট SVG হিসেবে প্রদর্শন করা হয়

আমরা আমাদের আইকন তৈরি করার প্রক্রিয়ায়, উপরে উল্লিখিত এই উপাদানের তালিকাটি নিয়ে কাজ করবো।

স্টার্টার ফাইলসমূহ

শুরু করার আগে, GitHub repo থেকে স্টার্টার ফাইলগুলোর একটি কপি নামিয়ে নিন। আপনি চাইলে একটি .zip ফাইল, অথবা আপনার নিজস্ব সিস্টেমে রিপোটি ক্লোন করে নিতে পারেন।

আমরা একটি ডকুমেন্ট নিয়ে শুরু করতে যাচ্ছি যাতে কিছু মৌলিক HTML এবং CSS ইতিমধ্যেই আছে। এটা আমাদের তৈরি করা SVG গুলোতে কিছু স্টাইলিং যোগ করবে এবং পৃষ্ঠায় একটি ছোট বর্গযুক্ত গ্রিড সিস্টেম সেটআপ করবে। এই গ্রিডের মধ্যেই আমরা আমাদের আইকনগুলো তৈরি করবো, এবং আশা করি এটা আপনাকে আপনার SVG গুলো সঠিকভাবে তৈরি ও প্রদর্শন করতে সাহায্য করবে।

যখন আপনি "স্টার্টার ফাইল" ফোল্ডার থেকে “handcodedsvg.html” ফাইলটি খুলবেন তখন নিচের মত কিছু একটা দেখতে পাবেন:

এক নজরে `x` এবং `y` এর মান

ওয়েবসাইটের দ্বিমাত্রিক আঙ্গিকে কাজ করার সময় আনুভূমিক অক্ষের প্রতিনিধিত্ব করবে x এবং উল্লম্ব অক্ষের প্রতিনিধিত্ব করবে y। এই অক্ষগুলোর প্রত্যেকটির অবস্থান সংখ্যা দ্বারা নির্ণয় করা হয়। আমরা যদি কোনও বস্তুকে ডানদিকে নিতে চাই, তবে x এর মান বাড়াতে হবে, এবং বামদিকে নিতে হলে x এর মান কমাতে হবে। অনুরূপভাবে, কোনও বস্তু নিচের দিকে সরানোর জন্য আমরা y মান বৃদ্ধি করবো, এবং কোনও বস্তু উপরে উঠাতে আমরা y মান হ্রাস করবো।

একটি নির্দিষ্ট বস্তু কোন কোন বিন্দুতে আছে তা নির্ণয়ের সহজ পদ্ধতি হচ্ছে x এবং y এর মান একত্রে বর্ণনা করা। অর্থাৎ বস্তুটির একক অবস্থানের মান হবে (x, y)। উদাহরণস্বরূপ, x অক্ষের 10 একটি বিন্দু থাকলে এবং y অক্ষের 50 এ আরেকটি বিন্দু থাকলে সেটা লিখিত হবে (10, 50) রূপে। আমি এই ছোট হাতের পদ্ধতিটি মাঝে মাঝে এই টিউটোরিয়ালে ব্যবহার করবো।

আমাদের গ্রিডের গাড় দুটি লাইনের দিকে লক্ষ্য করেছেন কি? আমরা আমাদের SVG স্থাপন করার পর, উপরের বামদিকে তারা পরষ্পরে ছেদ করে। এবং, ছেদ হওয়া বিন্দু দুটির SVG তে অবস্থান যথাক্রমে x = 0 এবং y = 0, অথবা (0,0)।

ব্যাকগ্রাউন্ড গ্রিড

হালকা গ্রিড লাইনের প্রতিটি দিয়ে 10px বুঝানো হয়, এবং মাঝারি বেধ রেখা দিয়ে 100px বুঝানো হয়। তাই যদি আমরা একটি বস্তুকে একটি মাঝারি বেধ লাইন থেকে তার পরবর্তীতে সরিয়ে নিতে চাই, তাহলে আমরা 100px দ্বারা y অক্ষের উপর তার অবস্থান বৃদ্ধি করবো।

যদিও বিষয়টা এখনও কিছুটা অস্পষ্ট মনে হতে পারে, তবে চিন্তিত হবেন না। যখন আমরা হাতে কলমে SVG আইকন তৈরি করতে যাবো, তখন এই বিষয়টি আরও পরিষ্কার হবে।

ডিফল্ট SVG স্টাইলিং

লক্ষ্য করুন যে, স্টার্টার HTML ফাইলে কিছু ডিফল্ট স্টাইলিংসহ CSS যোগ করে আমরা SVG আইকনসমূহ তৈরি করতে পারি:

svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

এটা আমাদের আইকনের জন্য 5px মোটা কালো স্ট্রোক লাইন তৈরি করবে, যাতে কোনও ভরাট রং থাকবে না। এছাড়াও স্ট্রোক লাইনের ধার এবং সংযোগগুলো গোলাকার ক্যাপযুক্ত থাকবে।

১। SVG সেটআপ করা

যেকোনো SVG তৈরি করার প্রথম ধাপ <svg></svg> এলিমেন্টের মাঝে তা রাখা। এই ট্যাগদ্বয়ের মাঝে আপনার নির্দিষ্ট কোডটি স্থাপন করতে হবে। এখানে বেশ কিছু এট্রিবিউট আছে যা আপনি ব্যবহার করতে পারেন, কিন্তু আমরা এই প্রক্রিয়াটি সহজ রাখতে চাই। এবং শুধুমাত্র width এবং height ব্যবহার করবো।

আপনার HTML ডকুমেন্টের <body> সেকশনে নিম্নোক্ত কোডটি যুক্ত করুন:

<svg width="750" height="500">

</svg>

দ্রষ্টব্য: এই সিএসএস টি আমাদের SVG ফাইলটিকে 100px পরিমাণ নিচের দিকে সরিয়ে দিবে। তাই এটার উপরের দিকের কর্নারটি ব্যাকগ্রাউন্ড গ্রিডের গাড় লাইনের মধ্যে স্থাপিত হবে। এবং কোডপেন ডেমোর মধ্যে থাকা মানগুলো কিছুটা এদিক সেদিক হতে পারে, কিন্তু এগুলো আপনার ইচ্ছেমত বসাতে পারেন।

২। “Left Align” আইকন তৈরি করুন

চলুন, এবার <line> এলিমেন্ট ব্যবহার করে আমরা এখন বাঁ দিক থেকে সমান্তরাল একটি আইকন তৈরি করি:

এই লাইন এলিমেন্টে চারটি এট্রিবিউট আছে যা আপনাকে ব্যবহার করতে হবে:

x1 হচ্ছে লাইনের অনুভূমিক শুরুর বিন্দু
y1 হচ্ছে লাইনের উল্লম্ব শুরুর বিন্দু
x2 লাইনের আনুভূমিক শেষের বিন্দু
y2 হচ্ছে লাইনের উল্লম্ব শেষ বিন্দু

সংক্ষিপ্তভাবে, আপনি লাইনের শুরুতে x1 এবং y1 এট্রিবিউট ব্যবহার করতে পারেন। এবং লাইনের শেষে x2 এবং y2 এট্রিবিউট ব্যবহার করতে পারেন।

চলুন, এবার আমাদের আইকনের প্রথম লাইনটি তৈরি করি। আমরা আমাদের লাইনটিকে 45px লম্বা করবো এবং 5px স্ট্রোক বা মোটা করবো। এবং লাইনের চারপাশে কিছু অতিরিক্ত পিক্সেল যোগ করবো। যেহেতু, এখন আমাদের লাইনের জন্য ডানদিকে 3px অফসেট তৈরি করতে হবে যাতে স্ট্রোকের কারণে কোনও অতিরিক্ত পিক্সেল তৈরি না হয়।

এই কারণে, আমরা আমাদের লাইনটি x অক্ষের 3 থেকে শুরু করতে যাচ্ছি এবং y অক্ষেরও 3 থেকে। আমরা এই লাইনটি (3,3) থেকে শুরু করতে পারি x1="3" y1="3" এট্রিবিউট ব্যবহার করে।

আমরা আমাদের লাইনটি 45px লম্বা করতে চাই, তাই আমরা আমাদের x অক্ষের 3 থেকে শুরু করে 45 যোগ করবো, ফলে x2 এর জন্য 48 মান বসাতে পারি। আমরা অনুভূমিক অক্ষের উপর একই অবস্থানে লাইনটি শেষ করতে চাই, তাই আমরা y2 এর সমান 3 সেট করব, যেমন আমরা y1 এ একই মান ঠিক করেছি। আমরা এটিকে (48,3) লাইনের শেষ বিন্দুতে এট্রিবিউট যুক্ত করবো x2="48" y2="3"।

প্রথম লাইনের জন্য সম্পূর্ণ কোডটি এমন হবে:

<line x1="3" y1="3" x2="48" y2="3"></line>

আপনার ব্রাউজার প্রিভিউ চেক করুন এবং আপনি সুন্দর বৃত্তাকার প্রান্ত-বিন্দু সহ 45px লম্বা কালো একটি লাইন দেখতে পাবেন।

এখন আমরা আরেকটু অগ্রসর হয়ে আমাদের আইকনের পরবর্তী তিনটি লাইন যুক্ত করতে পারি। আমরা সাকুল্যে চারটি লাইন তৈরি করবো। প্রথম এবং তৃতীয়টি 45px লম্বা হবে, এবং দ্বিতীয় এবং চতুর্থটি 62px লম্বা হবে। আমরা একই সাথে প্রতিটি লাইনের মাঝখানে 16px খালি যায়গা রাখবো।

আমরা নিম্নলিখিত কোডের মাধ্যমে এটি অর্জন করতে পারি:

<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>

দ্রষ্টব্য: প্রতিটি লাইনের y মানগুলি ক্রমান্বয়ে 16px বর্ধিত হবে যাতে করে প্রয়োজনীয় উল্লম্ব ফাঁক তৈরি হয়।

আপনার ব্রাউজারের পূর্বরূপ দেখুন এবং আপনি চারটি লাইন দেখতে পাবেন। আপনি সরাসরি এই পেন থেকে SVG সম্পাদনা করতে পারেন:

আপনার আইকনসমূহ মন্তব্য আকারে প্রকাশ করুন

কোডের এই জায়গায়, আপনার প্রথম আইকনটি ইতিমধ্যেই তৈরি করা হয়ে গেছে। এবার আমরা পরবর্তী আইকনটি তৈরি করতে যাচ্ছি, এবং আমরা এটাকে গ্রিডের একই অবস্থানে তৈরি করবো, কিন্তু এখন বাম দিকে সমান্তরাল আইকনটি তৈরি হওয়ার পথে। এখন আমরা নির্দিষ্ট কমেন্টের মাধ্যমে আইকনসমূহ চিহ্নিত করবো এবং অতিরিক্ত জায়গাগুলো মুছে ফেলবো। আমরা পরবর্তীতে ফিরে আসবো যখন আমরা আমাদের আইকনসমূহকে পুনরায় ব্যবহার যোগ্য এসেটে রুপান্তর করবো।

প্রত্যেকটি আইকনের জন্য আপনাকে একই কাজ করতে হবে, তৈরি করার পর এটার জন্য নির্দিষ্ট কমেণ্ট তৈরি করুন। আর এ জন্যই কোডের উপরে একটি ছোট্ট নোট যোগ করা বেশ ভালো। তাহলে আপনি সহজেই পরবর্তীতে নির্দিষ্ট কোডটি শনাক্ত করতে পারবেন।

৩। একটি “Right Caret” আইকন তৈরি করুন

এই আইকনের জন্য আমরা <line> এলিমেণ্টের পরবর্তী সংস্করণটি ব্যবহার করবো: তা হচ্ছে <polyline>। এটা আমরা ডানপাশের তীর আইকন তৈরি করতে ব্যবহার করবো।

<polyline> এলিমেন্টে শুধুমাত্র একটি অ্যাট্রিবিউট বা বৈশিষ্ট আছে: তা হচ্ছে points। এখানে আপনি একটি পয়েন্ট সিরিজ তৈরি করতে জোড় সংখ্যা বসাতে পারেন। লাইনগুলো স্বয়ংক্রিয়ভাবে তাদের মধ্যে আঁকা হয়ে যাবে। জোড় সংখ্যাগুলো points অ্যাট্রিবিউটের মধ্যে একটার পর আরেকটা সাজানো থাকবে। কমা দিয়ে আলাদা করার প্রয়োজন নেই, যদিও এটি ঐচ্ছিকভাবে অন্তর্ভুক্ত করা যেতে পারে। পঠনযোগ্যতার জন্য আপনি প্রতিটি কোডের মান আপনার কোডের নিজস্ব লিখে রাখতে পারেন।

এবার, আমরা ডান দিকের তীর চিহ্নের আইকনটি আমাদের শেষের আইকনের একই জায়গা থেকে শুরু করবো, এটা হবে (3,3) থেকে, ফলে আমাদের স্ট্রোক এবং ক্যাপগুলো একটার সাথে আরেকটা লেগে যাবে না। আমরা আমাদের দ্বিতীয় বিন্দুটি ডান দিকে সরাতে চাই এবং 25px নিচে নিতে চাই, তাই আমরা এটিকে (30,28) হিসেবে সেট করবো। আমাদের তৃতীয় বিন্দুটি প্রথম বিন্দু দিয়ে উলম্বভাবে রাখবো এবং অন্যটি 25px সরাবো, তাই এটিকে (3,53) হিসেবে সেট করলাম।

আমরা এই পয়েন্টগুলি আমাদের পলিলাইনের পয়েন্টগুলিতে যোগ করতে পারি যাতে এগুলোর মত এট্রিবিউট থাকবে:

<polyline points="
  3 3
  30 28
  3 53
"></polyline>

আপনি যদি আরো সংক্ষিপ্ত কোড চান, তাহলে আপনি উপরেও লিখতে পারেন:

<polyline points="3 3, 30 28, 3 53"></polyline>

<polyline points="3 3 30 28 3 53"></polyline>

আপনার ব্রাউজার প্রিভিউ দেখুন এবং আপনি আপনার ডানদিকের ক্যারট আইকনটি দেখতে এমন দেখাবে: অন্য আইকনটিও সম্পন্ন, ঠিক আছে!

আবার, এই আইকনটিতে মন্তব্য এবং একটি সংক্ষিপ্ত নোট যোগ করুন যাতে আপনি জানতে পারেন পরবর্তী আইকন কোনটি।

৪। একটি “Browser” আইকন তৈরি করুন

এখন চলুন আমরা কিছু শেইপ তৈরি করি, প্রথমে চতুর্ভুজ দিয়ে শুরু করবো (<rect>)। এটার সঙ্গে আমরা কিছু লাইন <line> যোগ করে ব্রাউজার আইকনটি তৈরি করবো।

আয়তক্ষেত্র এবংচতুর্ভুজ <rect> এলিমেন্টের সাহায্যে তৈরি করা যায়, যার চারটি বৈশিষ্ট্য রয়েছে যা আপনাকে প্রদান করতে হবে:

x হচ্ছে x অক্ষের উপরের বাম কর্নারের অবস্থান
y হচ্ছে y অক্ষের উপরের বাম কর্নারের অবস্থান
width হচ্ছে শেইপটির দৈর্ঘ্য
height হচ্ছে শেইপটির উচ্চতা

দ্রষ্টব্য: আপনি যদি চান তবে বৃত্তাকার কোণগুলি তৈরি করার জন্য আপনি rx এবং ry এট্রিবিউটসমূহ ব্যবহার করতে পারেন।

আমরা উভয় দিক দিয়ে 3px অফসেট এর মাধ্যমে উপরের বাম কোণে একটি আয়তক্ষেত্র তৈরি করতে যাচ্ছি, আবার স্ট্রোক ক্লিপিং এড়াতে, তাই আমরা অ্যাট্রিবিউট x = "3" y = "3" ব্যবহার করবো। আমরা এটি 60px উচ্চতাসম্পন্ন 80px প্রশস্ত করতে চাই, তাই আমরা এট্রিবিউট হিসেবে width="80" height="60" ব্যবহার করব।

যেমন আমাদের পুরো আয়তক্ষেত্রের কোড হওয়া উচিত:

<rect x="3" y="3" width="80" height="60"></rect>

আপনার কোড সংরক্ষণ করুন এবং আপনার ব্রাউজারে প্রিভিউ দেখুন। আপনি এখানে অসাধারণ একটি ছোট্ট আয়তক্ষেত্র দেখতে পাবেন।

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

<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>

দুটি লাইন বৈশিষ্ট্যাবলীতে প্রদত্ত স্থানাঙ্কগুলি দেখার জন্য একটু সময় নিন এবং আপনার মানগুলি সামান্য একটু পরিবর্তন করুন যাতে আপনি এই আইকনটি কীভাবে কাজ করছেন তা দেখতে পারেন।

৫। একটি “Alert” আইকন তৈরি করুন

এতক্ষনে আমাদের চতুর্ভুজ তৈরি করা প্রায় নিয়ন্ত্রণে এসে গেছে, এবার চলুন <ellipse> ব্যবহার করতে শিখি। আমরা এরকম দুটি ব্যবহার করবো, এর সাথে <line> দিয়ে এই এলার্ট আইকনটি তৈরি করতে:

চতুর্ভুজের মতই, <ellipse> এলিমেন্টেও চারটি এট্রিবিউট প্রয়োজন, যদিও এগুলো চতুর্ভুজ থেকে বেশ আলাদা। দৈর্ঘ্য এবং উচ্চতার পরিবর্তে আমরা আনুভূমিক এবং উলম্ব ব্যাসার্ধ সেট করতে পারি। এবং শেইপটির উপরের বাম দিকের কর্নারে সেটআপ করার পরিবর্তে, আমরা এটাকে মাঝ বরাবর স্থাপন করতে পারি:

cx দিয়ে x অক্ষের কেন্দ্রের অবস্থান বুঝানো হয়। "x এর কেন্দ্র হিসেবে cx" কে ভাবতে পারেন।
cy দিয়ে y অক্ষের কেন্দ্রের অবস্থান বুঝানো হয়। "y এর কেন্দ্র হিসেবে cy" কে ভাবতে পারেন।
rx দিয়ে x অক্ষের ব্যাসার্ধের আকার বোঝানো হয়, যেমন একটি আকৃতির উচ্চতাকে যদি দুই ভাগে ভাগ করা হয়। তবে "rx হবে x এর ব্যাসার্ধ"।
ry দিয়ে y অক্ষের ব্যাসার্ধের আকৃতি বোঝানো হয়, যেমন একটি শেইপের দৈর্ঘ্যকে যদি দুইভাগে ভাগ করা হয়। তবে "ry হবে y এর ব্যাসার্ধ"।

আমরা একটি সম্পূর্ণ গোলাকার বৃত্ত চাই যা দৈর্ঘ্যে 80px এবং উচ্চতায়ও 80pxহবে, মানে হচ্ছে আমরা চাই ব্যাসার্ধটি যাতে উভয় অক্ষের দিক থেকে 40px থাকে। এটা আমরা নিচের এট্রিবিউটের মাধ্যমে সেট করতে পারি rx="40" ry="40"।

একইসাথে আমরা বৃত্তটিকে গ্রাফ লাইনের উপর গাড়ভাবে বসাতে চাই। এর ফলে আমাদের বৃত্তটি দৈর্ঘ্য ও উচ্চতায় 80px হবে, যা তার কেন্দ্রের মূল বিন্দু 40px এর ভিতর স্থাপিত হবে। ক্লিপিং এড়াতে আমাদের 3px অফসেটের জন্য রাখা দরকার। ফলে, এর অর্থ হচ্ছে আমাদের বৃত্তটি উভয় অক্ষ থেকে 43px কেন্দ্রে থাকবে। এটা আমরা cx="43" cy="43" এট্রিবিউটের মাধ্যমে প্রকাশ করতে পারি।

এই সবগুলোকে একত্র করে, আমরা নিচের কোডটি পেতে পারি:

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

আপনার ব্রাউজার প্রিভিউ চেক করুন এবং এখন আপনি আপনার পৃষ্ঠায় একটি বৃত্ত দেখতে পাবেন।

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

<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>

অবশেষে, বিস্ময়বোধক চিহ্নের অন্য অংশটি তৈরি করার জন্য আমাদের কেবল একটি লাইন যুক্ত করতে হবে। আরও একবার আমরা একই টেকনিক ব্যবহার করবো যা আগের লাইনটির জন্য করেছিলাম। পার্থক্য শুধু এতটুকু যে, এইবার আমরা স্ট্রোক লাইনটি কিছুটা পুরু করে 5px থেকে 8px করে দিবো।

আমাদের এলার্ট আইকনের সম্পূর্ণ কোডটি নিচের মত দেখাবে:

৬। একটি “Play” আইকন তৈরি করুন

এবার, আমরা আয়তক্ষেত্র এবং বৃত্ত দিয়ে তুলনামূলকভাবে নির্দিষ্ট আকারের একটি শেইপ তৈরি করবো। এবার আমরা <polygon> এলিমেন্ট ব্যবহার করে আমাদের নিজস্ব শেইপ তৈরি করতে প্রস্তুত। এটা দিয়ে আমরা বহুভুজ বিশিষ্ট যেকোনও আকৃতি তৈরি করতে পারি, অষ্টভুজ থেকে শুরু করে তারকা যেকোনও কিছুই। কিন্তু আমরা এটাকে অকপটে ব্যবহার করতে পারি এবং একটি ত্রিভুজ তৈরি করতে পারি। দুটি <ellipse> এর সাথে মিশিয়ে আমরা এবার একটি প্লে আইকন তৈরি করতে পারি:

<polygon>এলিমেন্টটি <polyline> এলিমেন্টের প্রায় অনুরূপ। এটাতেও মাত্র একটি এট্রিবিউট আছে, আর তা হচ্ছে points, যেটাতে আপনি কয়েক জোড়া মান ব্যবহার করে নির্দিষ্ট বিন্দুতে বসাতে পারেন। পার্থক্য হল যে, একটি polyline সর্বদা খোলা থাকবে, কিন্তু একটি polygon স্বয়ংক্রিয়ভাবেই বন্ধ হয়ে যাবে।

চলুন শুরু করা যাক বৃত্ত নিচে পেয়ে যে আমাদের বহুভুজ ভিতরে বসতে হবে। আমরা আমাদের সতর্কতা আইকনতে একই এলিপস ব্যবহার করবো:

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

এখন আমাদের বহুভুজ তৈরি করি। আমরা তিনটি পয়েন্ট স্থাপন করতে যাচ্ছি, এবং এই পয়েন্টগুলির মধ্যে স্বয়ংক্রিয়ভাবে একটি ত্রিভুজ তৈরি করতে লাইন তৈরি হবে। পয়েন্ট হবে (35,23), (60,43) এবং (35,63)। যেমন আমাদের বহুভুজ কোড হবে:

<polygon points="35 23, 60 43, 35 63" />

এবং আমাদের সম্পূর্ণ play আইকন এর কোড হল:

৭। একটি “Download” আইকন তৈরি করুন

এখন আমরা কিছুটা জটিল, কিন্তু একইসাথে নমনীয় SVG শেইপ তৈরি করার বিশেষ উপায়টি দেখবো, এবং তা হচ্ছে <path> এলিমেন্ট। একটি পাথ তৈরি করা কিছুটা পলিগন তৈরি করার মতই, যেটা দিয়ে আপনি আপনার আকৃতিটি খুব সহজেই তৈরি করতে পারবেন। যাইহোক একটি পাথ দিয়ে আপনি প্রতিটি পয়েন্ট এবং লাইন কোনও ধরনের অটোমেশন ছাড়াই তৈরি করতে পারবেন, এবং একইসাথে পয়েন্টের মাঝখানে সোজা লাইনের পরিবর্তে কিছুটা বক্রতা তৈরি করতেও সমর্থ হবেন।

পাথ ব্যবহার করে যেকোনো জিনিষ তৈরি করা যায়, কিন্তু নির্দিষ্ট মাত্রার চেয়ে বেশি জটিল শেইপ হলে তা হাতে কোড করার চেয়ে ভেক্টর ডিজাইন এপ্লিকেশনের মাধ্যমে কোড করাই ভালো। একারণে, আমরা পাথ ফাংশনালিটির একটি উপসেটের উপর ফোকাস করতে যাচ্ছি, এবং এটা ব্যবহার করে নিচের ডাউনলোড আইকনটি তৈরি করবো:

টেকনিক্যালি, আপনি একটি বহুভুজ দিয়ে উপরের আকৃতিটি তৈরি করতে পারেন, কিন্তু এই তীরটি কিভাবে পাথ উপাদান কাজ করে তা বুঝতে আমাদেরকে সাহায্য করবে।

আমরা <path> এর মাত্র একটি এট্রিবিউট ব্যবহার করবো, এবং এটা হচ্ছে d। সাধারণত d দিয়ে “data” বোঝানো হয়। এবং এখানে এটা দিয়ে আপনার পাথের সমস্ত পয়েন্ট এবং লাইনসমূহ বোঝানো হয়ে থাকে। এই অ্যাট্রিবিউটের মধ্যে, একটি পাথের পয়েন্টগুলি সেট করতে এবং তাদের মধ্যে লাইন তৈরি করার কমান্ডগুলি একক অক্ষরের মাধ্যমে প্রদান করা হয়, যেমন M অথবা L, এক সেট x এবং / অথবা y কো- অর্ডিনেটসমূহ অনুসরণ করে।

এরকম বিভিন্ন ধরনের কমান্ড আছে, কিন্তু <path> নিয়ে কাজ করা সম্পর্কে আপনাকে একটি ধারণা দিতে, আমরা এগুলোর কয়েকটি তুলে ধরবো যা হাতে-কলমে তৈরি করার কাজে ব্যবহার করা হবে। এগুলো হবে নিচের মত:

M দিয়ে বোঝানো হয় moveto। এটা প্রদত্ত অবস্থানে একটি নতুন পাথ শুরু করে, যা x এবং y মান দিয়ে সংজ্ঞায়িত করা হয়। এটা অনেকটা আপনার ক্যানভাসে মাউসের পয়েন্টার রাখার মত, যা আঁকতে সম্পূর্ণ প্রস্তুত। বড় হাতের M দিয়ে এক সেট পূর্ণ স্থানাঙ্ককে নড়াচড়া করা বোঝানো হয়। (ছোট হাতে m দিয়ে আপেক্ষিক স্থানাঙ্ককে নির্দেশ করা হয়)।
L দিয়ে বোঝানো হয় lineto। বর্তমান অবস্থান থেকে নতুন অবস্থানের দিকে একটি লাইন আঁকতে ব্যবহার করা হয়। বড় হাতের L দিয়ে বোঝানো হয় এক সেট পরিপূর্ণ স্থানাঙ্ক। (ছোট হাতের l দিয়ে আপেক্ষিক স্থানাঙ্কের দিকে নির্দেশ করা হয়)।
Z দিয়ে বোঝানো হয় closepath। এটা একটি পাথকে শুরুর বিন্দু থেকে বর্তমান বিন্দু পর্যন্ত সোজা লাইনের মাধ্যমে আবদ্ধ শেইপে রুপান্তরিত করে।

আপনি অবশ্যই এই তিনটি কমান্ড (এবং এগুলো দিয়ে আমরা যেই আইকনগুলো তৈরি করেছি) <path> এলিমেন্টের একটি প্রারম্ভিক পাঠ হিসেবে দেখতে পাবেন। এটার সর্বোচ্চ ব্যবহার করতে সবগুলো কমান্ডের সঙ্গে পরিচিত হতে হবে।

ডাউনলোড আইকন কোড করুন

ডাউনলোড আইকন পাথ কোড করার জন্য আমি আপনাকে প্রথমে একটি খালি পাথ এলিমেন্ট যোগ করতে বলবো:

<path d="

"></path>

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

প্রথমে আমরা (18,3) বিন্দুতে যাবো, যেই বিন্দু থেকে আমরা আমাদের তীর চিহ্নটি শুরু করতে চাচ্ছি। এটা করতে আমরা M 18 3 কমান্ডটি আমাদের পাথের d এট্রিবিউটে যুক্ত করবো।
তারপর আমরা L কমান্ড ব্যবহার করে একটি লাইন তৈরি করবো, যেটা আমাদের পাথের শুরুর বিন্দু থেকে x অক্ষ বরাবর 28px হবে। এটা করতে চলুন এবার দ্বিতীয় কমাণ্ড যুক্ত করি: L 46 3। আপনার প্রিভিউ চেক করুন এবং আপনি একটি ছোট আনুভুমিক লাইন দেখতে পাবেন।
চলুন এবার নিচের দিকে একটি সোজা লাইন আঁকি যা 37px হবে। এজন্য L 46 40 যোগ করতে হবে।
এবার ডানদিকেও L 61 40 দিয়ে 15px সোজা একটি লাইন তৈরি করি।
তারপর আমরা একটি তীর শলাকা তৈরি করতে শুরু করবো। আমরা নিচের দিকে এবং বামদিকে একটি লাইন আঁকবো। এটা আমরা L 32 68 দিয়ে সম্পন্ন করবো।
এবং তারপর আমরা নিচের দিকে এবং বামদিকে আরও একটি লাইন আঁকবো L 3 40 দিয়ে।
এবার, আমরা তীরের মাথাটা L 18 40 দিয়ে ডানদিকে আবার কিছুটা টেনে নিয়ে শেষ করবো।
এই শেইপটি বন্ধ করতে আমাদের কোন বিন্দু নির্দিষ্ট করে লাইন আঁকতে হবে না। আমরা যা করতে পারি তা হচ্ছে Z কমান্ড যুক্ত করা, যেটা আমাদের শেইপটিকে স্বয়ংক্রিয়ভাবে বন্ধ করে দিবে।

আমাদের চূড়ান্ত তীর চিহ্নের পাথ কোডটি দেখতে নিচের মত হতে হবে:

<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>

<path> নিয়ে কাজ করা সম্পর্কে আরও জানতে পেইজের নিচ থেকে রেফারেন্সসমূহ চেক করুন।

৮। `<defs>` এলিমেন্ট যোগ করুন

আমরা ইতিমধ্যেই আমাদের ছয়টি আইকনের কোড সম্পন্ন করেছি, তাই এখন আমরা এগুলোকে SVG এর মধ্যে পুনরায় ব্যবহারযোগ্য হিসেবে তৈরি করবো।

এটা করার জন্য আমাদের সবগুলো আইকন মোট ছয়টি (ইতিমধ্যেই যেগুলো কমেন্ট এর মাধ্যমে উল্লেখ করা হয়েছে), <defs></defs> ট্যাগের মধ্যে রাখুন:

<defs>
<!-- All the icons you created so far go in here -->
</defs>

এট দিয়ে বোঝানো হয়েছে, আমাদের তৈরি করা সবগুলো আইকনই ডিফল্ট হিসেবে লুকানো আছে, যতক্ষন না আমরা এগুলো ব্যবহার করবো।

আপনি এখন আপনার প্রতিটি আইকনকে কমেন্টমুক্ত করতে পারেন এবং তাহলে এগুলো আর পৃষ্ঠাতে দেখা যাবে না।

৯। `<g>` দিয়ে গ্রুপ সমূহ তৈরি করা

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

একটি আইকনকে গ্রুপে রুপান্তরের জন্য এটাকে <g></g> ট্যাগদ্বয়ের মাঝে রাখতে হবে। এই গ্রুপটিকে ব্যবহারযোগ্য করে তুলতে আমরা এটাকে একটি অনন্য ID-ও দিবো।

উদাহরণস্বরূপ:

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

আপনার প্রথম তিনটি আইকন <g></g> ট্যাগের মধ্যে রাখুন এবং নিচের মত করে ইউনিক আইডিসমূহ যুক্ত করুন:

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

১০। `<use>` দিয়ে গ্রুপসমূহ স্থাপন করুন

এখন আমাদের <defs> এলিমেন্টের মাঝে গ্রুপ হিসেবে সংজ্ঞায়িত তিনটি আইকন আছে, তাই এগুলো আমরা আমাদের SVG তে ব্যবহারের জন্য সম্পূর্ণ প্রস্তুত। এটা করতে, আমাদের যা করতে হবে তা হচ্ছে একটি <use> এলিমেন্ট যুক্ত করা (এটাকে <defs> এলিমেন্টের পরে এবং বাইরে ব্যবহার করা নিশ্চিত করুন), এবং পছন্দের আইকনের ID লক্ষ্য করে একটি href অ্যাট্রিবিউট বসান।

উদাহরণস্বরূপ, বামের সারিবদ্ধ আইকনটি ব্যবহার করতে এই কোড যুক্ত করুন:

<use href="#leftalign"></use>

একটি নির্দিষ্ট লোকেশনে আইকনসমূহ স্থাপন করতে x এবং y এট্রিবিউটসমূহ যুক্ত করবেন:

<use href="#leftalign" x="100" y="100"></use>

সবগুলো আইকন একসাথে যোগ করার কোড এবং তাঁদের মাঝখানে ফাঁকা জায়গা রাখলে সেটা দেখতে নিচের মত দেখাবে:

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

আপনার ব্রাউজার চেক করুন এবং আপনার আপনার প্রথম তিনটি আইকন দেখতে পাবেন:

১১। `<symbol>` দিয়ে সিম্বলসমূহ তৈরি করুন

আপনার আইকনসমূহ সংজ্ঞায়িত করতে গ্রুপ ব্যবহার করার পরিবর্তে আপনি চাইলে সিম্বল ব্যবহার করতে পারেন। সিম্বলসমূহ গ্রুপের মতই একই রকম, যদিও আপনি অন্যান্য সেটিংসমূহ ব্যবহার করে viewbox এবং aspect ratio-ও নিয়ন্ত্রণ করতে পারবেন।

এটা বেশ কার্যকর যদি আপনি এরই মধ্যে তৈরি করা আমাদের আইকন সমূহ মাঝ বরাবর কেন্দ্রীভূত করে রাখতে চান। আমরা বাকি তিনটি আইকনও সিম্বলে রুপান্তরিত করবো, এবং এগুলোকে এমনভাবে ভরাট করবো উল্লম্বভাবে 100px জায়গা জুড়ে থাকে, এবং আনুভূমিকভাবে এই জায়গার মাঝ বরাবর থাকে।

গ্রুপের মত করে একইভাবে আমরা আমাদের সিম্বলসমূহ তৈরি করবো, শুধুমাত্র আমাদের শেষ তিনটি আইকনের কোডগুলো <symbol></symbol> ট্যাগদ্বয়ের মধ্যে জুড়ে দিবো। একইসাথে প্রত্যেকটির জন্য আমরা একটি করে ইউনিক ID যুক্ত করবো।

যাইহোক, আমরা এবার একটি viewBox attribute যোগ করতে যাচ্ছি। এটা আমাদেরকে প্রত্যেকটি সিম্বল দেখতে কেমন দেখাবে তা সংজ্ঞায়িত করতে সাহায্য করবে। যখন কোনও ব্রাউজার এই তথ্যগুলো বুঝতে পারবে তখন এটা খুব সহজেই সিম্বলসমূহ সঠিকভাবে পরিমাপ এবং সমান্তরাল করে রাখতে পারবে।

আমরা আমাদের viewBox এট্রিবিউটে চারটি মান যুক্ত করতে যাচ্ছি। প্রথম দুটি দিয়ে আমাদের আইকনের উপরের বামপাশের কেন্দ্রবিন্দু নির্ধারণ করা হবে এবং তৃতীয় এবং চতুর্থটি দিয়ে যথাক্রমে দৈর্ঘ্য এবং উচ্চতা সংজ্ঞায়িত করা হবে

"এলার্ট" আইকনে পুনরায় ফিরে আসি, এটার দৈর্ঘ্য এবং উচ্চতা দুটোই 86px। তাহলে আমরা viewBox এর মান নিচের মত করে বসাতে পারি 0 0 86 86:

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

“play” আইকনটিও দৈর্ঘ্য ও উচ্চতায় 86px, এবং ডাউনলোড আইকনটি দৈর্ঘ্যে 64px এবং উচ্চতায় 71px। আমাদের সিম্বলের জন্য সংশ্লিষ্ট কোডেও তাই হতে হবে:

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

১২।`<use>` দিয়ে সিম্বলসমূহ স্থাপন করুন

আমরা সিম্বল আইকনগুলিকে একই ভাবে ব্যবহার করতে পারি, যেমনটা আমরা আমাদের গ্রুপগুলিকে করেছি। তবে আমরা প্রতিটি প্রস্থ এবং উচ্চতা বৈশিষ্ট্যের সাথে 100 সেট করতে যাচ্ছি:

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

আপনি দেখতে পাবেন, আপনার সিম্বল বেইজড প্রত্যেকটি আইকনই পরিপূর্ণ হয়ে আছে এবং 100px by 100px জায়গা জুড়ে আছে।

গ্রুপ বেইজড আইকন সমূহে width এবং height এট্রিবিউট সমূহ <use> এলিমেণ্টে ব্যবহার করুন। আপনি লক্ষ্য করবেন, কোন কিছুই পরিবর্তিত হবে না কারণ, ব্রাউজার কিভাবে আইকনসমূহ ছোট ও বড় করতে হয় তার জন্য viewBox এর মানের উপর নির্ভরশীল (যা একটি গ্রুপে থাকে না)।

কি কি শিখলাম

আপনার সম্পূর্ণ কোডটি কেমন দেখাবে তা এখানে দেখুন:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
  html, body {
    height: 100%;
    width: 100%;
    background: #e9e9e9;
  }
  body {
    margin: 0;
    text-align: center;
  }
  .grid {
    width: 750px;
    height: 500px;
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 100px;
    background-image: url('grid.png');
    position: relative;
  }
  .grid::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    width: 750px;
    height: 600px;
  }
  .grid::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 850px;
    height: 500px;
  }
  svg {
    stroke: rgb(0, 0, 0);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  </style>
</head>
<body>

<div class="grid">

<svg width="750" height="500">

<defs>

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

</defs>

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

</svg>

</div>

</body>
</html>

হাতে কলমে SVG তৈরি করার সব কিছুই এখানে দেখানো হয়েছে! চলুন, সার সংক্ষেপে দেখে নেই, আমরা এখানে কি কি শিখলাম:

সম্পূর্ণ গ্রাফিকটি তৈরি করতে কিভাবে <svg> উপাদান সেটআপ করবেন।
লাইন তৈরি করতে <line> এবং <polyline> ব্যবহার করুন।
আবদ্ধ শেইপ তৈরি করতে <rect>, <ellipse> এবং <polygon> ব্যবহার করুন।
<path> ব্যবহার করে আপনি যা চান তাই তৈরি করতে পারেন।
<g> এলিমেন্ট দিয়ে শেইপগুলো গ্রুপ করুন
অতিরিক্ত বৈশিষ্ট্যপূর্ণ গ্রুপ তৈরি করতে, <symbol> ব্যবহার করুন।
<defs> এলিমেন্ট ব্যবহার করে যেকোনোও পুনরায় ব্যবহারযোগ্য সিম্বল এবং গ্রুপকে সংজ্ঞায়িত করুন।
পুনর্ব্যবহারযোগ্য সিম্বল এবং গ্রুপসমূহ <use> এলিমেন্ট দিয়ে যথাস্থানে স্থাপন করতে পারবেন।

এই টিউটোরিয়ালে আমরা বেশ কিছু নিরেট ভিত্তি সম্পর্কে জেনেছি, কিন্তু আপনি চাইলে SVG দিয়ে আরও অনেক কিছু করতে পারেন। তাই এখানে থামবেন না, বরং আরও খুঁজতে থাকুন ও দেখুন আপনি আর কি কি অর্জন করতে পারেন।

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