LogoSVG URL এনকোডার

SVG URL এনকোডার

আপনি যদি SVG ডিকোড করতে চান, এখানে এনকোড করা SVG রাখুন
প্রিভিউ

SVG-কে CSS-এ URL হিসেবে ব্যবহার করা যায়, কিন্তু এনকোডিং ছাড়া এটি সব ব্রাউজারে কাজ করবে না।
SVG-তে encodeURIComponent() এনকোডিং ব্যবহার করলে এটি সর্বত্র কাজ করবে।

SVG-এ xmlns অ্যাট্রিবিউট থাকতে হবে: xmlns='http: //www.w3.org/2000/svg'।
যদি না থাকে, স্বয়ংক্রিয়ভাবে যোগ হবে

এনকোড করা SVG background, border-image বা mask-এ ব্যবহার করা যায় (লাইভ ডেমো)।

FAQ

SVG কী?

SVG মানে Scalable Vector Graphics। ওয়েবের জন্য ভেক্টর-ভিত্তিক গ্রাফিক্স সংজ্ঞায়িত করতে SVG ব্যবহার করা হয়। SVG XML ফরম্যাটে গ্রাফিক্স নির্ধারণ করে। SVG ফাইলের প্রতিটি উপাদান এবং বৈশিষ্ট্য অ্যানিমেট করা যায়।

CSS-এ SVG কীভাবে ব্যবহার করবেন?

CSS-এ সরাসরি SVG কোড ব্যবহার করতে আপনাকে SVG কোডটি এনকোড করতে হবে। এটি করতে এই SVG URL Encoder টুল বা JavaScript ফাংশন encodeURIComponent() ব্যবহার করতে পারেন। এনকোড করা SVG ডেটা URI, url() ফাংশনের মাধ্যমে background-image, border-image এবং mask CSS প্রপার্টির সাথে ব্যবহার করা যায়। উদাহরণ: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

CSS-এ SVG-এর রঙ কীভাবে পরিবর্তন করবেন?

যেকোনো SVG-এর রঙ পরিবর্তন করতে, mask এবং background-color CSS প্রপার্টি একত্রে ব্যবহার করতে পারেন। নীচের উদাহরণটি SVG-এর রঙ নীলে পরিবর্তন করবে। উদাহরণ: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

URL কী?

URL (Uniform Resource Locator) হলো ইন্টারনেটে একটি অনন্য রিসোর্সের ঠিকানা। এটি ব্রাউজারগুলোর দ্বারা HTML পেজ, CSS ডকুমেন্ট, ছবি ইত্যাদি রিসোর্স পুনরুদ্ধারের অন্যতম প্রধান পদ্ধতি।

URL কীভাবে এনকোড করবেন?

URL এনকোড করতে encodeURIComponent() ফাংশন ব্যবহার করা যায়, যা URI-এর নির্দিষ্ট অক্ষরগুলিকে তাদের UTF-8 এনকোডিং প্রতিনিধিত্বকারী এক, দুই, তিন বা চারটি এস্কেপ সিকোয়েন্স দিয়ে প্রতিস্থাপন করে। encodeURI() এর তুলনায় এই ফাংশনটি আরও বেশি অক্ষর এনকোড করে, URI সিনট্যাক্সের অংশ হওয়া অক্ষরগুলি সহ।

URL কীভাবে ডিকোড করবেন?

URL ডিকোড করতে decodeURIComponent() ফাংশন ব্যবহার করতে পারেন, যা %XX আকারের প্রতিটি এস্কেপ সিকোয়েন্সকে একটি UTF-8 কোড ইউনিট (এক বাইট) হিসেবে বিবেচনা করে URI ডিকোড করে। UTF-8-এ, প্রথম বাইটে শীর্ষস্থানীয় 1 বিটের সংখ্যা (যা 0, 2, 3 বা 4 হতে পারে) সেই অক্ষরে বাইটের সংখ্যা নির্দেশ করে।

এনকোড করা SVG-এর উদাহরণ

ব্যাকগ্রাউন্ডে
মাস্কে
বর্ডারে

SVG থেকে CSS রূপান্তর সারণি

SVGCSS
<svg><circle r="50" cx="50" cy="50" fill="tomato"/><circle r="41" cx="47" cy="50" fill="orange"/><circle r="33" cx="48" cy="53" fill="gold"/><circle r="25" cx="49" cy="51" fill="yellowgreen"/><circle r="17" cx="52" cy="50" fill="lightseagreen"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3C/svg%3E");
<svg><rect x="10" y="10" width="30" height="30"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='30' height='30'/%3E%3C/svg%3E");
<svg><circle cx="25" cy="75" r="20"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='75' r='20'/%3E%3C/svg%3E");
<svg><ellipse cx="75" cy="75" rx="20" ry="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='75' cy='75' rx='20' ry='5'/%3E%3C/svg%3E");
<svg><line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='10' x2='50' y1='110' y2='150' stroke='black' stroke-width='5'/%3E%3C/svg%3E");
<svg><polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145'/%3E%3C/svg%3E");
<svg><polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180'/%3E%3C/svg%3E");
<svg><polygon points="12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10" fill="gold"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10' fill='gold'/%3E%3C/svg%3E");
<svg><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
<svg><path d="M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z'/%3E%3C/svg%3E");
<svg><path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 10 C 70 20, 110 20, 110 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 10 C 120 20, 180 20, 170 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 60 C 20 80, 40 80, 50 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 60 C 70 80, 110 80, 110 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 60 C 120 80, 180 80, 170 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 110 C 20 140, 40 140, 50 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 110 C 70 140, 110 140, 110 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 110 C 120 140, 180 140, 170 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' stroke='black' fill='transparent'/%3E%3C/svg%3E");