আপনার প্রতিক্রিয়াশীল সাইটে স্প্ল্যাশ ভেক্টর গ্রাফিক্স

চকচকে মোবাইল সামগ্রী তৈরি করার অর্থ হল সর্বাধিক ভিজ্যুয়াল প্রভাবের বিরুদ্ধে ডাউনলোড করা ডেটার পরিমাণের ভারসাম্য। ভেক্টর গ্রাফিক্স ন্যূনতম ব্যান্ডউইথ ব্যবহার করে অত্যাশ্চর্য ভিজ্যুয়াল ফলাফল প্রদানের একটি দুর্দান্ত উপায়।

অনেকেই ক্যানভাসকে ওয়েবে ভেক্টর এবং রাস্টারের মিশ্রণ আঁকতে একমাত্র উপায় বলে মনে করেন, কিন্তু কিছু সুবিধা আছে এমন বিকল্প রয়েছে। ভেক্টর অঙ্কন অর্জনের একটি দুর্দান্ত উপায় হল স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) ব্যবহার করে যা HTML5 এর একটি মূল অংশ।

আমরা সবাই জানি প্রতিক্রিয়াশীল ডিজাইন হল বিভিন্ন স্ক্রীনের মাপ পরিচালনার একটি বড় অংশ, এবং SVG বিভিন্ন আকারের স্ক্রীন সহজে পরিচালনা করার জন্য আদর্শ।

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

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

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

স্কেলিং মৌলিক

আসুন একটি সাধারণ দৃশ্যের সাথে শুরু করা যাক - আপনি আপনার ওয়েব পৃষ্ঠার পটভূমিতে একটি সম্পূর্ণ পৃষ্ঠার গ্রাফিক চান৷ আপনার কোম্পানির লোগো বা পটভূমিতে পূর্ণ-স্ক্রীনের মতো যেকোন কিছু থাকা সত্যিই উপযোগী হবে, তবে অবশ্যই সেখানে সমস্ত বিভিন্ন স্ক্রীন আকারের সাথে সুন্দরভাবে করা খুব কঠিন। তাই বোঝানোর জন্য, আমরা নম্র HTML5 লোগো দিয়ে শুরু করব।

HTML5 লোগোটি নীচে দেখানো হয়েছে - এবং আপনি এটি অনুমান করেছেন, এটি একটি SVG ফাইল হিসাবে উদ্ভূত হয়েছে৷

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

বড় চুক্তি কি তাই? ঠিক আছে যদি আপনি লক্ষ্য না করেন, এটিই একমাত্র বিন্যাস যা আমরা যে ডিভাইসটি দেখতে ব্যবহার করছি তার থেকে স্বাধীনভাবে স্কেল করে। তাই আমাদের ব্যবহারকারীদের কাছে শুধুমাত্র একটি সম্পদ পরিবেশন করতে হবে, তাদের পর্দা বা জানালার আকার কী তা জানার প্রয়োজন নেই - ঝরঝরে!

কিন্তু অপেক্ষা করুন, আরও আছে - HTML5 লোগো মাত্র 1427 বাইট! ইয়েস, এটি এতই ছোট যে এটি লোড করার সময় এটি খুব কমই কোনো মোবাইল ডেটা প্ল্যানকে নষ্ট করবে, যা এটিকে দ্রুত লোড করে এবং এটি আপনার ব্যবহারকারীদের জন্য সস্তা এবং দ্রুত করে তোলে!

SVG ফাইল সম্পর্কে আরেকটি চমৎকার জিনিস হল যে সেগুলিকে আরও সঙ্কুচিত করতে GZIP সংকুচিত করা যেতে পারে। আপনি যখন SVG এভাবে কম্প্রেস করবেন, তখন ফাইল এক্সটেনশনটি '.svgz'-এ পরিবর্তন করতে হবে। HTML5 লোগোর ক্ষেত্রে, সংকুচিত হলে এটি মাত্র 663 বাইটে সঙ্কুচিত হয় - এবং বেশিরভাগ আধুনিক ব্রাউজার এটি সহজে পরিচালনা করে!

সাম্প্রতিক কিছু ডিভাইসে আমাদের উদাহরণ ফাইলের সাথে আমরা কম্প্রেসড ভেক্টর ডেটা ব্যবহার করে 60x সুবিধার মতো কিছু দেখতে পাই! এছাড়াও, মনে রাখবেন যে এই তুলনাগুলি PNG এর পরিবর্তে JPEG এবং SVG-এর মধ্যে করা হচ্ছে৷ যাইহোক, JPEG একটি ক্ষতিকারক বিন্যাস যার ফলাফল SVG বা PNG এর থেকে নিম্নমানের হয়। আমরা যদি PNG ব্যবহার করি, তাহলে সুবিধা 80x এর বেশি হবে যা বিস্ময়কর!

তবে অবশ্যই PNG এবং JPEG সমানভাবে তৈরি করা হয় না। অনেকগুলি অপ্টিমাইজেশন টিপস আপনাকে PNG এর পরিবর্তে JPEG ব্যবহার করতে বলে, তবে এটি সর্বদা এত দুর্দান্ত ধারণা নয়। নিচের ছবিগুলো দেখে নিন। বাম দিকের ছবিটি হল HTML5 লোগোর 6x বড় করা উপরের ডানদিকের একটি PNG ছবি। ডানদিকের ছবিটি একই জিনিস কিন্তু JPEG দিয়ে এনকোড করা।

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

ভেক্টর ব্যাকগ্রাউন্ড তৈরি করা

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

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

আপনি লক্ষ্য করবেন যে ডিসপ্লের আকার যাই হোক না কেন, চিত্রটি খাস্তা পরিষ্কার প্রান্তগুলির সাথে সুন্দরভাবে আকার দেওয়া হয়েছে।

তারপর অবশ্যই, আমরা পটভূমিতে কিছু বিষয়বস্তু রাখতে চাই।

কিন্তু আপনি দেখতে পাচ্ছেন, ফলাফলটি আদর্শের চেয়ে কম কারণ আমরা পাঠ্যটি পড়তে পারি না। তাই আমরা কি কাজ করতে পারি?

সুন্দর দেখতে ব্যাকগ্রাউন্ড সামঞ্জস্য করা হচ্ছে

আমাদের যা করতে হবে তা হল ব্যাকগ্রাউন্ড ইমেজের সমস্ত রঙ হালকা করা। এটি সহজে সিএসএস অপাসিটি প্রপার্টি ব্যবহার করে অর্জন করা যায় - অথবা SVG ফাইলেই অপাসিটি ব্যবহার করে। আপনি আপনার CSS সামগ্রীতে এই কোডটি যোগ করে এই কাজটি করতে পারেন:

#bg {
  opacity: 0.2;
}

এটি আপনাকে এমন একটি ফলাফল দেবে:

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

একটি ভাল সমাধান

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

তাই এখন আমাদের কিছু মৌলিক বিষয়ের একটি শালীন উপলব্ধি আছে, আসুন কিছু অন্যান্য বৈশিষ্ট্যের দিকে এগিয়ে যাই।

দক্ষতার সাথে গ্রেডিয়েন্ট ব্যবহার করা

ধরা যাক আমরা একটি বোতাম তৈরি করতে চাই। আমরা সুন্দর বৃত্তাকার কোণগুলির সাথে একটি আয়তক্ষেত্র তৈরি করে শুরু করতে পারি। তারপর বোতামটিকে কিছু সুন্দর টেক্সচার দিতে আমরা একটি সুন্দর লিনিয়ার গ্রেডিয়েন্ট যোগ করতে পারি। এটি করার জন্য কোডটি এমন কিছু দেখতে পারে:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

ফলস্বরূপ বোতামটি এইরকম কিছু দিয়ে শেষ হবে:

লক্ষ্য করুন কিভাবে আমরা যোগ করেছি গ্রেডিয়েন্ট বাম থেকে ডানে যায়। এটি SVG-তে ডিফল্ট গ্রেডিয়েন্ট দিক। তবে আমরা আরও ভাল করতে পারি, কয়েকটি ভিন্ন কারণে: নান্দনিকতা এবং কর্মক্ষমতা। চলুন একটু সুন্দর দেখাতে গ্রেডিয়েন্টের দিক পরিবর্তন করার চেষ্টা করি। রৈখিক গ্রেডিয়েন্টে 'x1', 'y1', 'x2', এবং 'y2' বৈশিষ্ট্যগুলি সেট করা ভরাট রঙের দিক নিয়ন্ত্রণ করে।

শুধু 'y2' অ্যাট্রিবিউট সেট করা আমাদের গ্রেডিয়েন্টকে তির্যক হতে দেয়। তাই এই ছোট কোড পরিবর্তন:

<linearGradient id="blueshiny" y2="1">

আমাদের বোতামের জন্য আমাদের একটি ভিন্ন চেহারা দেয়, এটি নীচের ছবির মত দেখায়।

আমরা এই ছোট কোড পরিবর্তনের মাধ্যমে উপরে থেকে নীচে যেতে সহজেই গ্রেডিয়েন্ট পরিবর্তন করতে পারি:

<linearGradient id="blueshiny" x2="0" y2="1">

এবং যে নিচের ছবির মত দেখতে শেষ হয়.

তাহলে গ্রেডিয়েন্টের বিভিন্ন কোণ সম্পর্কে সমস্ত আলোচনার সাথে আমি আপনাকে জিজ্ঞাসা করতে শুনি?

ভাল এটা দেখা যাচ্ছে যে শেষ উদাহরণ - উপরের থেকে নীচে চলমান গ্রেডিয়েন্ট সহ বেশিরভাগ ডিভাইসে আঁকতে দ্রুততম। গ্রাফিক গীকদের মধ্যে এটি একটি খুব কম পরিচিত গোপনীয়তা যারা ব্রাউজার কোড লেখেন যা উল্লম্ব (উপর থেকে নীচে) গ্রেডিয়েন্টগুলি একটি কঠিন রঙের মতো দ্রুত রঙ করে। (কারণ হল যে পৃষ্ঠার নীচে অনুভূমিক রেখায় একটি বস্তুর পেইন্টিং করা হয় - এবং অঙ্কন কোডের সাহস বুঝতে পারে যে প্রতিটি লাইন জুড়ে রঙ পরিবর্তন হয় না এবং তাই তারা এটিকে অপ্টিমাইজ করে)।

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

যদি আমরা এই নতুন গ্রেডিয়েন্ট জ্ঞানের সাথে সত্যিই দুঃসাহসিক বোধ করি, তাহলে আমরা সম্ভবত নীচের কোডটি যোগ করে আমাদের HTML5 লোগোর পিছনে একটি দুর্দান্ত গ্রেডিয়েন্ট যোগ করতে পারি:

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

উপরের কোডটি আমাদের HTML5 লোগোর ব্যাকগ্রাউন্ডে একটি ম্লান উল্লম্ব রৈখিক গ্রেডিয়েন্ট যোগ করে যাতে একটি সূক্ষ্ম বহু-রঙের আভা দেয় যা দ্রুত চলে - একটি কঠিন রঙের পটভূমির মতো দ্রুত।

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

আরামের সাথে অ্যানিমেট করুন

এখন পর্যন্ত আপনি ভাবছেন যে আপনার পৃষ্ঠার পটভূমি হিসাবে একটি SVG গ্রেডিয়েন্ট ব্যবহার করার অর্থ কী। প্রকৃতপক্ষে এটি CSS গ্রেডিয়েন্টের সাথে এটি করার অর্থ হতে পারে, কিন্তু SVG এর একটি সুবিধা হল যে গ্রেডিয়েন্ট নিজেই DOM-এ থাকে। এর মানে হল যে আপনি স্ক্রিপ্টের সাথে এটি পরিবর্তন করতে পারেন, তবে আরও গুরুত্বপূর্ণভাবে আপনি আপনার সামগ্রীতে সূক্ষ্ম পরিবর্তন যোগ করার জন্য SVG-এর অন্তর্নির্মিত অ্যানিমেশন ক্ষমতার সুবিধা নিতে পারেন।

উদাহরণ হিসাবে, আমরা নীচের কোডে লিনিয়ার গ্রেডিয়েন্ট সংজ্ঞা পরিবর্তন করে আমাদের রঙিন HTML5 লোগো পরিবর্তন করব:

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

উপরের এই পরিবর্তনগুলির ফলাফল দেখতে নীচের চিত্রটি দেখুন।

কোডটি আমাদের রৈখিক গ্রেডিয়েন্টের রঙ পরিবর্তন করছে বিভিন্ন রঙের স্টপের মাধ্যমে যা আমরা একটি ক্রমাগত চক্রে সংজ্ঞায়িত করেছি যা চলতে 20 সেকেন্ড সময় নেয়। এর প্রভাব হল যে গ্রেডিয়েন্ট দেখে মনে হচ্ছে এটি একটি অবিচ্ছিন্ন গতিতে পৃষ্ঠাটি উপরে উঠছে যা কখনই থামে না।

এর সৌন্দর্য হল কোন স্ক্রিপ্টের প্রয়োজন নেই! এই কারণেই এটি এই পৃষ্ঠা থেকে একটি রেফারেন্সযুক্ত চিত্র হিসাবে চলে, তবে এটি স্ক্রিপ্টের প্রয়োজনীয়তা সরিয়ে একটি মোবাইল সিপিইউতে কাজের চাপ কমিয়ে দেয়।

এছাড়াও, অভিনব অ্যানিমেশন করার জন্য ন্যূনতম CPU ওভারহেড ব্যবহার করা হয়েছে তা নিশ্চিত করতে ব্রাউজার নিজেই পেইন্টিং সম্পর্কে তার জ্ঞানের সুবিধা নিতে পারে।

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

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

এখান থেকে কোথায়?

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

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

অন্যান্য ভাল সম্পদ

• Inkscape একটি ওপেন সোর্স অঙ্কন অ্যাপ্লিকেশন যা SVG এর ফাইল বিন্যাস হিসাবে ব্যবহার করে।
• ওপেন ক্লিপ আর্ট একটি বিশাল ওপেন সোর্স ক্লিপ আর্ট লাইব্রেরি যেখানে হাজার হাজার SVG ছবি রয়েছে।
• W3C SVG পৃষ্ঠায় স্পেসিফিকেশন, রিসোর্স ইত্যাদির লিঙ্ক রয়েছে।
• রাফায়েল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা পুরানো ব্রাউজারগুলির জন্য দুর্দান্ত ফলব্যাক সহ SVG সামগ্রী আঁকতে এবং অ্যানিমেট করার জন্য একটি সুবিধাজনক API প্রদান করে।
• স্লিপারি রক ইউনিভার্সিটির SVG রিসোর্স - একটি দুর্দান্ত SVG প্রাইমারের একটি লিঙ্ক অন্তর্ভুক্ত করে৷