SVG একটি উদাহরণ

SVG XML-এর দ্বারা লেখা হয়

SVG ইনস্ট্যান্স

নিচের উদাহরণটি একটি সাধারণ SVG ডকুমেন্টের উদাহরণ।SVG ডকুমেন্টটি .svg এক্সটেনশন ব্যবহার করে সংরক্ষণ করা উচিত:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

উদাহরণ দেখুন（শুধুমাত্র SVG-এর সমর্থক ব্রাউজারের জন্য）

（SVG সোর্স কোডটি দেখার জন্য এই উদাহরণটি খুলুন, এবং উইন্ডোতে ডানদিকে ক্লিক করুন।সাইটে 'দেখুন সোর্স কোড' নির্বাচন করুন。）

কোডটি ব্যাখ্যা:

প্রথম লাইনটিতে XML ঘোষণা আছে।লক্ষ্য করুন standalone এটিকেই! এই এটিকে কোনও স্বতন্ত্র ডকুমেন্ট হিসাবে কিংবা বাইরের ফাইলের উল্লেখ করা হবে কিনা তা নির্ধারণ করে

standalone="no" অর্থাৎ SVG ডকুমেন্টটি একটি বাইরের ফাইলকে উল্লেখ করবে - এখানে, DTD ফাইল

দ্বিতীয় এবং তৃতীয় লাইনটি এই বহিস্থ এসভিজি DTD-কে উল্লেখ করেছে। DTD “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”-এ অবস্থিত। DTD W3C-এ অবস্থিত, যাতে সমস্ত অনুমোদিত SVG এলিমেন্টগুলি রয়েছে।

SVG কোড <svg> এলিমেন্ট দ্বারা শুরু হয়, উন্মুক্ত ট্যাগ <svg> এবং বন্ধ ট্যাগ </svg> নিয়ে গঠিত। এটি মূল এলিমেন্ট। width এবং height এটি এই SVG ডকুমেন্টের প্রস্থ এবং উচ্চতা নিয়েছে। version এটি ব্যবহৃত হওয়া SVG সংস্করণ নিয়েছে। xmlns এটি SVG নামস্পেস নিয়েছে。

SVG-এর <circle> এটি একটি বৃত্ত তৈরি করতে ব্যবহৃত হয়। cx এবং cy এটি বৃত্তের কেন্দ্রের x এবং y কোণার সংকেত করে। এই দুটি প্রতিভা না থাকলে, বৃত্তটির কোণা (0, 0) হবে। r এটি বৃত্তের ব্যাস নিয়েছে।

stroke এবং stroke-width এটি আকৃতির হাড়বন্ধন কিভাবে দেখাতে হবে নিয়েছে। আমরা বৃত্তটির হাড়বন্ধন 2px চওড়া, কালো হাড়বন্ধন করেছি。

fill এটি হল আকৃতির ভিতরের রঙ নিয়েছে। আমরা পূর্ণাঙ্গ রঙ রেড করেছি。

বন্ধ ট্যাগের কাজ হল এসভিজি এলিমেন্ট এবং ডকুমেন্টটিকেই বন্ধ করা。

মন্তব্য:সকল উন্মুক্ত ট্যাগগুলি বন্ধ ট্যাগগুলির সঙ্গে অবশ্যই সংযুক্ত হতে হবে!