একটি SVG ফাইল কি?

An SVG file is a Scalar Vector Graphics file that uses XML based text format for describing the appearance of an image. The word Scalable refers to the fact that the SVG can be scaled to different sizes without losing any quality. Text-based description of such files makes them independent of resolution. It is one of the most used formats for building a website and print graphics in order to achieve scalability. The format can only be used for two-dimensional graphics though. SVG files can be viewed/opened in almost all modern browsers including Chrome, Internet Explorer, Firefox, and Safari.

সংক্ষিপ্ত ইতিহাস

SVG specifications are available as open standard by World Wide Web Consortium (W3C) since 1999. এর আগে, 1998 সাল পর্যন্ত ছয়টি ভিন্ন ফরম্যাটে অনুরূপ ফাইল ফর্ম্যাট স্পেসিফিকেশন W3C-তে জমা দেওয়া হয়েছিল। 2011 সালে স্পেসিফিকেশনগুলিতে একটি আপডেট প্রয়োগ করা হয়েছিল এবং এটি 1.1 সংস্করণ করা হয়েছিল। 2016 সালে, SVG 2 SVG 1.1-এর বৈশিষ্ট্যগুলি ছাড়াও নতুন সংস্করণ হিসাবে প্রকাশিত হয়েছিল।

ফাইল ফরম্যাট স্পেসিফিকেশন

SVG ডকুমেন্ট অবজেক্ট মডেল (DOM) সমস্ত স্পেসিফিকেশন এবং ইন্টারফেসের ভিত্তি স্থাপন করে যা স্পেসিফিকেশনের নির্দিষ্ট বিভাগের সাথে সঙ্গতিপূর্ণ। SVG দর্শকদের অবশ্যই SVG DOM ইন্টারফেস প্রয়োগ করতে হবে যেমন W3C স্পেসিফিকেশন জুড়ে সংজ্ঞায়িত করা হয়েছে। এর DOM বিভিন্ন ডেটা টাইপ এবং উপাদানগুলির জন্য বেশ কয়েকটি ইন্টারফেস প্রকাশ করে।

SVG আকার

SVG এর কিছু পূর্বনির্ধারিত আকৃতির উপাদান রয়েছে যা বিকাশকারীরা ব্যবহার করতে পারেন:

  • আয়তক্ষেত্র

  • বৃত্ত

  • উপবৃত্তাকার

  • লাইন

  • পলিলাইন

  • বহুভুজ

  • পথ

এই আকার এবং স্পেসিফিকেশনের উপর ভিত্তি করে, SVG এর কার্যকরী ক্ষেত্রগুলি নিম্নরূপ।

পাথ - পাথগুলি সরল এবং সেইসাথে যৌগিক আকৃতির রূপরেখা উপস্থাপন করতে ব্যবহৃত হয়। কোডিংগুলি অপারেশনের প্রকৃতি নির্ধারণ করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, M ব্যবহার করা হয় Move To এর জন্য, L ব্যবহার করা হয় Line To এর জন্য, Z ব্যবহার করা হয় একটি পথ বন্ধ করতে ইত্যাদি।

মৌলিক আকৃতি - সরল-রেখার পাথ এবং পাথগুলি সংযুক্ত সরল-রেখার অংশগুলির (পলিলাইন) একটি সিরিজ দিয়ে তৈরি, পাশাপাশি বন্ধ বহুভুজ, বৃত্ত এবং উপবৃত্তগুলি আঁকা যেতে পারে। আয়তক্ষেত্র এবং বৃত্তাকার কোণার আয়তক্ষেত্রগুলিও আদর্শ উপাদান।

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

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

রঙ - SVG স্পেসিফিকেশন সমস্ত দৃশ্যমান SVG উপাদানে রং প্রয়োগ করতে দেয়, হয় সরাসরি বা ফিল, স্ট্রোক এবং অন্যান্য বৈশিষ্ট্যের মাধ্যমে। কালো বা নীল, হেক্স উপস্থাপনা, দশমিক বা RGB ফর্মের শতাংশ হিসাবে নির্দিষ্ট করার জন্য বিভিন্ন রঙের কোডিং ব্যবহার করা যেতে পারে।

গ্রেডিয়েন্ট এবং প্যাটার্ন - একটি SVG ফাইলের আকারগুলি কঠিন রং, গ্রেডিয়েন্ট বা পুনরাবৃত্তি করা প্যাটার্ন দিয়ে ভরা বা রূপরেখা করা যেতে পারে।

ফিল্টার প্রভাব - এটি আসলে গ্রাফিক্স অপারেশনগুলির একটি সিরিজ যা পরিবর্তিত ফলাফল তৈরি করতে প্রদত্ত সোর্স ভেক্টর গ্রাফিকে প্রয়োগ করা হয়।

ইন্টারঅ্যাকটিভিটি - ব্যবহারকারীরা ফোকাস, মাউস ক্লিক, স্ক্রলিং বা ইমেজ জুম পরিবর্তন করে SVG ফাইলের সাথে ইন্টারঅ্যাক্ট করতে পারে। ইন্টারঅ্যাকটিভিটি SVG ইমেজগুলিকে ব্যবহারকারীদের সাথে পূর্বোল্লিখিত বিভিন্ন উপায়ে যোগাযোগ করতে দেয়।

লিংক - SVG ছবির জন্য অন্যান্য নথিতে হাইপারলিঙ্ক থাকা সম্ভব। এটি XML লিঙ্কিং ভাষা বা XLink এর মাধ্যমে অর্জন করা হয়। এটি নির্দিষ্ট ভিউ স্টেট তৈরি করার অনুমতি দেয় যা একটি নির্দিষ্ট এলাকার জুম ইন/আউট করতে বা একটি নির্দিষ্ট উপাদানের ভিউ সীমাবদ্ধ করতে ব্যবহৃত হয়।

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

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

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

উদাহরণ

নিম্নলিখিত লাইনগুলি দেখায় যে কীভাবে SVG স্ক্রিপ্ট ব্যবহার করে একটি বৃত্তকে উপস্থাপন করা হয়।

<html>
<body>

<h1>My first SVG</h1>

<svg width#"100" height#"100">
  <circle cx#"50" cy#"50" r#"40" stroke#"green" stroke-width#"4" fill#"yellow" />
</svg>

</body>
</html>

কোডের নিম্নলিখিত লাইনগুলি কীভাবে ব্যবহার করতে হয় তা দেখায় SVG-তে পাঠ্য রেন্ডার করার জন্য ব্লক।

<svg height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>

তথ্যসূত্র

See Also