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


347

আমার একটি ওয়েব অ্যাপ্লিকেশন রয়েছে যা বর্তমানে লগইন করা হয়েছে এমন ব্যবহারকারী অনুসারে ব্র্যান্ড করা হয়েছে I'd আমি পৃষ্ঠার ফ্যাভিকনটিকে ব্যক্তিগত লেবেলের লোগো হিসাবে পরিবর্তন করতে চাই তবে আমি কোনও কোড বা কোনও উদাহরণ খুঁজে পাচ্ছি না কীভাবে এটা করতে. এর আগে কেউ কি সফলভাবে এই কাজ করেছে?

আমি একটি ফোল্ডারে এক ডজন আইকন রাখার চিত্র করছি এবং ফেভিকন.ইকো ফাইলটি ব্যবহার করতে হবে তার রেফারেন্সটি এইচটিএমএল পৃষ্ঠার পাশাপাশি গতিশীলভাবে উত্পন্ন হয়েছে। থটস?



নোট করুন যে ক্রোমের গতিশীল ফ্যাভিকন বাস্তবায়ন বগি এবং খুব বেশি সিপিইউ ব্যবহার করে। কোড. google.com/p/chromium/issues/detail?id=121333
উত্তম

6
আরকেড গেমের লিঙ্কটি পরিবর্তন হয়েছে। এই সঠিক।
তুলিল

ক্যানভাস সহ কোনও টেম্পলেট চিত্রের উপরে অঙ্কন করে কীভাবে গতিশীলভাবে ফ্যাভিকন আপডেট করতে যায় তার জন্য stackoverflow.com/questions/6296574/… দেখুন ।
হ্যান্ডেল করুন

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

উত্তর:


396

কেন না?

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

ফায়ারফক্স এটি দিয়ে শীতল হওয়া উচিত।

বিদ্যমান আইকনগুলি যথাযথভাবে ওভাররাইট করতে সম্পাদিত


2
আমি ভাবছি এটি আমি যা খুঁজছি তার কাছাকাছি, তবে কীভাবে আমি ডাটাবেস থেকে উপযুক্ত এইচআরএফ পাব? আমি মনে করি জাভাস্ক্রিপ্ট থেকে আমাকে একটি সার্ভার লুকআপ করতে হবে, তবে আমি এটি খুব জটিল হয়ে উঠতে চাই না। ভকভগক.
SqlRyan

34
যেহেতু এটি আই-তে কাজ করে না, আপনি গুণটি shortcutথেকে মুছে ফেলতে পারেন relshortcutএকটি অবৈধ আই-মালিকানা লিঙ্ক সম্পর্ক!
ম্যাথিয়াস বাইনেস

8
আপনি কেবল সহজেই কোনও বিদ্যমান ফ্যাভিকন লিঙ্কটি সন্ধান করতে এবং এটি আপডেট করতে বা এটি প্রতিস্থাপন করতে পারেন।
কেপারো

5
গুগল এই url ব্যবহার করে আপনার পছন্দসই
ডট

5
এটি কি Chrome এর কাজের জাভাস্ক্রিপ্ট কনসোলে প্রবেশ করা উচিত? আমি বিভিন্ন সাইটে ফ্যাভিকনগুলি সেভাবে পরিবর্তন করতে পারি না।
পাওয়ারj1984

88

ফায়ারফক্স, অপেরা এবং ক্রোমে কাজ করে এমন কিছু কোড এখানে রয়েছে (এখানে পোস্ট করা প্রতিটি উত্তরের মত নয়)। এখানে কোডের একটি আলাদা ডেমো যা আই 11 এও কাজ করে। নিম্নলিখিত উদাহরণটি সাফারি বা ইন্টারনেট এক্সপ্লোরারে কাজ করতে পারে না।

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head = document.head || document.getElementsByTagName('head')[0];

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}

তারপরে আপনি এটি নীচে ব্যবহার করবেন:

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
 changeFavicon('http://www.google.com/favicon.ico');
};

কাঁটাচামচ করুন বা একটি ডেমো দেখুন


ক্রোম বাগ ক্রোম 6 (মুক্তি সেপ্টেম্বর 10) সংশোধন করা হয়েছে, তাই ক্রোম হ্যাক আর সত্যিই প্রয়োজন হয় না - আসলে, আমি দৃঢ়ভাবে এটি ব্যবহার না করার সুপারিশ করছি যেহেতু এটি এগিয়ে বোতাম বিরতি।
josh3736

ক্রোম বাগটি ঠিক করা থাকতে পারে তবে এটি 14.0.835.187 এ আবার ভাঙা।
ডানর্টন 'ই

ডেমো ক্রোম 21 / WinXP সঙ্গে আমার জন্য কাজ করছে না।
হুগো

ডেমো ক্রোম 26 / উইন 7 এ আমার জন্য কাজ করছে না। document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment
প্যাট্রিক 20

2
এটি বর্তমানে সমর্থিত সমস্ত ব্রাউজারগুলিতে (আইই ১১, এজ, এফএফ, এবং ক্রোম) সাফারি দিয়ে পরীক্ষা করতে অক্ষম
অ্যারন

46

আপনার যদি নিম্নলিখিত এইচটিএমএল স্নিপেট থাকে:

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

আপনি এই লিঙ্কটিতে এইচআরএফ উপাদানটি পরিবর্তন করে জাভাস্ক্রিপ্ট ব্যবহার করে ফেভিকন পরিবর্তন করতে পারেন, উদাহরণস্বরূপ (ধরে নিবেন আপনি জিক্যুয়ারি ব্যবহার করছেন):

$("#favicon").attr("href","favicon2.png");

আপনি একটি ক্যানভাস উপাদান তৈরি করতে এবং ক্যানভাসের একটি টোডাটা URL () হিসাবে এইচআরইএফ সেট করতে পারেন, যেমনটি ফ্যাভিকন ডিফেন্ডারের মতো ।


1
আমি মনে করি জেএস চলার সাথে সাথে ব্রাউজারটি ইতিমধ্যে লিঙ্কটি দেখে এবং লোড করার চেষ্টা করবে favicon.png। এটি সার্ভার-সাইড করার প্রয়োজন হতে পারে।
সিএওও

আপনি যদি জিকিউরি ব্যবহার না করেন তবে আপনি ব্যবহারের hrefবৈশিষ্ট্যটি পরিবর্তন করতে পারেন সম্ভবত আপনি এটি @ পোস্টারটিতে পোস্ট করতে পারেন? #favicondocument.getElementById('favicon').setAttribute('href','favicon2.png')
জোহাঁঞ্চোপিন

37

jQuery সংস্করণ:

$("link[rel='shortcut icon']").attr("href", "favicon.ico");

বা আরও ভাল:

$("link[rel*='icon']").attr("href", "favicon.ico");

ভ্যানিলা জেএস সংস্করণ:

document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";

document.querySelector("link[rel*='icon']").href = "favicon.ico";

@pkExec এটির উপরে এবং কেপারোর উত্তর (নির্বাচিত উত্তর) এর সংমিশ্রণটি এটি আমার জন্য এফএফ এবং ক্রোম উভয় ক্ষেত্রেই কাজ করে।
মিঃশ্মী

17

আরও আধুনিক পদ্ধতি:

const changeFavicon = link => {
  let $favicon = document.querySelector('link[rel="icon"]')
  // If a <link rel="icon"> element already exists,
  // change its href to the given link.
  if ($favicon !== null) {
    $favicon.href = link
  // Otherwise, create a new element and append it to <head>.
  } else {
    $favicon = document.createElement("link")
    $favicon.rel = "icon"
    $favicon.href = link
    document.head.appendChild($favicon)
  }
}

তারপরে আপনি এটির মতো এটি ব্যবহার করতে পারেন:

changeFavicon("http://www.stackoverflow.com/favicon.ico")

11

ফ্যাভিকনটি হেড ট্যাগে এমন কিছু দিয়ে ঘোষিত হয়:

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

আপনার ভিউ ডেটা সহ যে আইকনটি চান তা কেবল পাসওয়ার্ড করতে এবং এটি হেড ট্যাগে ফেলে দিতে সক্ষম হওয়া উচিত।


1
আইআইআরসি যাইহোক, কিছু ব্রাউজার (আমি আপনার দিকে তাকিয়ে আছি, আইই) কখনও কখনও এটি সত্যিই সম্মান করে না।
ম্যাথু শিনকেল

(আমি দেখতে পেলাম আমার স্পষ্ট লিঙ্কের পরিবর্তে সঠিক স্থানে আইকন ফাইল রাখার আরও ভাল ফলাফল হয়েছে)।
ম্যাথু শিনকেল

9

অপেরা, ফায়ারফক্স এবং ক্রোমে গতিশীল ফ্যাভিকন সমর্থন যুক্ত করতে আমি এখানে কিছু কোড ব্যবহার করি। আমি IE বা সাফারি যদিও কাজ করতে পারি না। মূলত ক্রোম গতিশীল ফ্যাভিকনগুলিকে অনুমতি দেয় তবে পৃষ্ঠাগুলির অবস্থান (বা এর মধ্যে কোনও iframe) যতদূর আমি বলতে পারি তার পরিবর্তন কেবল তখনই তা আপডেট করে :

var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
    change: function(iconURL) {
        if (arguments.length == 2) {
            document.title = optionalDocTitle}
        this.addLink(iconURL, "icon")
        this.addLink(iconURL, "shortcut icon")

        // Google Chrome HACK - whenever an IFrame changes location 
        // (even to about:blank), it updates the favicon for some reason
        // It doesn't work on Safari at all though :-(
        if (!IE) { // Disable the IE "click" sound
            if (!window.__IFrame) {
                __IFrame = document.createElement('iframe')
                var s = __IFrame.style
                s.height = s.width = s.left = s.top = s.border = 0
                s.position = 'absolute'
                s.visibility = 'hidden'
                document.body.appendChild(__IFrame)}
            __IFrame.src = 'about:blank'}},

    addLink: function(iconURL, relValue) {
        var link = document.createElement("link")
        link.type = "image/x-icon"
        link.rel = relValue
        link.href = iconURL
        this.removeLinkIfExists(relValue)
        this.docHead.appendChild(link)},

    removeLinkIfExists: function(relValue) {
        var links = this.docHead.getElementsByTagName("link");
        for (var i=0; i<links.length; i++) {
            var link = links[i]
            if (link.type == "image/x-icon" && link.rel == relValue) {
                this.docHead.removeChild(link)
                return}}}, // Assuming only one match at most.

    docHead: document.getElementsByTagName("head")[0]}

ফেভিকনগুলি পরিবর্তন করতে, কেবল উপরেরটি favicon.change("ICON URL")ব্যবহার করুন।

( আমি এর উপর ভিত্তি করে কোডটির জন্য http://softwareas.com/dynamic- ফ্যাভিকনগুলিতে ক্রেডিট ।


ক্রোম বাগ ক্রোম 6 (মুক্তি সেপ্টেম্বর 10) সংশোধন করা হয়েছে, তাই ক্রোম হ্যাক আর সত্যিই প্রয়োজন হয় না - আসলে, আমি দৃঢ়ভাবে এটি ব্যবহার না করার সুপারিশ করছি যেহেতু এটি এগিয়ে বোতাম বিরতি।
josh3736

নির্দিষ্ট বাগের তুলনায় কিছুটা ভিন্ন পরিস্থিতিতে ক্রোমের কাছে এখনও একই বাগ রয়েছে। কোড.google.com/p/chromium/issues/detail?id=99549
ড্যানরটন

4

আমি গ্রেগের পদ্ধতিকে ব্যবহার করব এবং ফেভিকন.িকোর জন্য একটি কাস্টম হ্যান্ডলার তৈরি করব এখানে একটি (সরলীকৃত) হ্যান্ডলার যা কাজ করে:

using System;
using System.IO;
using System.Web;

namespace FaviconOverrider
{
    public class IcoHandler : IHttpHandler
    {
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/x-icon";
        byte[] imageData = imageToByteArray(context.Server.MapPath("/ear.ico"));
        context.Response.BinaryWrite(imageData);
    }

    public bool IsReusable
    {
        get { return true; }
    }

    public byte[] imageToByteArray(string imagePath)
    {
        byte[] imageByteArray;
        using (FileStream fs = new FileStream(imagePath, FileMode.Open, FileAccess.Read))
        {
        imageByteArray = new byte[fs.Length];
        fs.Read(imageByteArray, 0, imageByteArray.Length);
        }

        return imageByteArray;
    }
    }
}

তারপরে আপনি আইআইএস 6-তে ওয়েব কনফিগারেশনের HTHandlers বিভাগে সেই হ্যান্ডলারটি ব্যবহার করতে পারেন বা আইআইএস 7-তে 'হ্যান্ডলার ম্যাপিংস' বৈশিষ্ট্যটি ব্যবহার করতে পারেন।


1
আমি আসলেই কৌতূহল বোধ করি কেন এটিকে হ্রাস করা হলো? অন্যেরা স্ক্রিপ্টিংয়ের উপর নির্ভর করে যা উপলভ্য হতে পারে এবং নাও পাওয়া যায় এটি বিবেচনা করে সেরা উত্তর।
ইথারামাল

1
@ উচ্চতর কারণ এটি দেখতে সার্ভারের দিক থেকে গতিশীল বলে মনে হচ্ছে। ওপি ক্লায়েন্টের পক্ষে গতিশীলতার জন্য জিজ্ঞাসা করছিল।
অ্যালেক্সিস উইল্ক

3

IE এর জন্য এই কাজটি করার একমাত্র উপায় হ'ল * .ico এর জন্য আপনার সার্ভারের সাইড স্ক্রিপ্টিং ল্যাঙ্গুয়েজে (পিএইচপি,। নেট, ইত্যাদি) কল করার অনুরোধগুলির জন্য আপনাকে ওয়েব সার্ভার সেট করা। একক স্ক্রিপ্টে পুনর্নির্দেশ করতে * .ico সেটআপ করুন এবং এই স্ক্রিপ্টটিকে সঠিক ফ্যাভিকন ফাইল সরবরাহ করতে হবে। আমি নিশ্চিত যদি আপনি বিভিন্ন ফ্যাভিকনগুলির মধ্যে একই ব্রাউজারে পিছনে পিছনে বাউন্স করতে সক্ষম হতে চান তবে ক্যাশে নিয়ে কিছু আকর্ষণীয় সমস্যা রয়েছে।


3

যারা jQuery ব্যবহার করেন তাদের জন্য একটি একক লাইন সমাধান রয়েছে:

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');

3

অথবা আপনি যদি একটি ইমোটিকন চান :)

var canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;

var ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText("☠️", 0, 64); 

$("link[rel*='icon']").prop("href", canvas.toDataURL());

Https://koddsson.com/posts/emoji-favicon/ এ প্রপস


2

উইকিপিডিয়া অনুসারে , বিভাগের linkট্যাগ ব্যবহার করে কোন ফ্যাভিকন ফাইলটি লোড করতে হবে তা আপনি headএকটি প্যারামিটার দিয়ে নির্দিষ্ট করতে পারেন rel="icon"

উদাহরণ স্বরূপ:

 <link rel="icon" type="image/png" href="/path/image.png">

আমি কল্পনা করি আপনি যদি এই কলটির জন্য কিছু গতিশীল কন্টেন্ট লিখতে চান তবে আপনার কুকিজের অ্যাক্সেস থাকবে যাতে আপনি নিজের সেশন সম্পর্কিত তথ্য পুনরুদ্ধার করতে পারেন এবং উপযুক্ত সামগ্রী উপস্থাপন করতে পারেন।

আপনি ফাইল ফর্ম্যাটগুলির অবাধ্য হতে পারেন (IE কেবলমাত্র এটি .ICO ফর্ম্যাটকে সমর্থন করে, অন্যদিকে সকলেই পিএনজি এবং জিআইএফ চিত্র সমর্থন করে) এবং সম্ভবত ব্রাউজারে এবং প্রক্সিগুলির মাধ্যমে বিষয়গুলি ক্যাশে করা হয়। এটি ফ্যাভিকনের মূল আইটেনশনের কারণে হবে, বিশেষত, কোনও সাইটের মিনি-লোগো সহ বুকমার্ক চিহ্নিত করার জন্য।


তার চেয়ে অনেক বেশি জেনারেটর সাইটে স্ট্যাকওভারফ্লো .com/a/45301651/ 661584 প্রশ্নাবলী / তথ্য আপনাকে অবাক করে দেবে - এই বিষয়ে অনেক কিছুই আছে।
মেমডেভোপার

3
ওয়েব 9 বছরে অনেক পরিবর্তন করে।
স্ট্যাটিক্সান

2

হ্যাঁ সম্পূর্ণ সম্ভব

  • ফেভিকন.ইকো (এবং অন্যান্য ফাইল লিঙ্কগুলির পরে - নীচের উত্তর লিঙ্কটি দেখুন) এর পরে একটি ক্যোরিস্ট্রিং ব্যবহার করুন
  • কেবল নিশ্চিত করুন যে সার্ভারটি সঠিক চিত্র ফাইলের সাথে "কিছু ইউজারআইডি" তে সাড়া ফেলেছে (এটি স্ট্যাটিক রাউটিং বিধি, বা গতিশীল সার্ভার সাইড কোড হতে পারে )।

যেমন

<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">

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

কিন্তু ফ্যাবিকনগুলি ঠিকভাবে করতে (তার আসলে একটি সত্যিই জটিল বিষয় ) দয়া করে উত্তর দিন এখানে দেখতে https://stackoverflow.com/a/45301651/661584

সমস্ত বিবরণ নিজেই কাজ করার চেয়ে অনেক বেশি সহজ easier

উপভোগ করুন।


হ্যাঁ, লিঙ্কটি ভাল। আমি মনে করি যে এই উত্তরগুলিতে আইই তে কাজ না করার মূল কারণ হ'ল তারা সেই ডিফল্ট আইকনটি ব্যবহার করে না <link>, বরং এর পরিবর্তে এই জাতীয় apple-touch-iconবা অন্য কোনও রূপের সন্ধান করে।
অ্যালেক্সিস উইল্ক 25'18

1

আমি আমার প্রকল্পগুলিতে ফেভিকো.জেএস ব্যবহার করি।

এটি ফেভিকনটিকে পূর্বনির্ধারিত আকার এবং কাস্টমগুলিতে বিস্তৃত করতে দেয়।

অভ্যন্তরীণভাবে এটি আইকন এনকোডিংয়ের canvasজন্য রেন্ডারিং এবং base64ডেটা URL এর জন্য ব্যবহার করে।

লাইব্রেরিতে এছাড়াও দুর্দান্ত বৈশিষ্ট্য রয়েছে: আইকন ব্যাজ এবং অ্যানিমেশনগুলি; ইচ্ছাকৃতভাবে, আপনি এমনকি আইকনটিতে ওয়েবক্যাম ভিডিওটি স্ট্রিম করতে পারেন :)


লিঙ্কটি এবং গ্রন্থাগারটি খুব দরকারী, দয়া করে এটি কীভাবে কাজ করে তার একটি বিবরণ সরবরাহ করুন যাতে এটিও বিবৃত হিসাবে প্রশ্নের বৈধ উত্তর হয়ে যায়।
দিমা তিসনেক

1
ধন্যবাদ @ ডিমাটিস্নেক। আমি আমার উত্তর আপডেট করেছি।
অস্কার নেভারেজ

0

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

এখন যে ক্রোম এসভিজি ফেভিকনগুলিকে সমর্থন করে এটি একে পুরোপুরি সহজ করে তোলে।

টেম্পারমনকি স্ক্রিপ্ট

টেম্পারমনকি স্ক্রিপ্টের জন্য https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f এ একটি ছদ্মবেশ পান যা আমি ডেকে আনা একটি ডেমো সাইটকে নির্দেশ করে https://elliz.github.io/svg-favicon/

বেসিক কোড

এটি অন্য উত্তর থেকে রূপান্তরিত ... উন্নত করা যেতে পারে তবে আমার প্রয়োজনের জন্য যথেষ্ট ভাল।

(function() {
    'use strict';

    // play with https://codepen.io/elliz/full/ygvgay for getting it right
    // viewBox is required but does not need to be 16x16
    const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <circle cx="8" cy="8" r="7.2" fill="gold" stroke="#000" stroke-width="1" />
      <circle cx="8" cy="8" r="3.1" fill="#fff" stroke="#000" stroke-width="1" />
    </svg>
    `;

    var favicon_link_html = document.createElement('link');
    favicon_link_html.rel = 'icon';
    favicon_link_html.href = svgToDataUri(svg);
    favicon_link_html.type = 'image/svg+xml';

    try {
        let favicons = document.querySelectorAll('link[rel~="icon"]');
        favicons.forEach(function(favicon) {
            favicon.parentNode.removeChild(favicon);
        });

        const head = document.getElementsByTagName('head')[0];
        head.insertBefore( favicon_link_html, head.firstChild );
    }
    catch(e) { }

    // functions -------------------------------
    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function svgToDataUri(svg) {
        // these may not all be needed - used to be for uri-encoded svg in old browsers
        var encoded = svg.replace(/\s+/g, " ")
        encoded = replaceAll(encoded, "%", "%25");
        encoded = replaceAll(encoded, "> <", "><"); // normalise spaces elements
        encoded = replaceAll(encoded, "; }", ";}"); // normalise spaces css
        encoded = replaceAll(encoded, "<", "%3c");
        encoded = replaceAll(encoded, ">", "%3e");
        encoded = replaceAll(encoded, "\"", "'"); // normalise quotes ... possible issues with quotes in <text>
        encoded = replaceAll(encoded, "#", "%23"); // needed for ie and firefox
        encoded = replaceAll(encoded, "{", "%7b");
        encoded = replaceAll(encoded, "}", "%7d");
        encoded = replaceAll(encoded, "|", "%7c");
        encoded = replaceAll(encoded, "^", "%5e");
        encoded = replaceAll(encoded, "`", "%60");
        encoded = replaceAll(encoded, "@", "%40");
        var dataUri = 'data:image/svg+xml;charset=UTF-8,' + encoded.trim();
        return dataUri;
    }

})();

শীর্ষে কনস্টে কেবল নিজের নিজস্ব এসভিজি (সম্ভবত আপনি কোনও সরঞ্জাম ব্যবহার করছেন তবে জ্যাক আর্কিবাল্ডের এসভিজিওএমজি দিয়ে পরিষ্কার করুন) পপ করুন। নিশ্চিত হয়ে নিন যে এটি বর্গক্ষেত্র (ভিউবক্স বৈশিষ্ট্যটি ব্যবহার করে) এবং আপনি যেতে ভাল।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.