আপনার ওয়েবপেজে এসভিজি গ্রাফিক্স কিভাবে স্থাপন করবেন

SVG বা স্কেলেবল ভেক্টর গ্রাফিক্স আপনাকে আরও জটিল চিত্রগুলি আঁকতে দেয় এবং তাদের ওয়েব পেজগুলিতে উপস্থাপিত করে। কিন্তু আপনি কেবল SVG ট্যাগগুলি গ্রহণ করতে এবং তাদের HTML এ স্ল্যাপ করতে পারবেন না। তারা দেখাবে না এবং আপনার পৃষ্ঠাটি অবৈধ হবে। পরিবর্তে, আপনি তিনটি পদ্ধতি এক ব্যবহার করতে হবে।

এসভিজি এম্বেড করার জন্য বস্তু ট্যাগ ব্যবহার করুন

এইচটিএমএল ট্যাগ আপনার ওয়েব পেজে একটি SVG গ্রাফিক এম্বেড করা হবে। আপনি যে বস্তুটিটি খুলতে চান তার SVG ফাইলটিকে সংজ্ঞায়িত করার জন্য একটি অ্যাট্রিবিউট ট্যাগ লিখুন। আপনার SVG চিত্র (পিক্সেল) এর প্রস্থ এবং উচ্চতা নির্ধারণ করতে আপনি প্রস্থ ও উচ্চতা বৈশিষ্ট্যগুলিও অন্তর্ভুক্ত করতে হবে।

ক্রস-ব্রাউজারের সামঞ্জস্যের জন্য, আপনাকে অবশ্যই টাইপ অ্যাট্রিবিউট অন্তর্ভুক্ত করতে হবে, যা পড়তে হবে:

টাইপ = "ইমেজ / SVG + XML"

এবং ব্রাউজারের জন্য একটি কোডব্যাজ যা এটি সমর্থন করে না (ইন্টারনেট এক্সপ্লোরার 8 এবং নিম্ন)। আপনার কোডব্যাজ ব্রাউজারের জন্য একটি SVG প্লাগইন নির্দেশ করবে যে SVG সমর্থন করে না। সর্বাধিক ব্যবহৃত প্লাগইন হল অ্যাডোবি থেকে http://www.adobe.com/svg/viewer/install/। তবে, এই প্লাগইন আর Adobe এর দ্বারা সমর্থিত নয় আরেকটি বিকল্প হল Ssrc SVG প্লাগইন থেকে সাভারেজ সফ্টওয়্যার রিসার্চ http://www.savarese.com/software/svgplugin/।

আপনার অবজেক্ট এই মত চেহারা হবে:

SVG জন্য বস্তু ব্যবহারের জন্য টিপস

  • আপনি এম্বেড করা ইমেজ হিসাবে প্রস্থ এবং উচ্চতা অন্তত বড় হিসাবে নিশ্চিত করুন। অন্যথায়, আপনার ছবিটি ক্লিপ করা হতে পারে।
  • আপনি সঠিক কন্টেন্ট টাইপ (টাইপ = "ইমেজ / SVG + xml") অন্তর্ভুক্ত না থাকলে আপনার SVG সঠিকভাবে প্রদর্শন করতে পারে না, তাই আমি এটি ছাড়াই সুপারিশ করি না।
  • আপনি SVG ফাইলগুলি প্রদর্শন করবেন না এমন ব্রাউজারের জন্য বস্তুর ট্যাগের মধ্যে ফাঁকফোকর তথ্য অন্তর্ভুক্ত করতে পারেন।
  • আপনি পরামিতিগুলিতে আপনার SVG এবং বিষয়বস্তু প্রকারের উত্সটি সেট করতে পারেন। এটি IE 6 এবং 7 এর মধ্যে ভাল কাজ করতে পারে:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" প্রস্থ = "110" উচ্চতা = "60" কোডব্যাজ = "http://www.savarese.com/software/svgplugin/">

মনে রাখবেন যে এটি একটি ক্লাসিড এটি কাজ করতে প্রয়োজন।

একটি বস্তু ট্যাগ উদাহরণে একটি SVG দেখুন।

এম্বেড ট্যাগ দিয়ে SVG এম্বেড করুন

SVG সহ অন্য একটি বিকল্প আপনার ট্যাগ ব্যবহার করতে হবে। আপনি প্রস্থ, <, উচ্চতা, প্রকার এবং কোডব্যাশ> সহ বস্তু ট্যাগ হিসাবে প্রায় একই বৈশিষ্ট্য ব্যবহার করেন। একমাত্র পার্থক্য হল যে ডেটার পরিবর্তে, আপনি আপনার এসভিজি ডকুমেন্ট URLটি src অ্যাট্রিবিউটে রাখেন।

আপনার এম্বেড এই মত দেখতে হবে:

src = "http://your-domain.here/z-circle.svg" প্রস্থ = "210" উচ্চতা = "210" টাইপ = "চিত্র / স্বেচ্ছাসেবী + xml" কোডব্যাশ = "http://www.adobe.com / svg / দর্শক / ইনস্টল "/>

SVG এর জন্য এম্বেড ব্যবহারের পরামর্শ

  • এম্বেড ট্যাগটি বৈধ HTML4 নয়, তবে এটি বৈধ HTML5, তাই যদি আপনি এটি একটি HTML4 পৃষ্ঠাতে ব্যবহার করেন তবে আপনাকে মনে রাখতে হবে যে আপনার পৃষ্ঠাটি যাচাই করবে না।
  • সর্বোত্তম সামঞ্জস্যের জন্য src অ্যাট্রিবিউটের একটি সম্পূর্ণ প্রশস্ত ডোমেন নাম ব্যবহার করুন।
  • অ্যাডোব প্লাগইন সহ এম্বেড ট্যাগ ব্যবহার করে এমন কিছু রিপোর্ট রয়েছে যা মজিলা সংস্করণ 1.0 থেকে 1.4 ক্র্যাশ করবে।

একটি এম্বেড ট্যাগ উদাহরণে একটি SVG দেখুন।

SVG অন্তর্ভুক্ত করার জন্য একটি আইফ্রেম ব্যবহার করুন

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

আপনার আইফ্রেম এই মত দেখতে হবে: