जब पृष्ठभूमि-छवि के रूप में कार्य किया जा रहा हो तो SVG रंग भरें

Question

पृष्ठ कोड के साथ सीधे एसवीजी आउटपुट को इनलाइन पर रखने से मैं सीएसएस के साथ रंगों को भरने में सक्षम हूं जैसे:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

यह बहुत अच्छा काम करता है, हालाँकि मैं एसवीजी की "भरण" विशेषता को संशोधित करने का एक तरीका खोज रहा हूँ जब इसे एक बैकग्राउंड-इमेज के रूप में परोसा जा रहा है।

html {      
    background-image: url(../img/bg.svg);
}

अब मैं कैसे रंग बदल सकता हूं? क्या यह भी संभव है?

संदर्भ के लिए, यहां मेरी बाहरी SVG फ़ाइल की सामग्री दी गई है:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

Comments

मैं अपने जवाब के लिए अक्सर प्रॉप्स से टकरा जाता हूं। आपको इसे स्वीकार किए गए उत्तर में बदलने पर विचार करना चाहिए ताकि यह याद न हो।

— रायन

Answer 1

ऐसा करने का एक तरीका कुछ सर्वर साइड तंत्र से अपने svg की सेवा करना है। बस एक संसाधन सर्वर पक्ष बनाएं जो आपके svg को GET मापदंडों के अनुसार आउटपुट करता है, और आप इसे एक निश्चित यूआरएल पर सेवा देते हैं।

फिर आप बस अपने css में उस url का उपयोग करें।

क्योंकि एक पृष्ठभूमि के रूप में, यह डोम का हिस्सा नहीं है और आप इसे हेरफेर नहीं कर सकते। एक अन्य संभावना यह होगी कि इसे नियमित रूप से उपयोग किया जाए, इसे सामान्य तरीके से एक पृष्ठ में एम्बेड करें, लेकिन इसे पूरी तरह से स्थिति दें, इसे पृष्ठ की पूरी चौड़ाई और ऊंचाई बनाएं और फिर इसे अन्य सभी DOM तत्वों के पीछे लगाने के लिए z-index css संपत्ति का उपयोग करें एक पृष्ठ पर

Comments

यदि आप सर्वर-साइड स्क्रिप्ट से एसवीजी की सेवा कर रहे हैं तो यह न भूलें कि यह सुनिश्चित करने के लिए कि आप सही MIME हेडर भी भेजें । PHP में यह होगा:<?php header('Content-type: image/svg+xml'); ?>

— शाऊल फूटली

आप svg छवि को मास्क के रूप में उपयोग कर सकते हैं और तत्व की पृष्ठभूमि-रंग में हेरफेर कर सकते हैं। यह भरने को बदलने के समान प्रभाव पड़ेगा। (विस्तृत जवाब प्रदान की)

— widged

यह उत्तर 2012 की तरह शानदार था, लेकिन अब सीएसएस मास्क और / या फिल्टर कुछ समय के लिए सभी ब्राउज़रों में समर्थित हैं। मेरा सुझाव है कि इसे पढ़ने वाला कोई भी व्यक्ति नीचे दिए गए विस्तृत उत्तर में दिए गए लिंक की जांच कर सकता है या बस यहां सीएसएस मास्क को छोड़ सकता है , जो कि वास्तव में आसान समाधान है - ध्यान दें कि इसके लिए अभी भी नियम के 2 संस्करण की आवश्यकता है, वर्तमान में -webkit- पूर्वसर्ग समय। Microsoft Edge के लिए, वर्तमान में CSS फ़िल्टर समर्थित हैं लेकिन अभी तक मास्क नहीं हैं।

— जोहलड़ी

ऐसे कई समाधान हैं जो आजकल काम करते हैं, मैं मानता हूं कि यह जवाब अब संभावनाओं की वर्तमान स्थिति को दर्शाता है।

— डेविड नेटो

Answer 2

मुझे कुछ इसी तरह की जरूरत थी और सीएसएस के साथ रहना चाहता था। यहां LESS और SCSS मिक्सिन्स के साथ-साथ प्लेन सीएसएस भी हैं जो आपकी मदद कर सकते हैं। दुर्भाग्य से, यह ब्राउज़र समर्थन थोड़ा ढीला है। ब्राउज़र समर्थन पर विवरण के लिए नीचे देखें।

कम मिश्रण:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

कम उपयोग:

.element-color(#fff);

---

SCSS मिश्रण:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS उपयोग:

@include element-color(#fff);

---

सीएसएस:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

---

यहां आपकी एसवी फ़ाइल में पूर्ण एसवीजी कोड एम्बेड करने के बारे में अधिक जानकारी है । इसमें ब्राउज़र संगतता का भी उल्लेख किया गया है जो व्यवहार्य विकल्प होने के लिए थोड़ा छोटा है।

Comments

हालांकि थोड़ा ओवरहेड है, क्योंकि मुझे सभी svg आइटमों को हार्डकोड करना है, मुझे लगता है कि यह थोड़ी देर के लिए सबसे अच्छा समाधान है। साभार

— एड्रियनो रोजा

यदि आप इस तरह से उपयोग करना चाहते हैं तो आपको Sass या कम जैसे CSS प्रीप्रोसेसर का उपयोग करने की आवश्यकता है। आप एक का उपयोग नहीं कर रहे हैं तो आप सिर्फ प्रत्येक रंग के लिए है कि पृष्ठभूमि छवि लाइन का उपयोग करना होगा

— अनुकूल संहिता

ध्यान दें कि #फ़ायरफ़ॉक्स में इस काम को करने के लिए आपको अपने हेक्स रंगों के वर्ण को urlencode करना होगा । तो कुछ ऐसा <svg fill="#ffffff" ...></svg>बन जाता है <svg fill="%23ffffff" ...></svg>।

— Swen

मीठी विधि। क्या आपको उस तरह की पृष्ठभूमि-छवि में svg को एनकोड करना है? क्या आप इसे किसी तरह से लिंक नहीं कर सकते?

— ल्यूक

मुझे यह साइट आपको उपयोग के लिए पूरी तरह से एन्कोडेड URL देने के लिए उपयोगी लगी : yoksel.github.io/url-encoder - बस इसमें SVG कोड कॉपी करें और लौटे CSS :-)

— अनुकूल कोड

Answer 3

आप सीएसएस मास्क का उपयोग कर सकते हैं, 'मास्क' संपत्ति के साथ, आप एक मुखौटा बनाते हैं जो एक तत्व पर लागू होता है।

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

अधिक जानकारी के लिए इस बेहतरीन लेख को देखें: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Comments

यह अच्छा है लेकिन जब इनपुट क्षेत्र के भीतर किसी आइकन पर लागू किया जाता है तो सभी इनपुट टेक्स्ट छिपे होते हैं।

— अस्तित्व के प्रति

IE में समर्थित नहीं

— करीम

सुपर कूल जवाब, लेकिन आप अब एक मंडराना या कुछ इस तरह से पृष्ठभूमि-रंग का उपयोग नहीं कर सकते हैं

— पॉल क्रुगर

ऐसा लगता है कि यह मुश्किल से समर्थन किया गया है - यदि बहुत से उपयोगकर्ता 2018 के अंत में आज के लिए इसे व्यवहार्य नहीं देख पाएंगे। caniuse.com/#feat=css-masks

— क्रिस मोसचिनी

समर 2019: इस ग्रह पर 94% ब्राउज़र "मास्क-इमेज" या "-webkit- मास्क-इमेज" स्टाइल का समर्थन करते हैं

— दिमित्री कुलहिन

Answer 4

फिर भी एक और तरीका मुखौटा का उपयोग करना है। आप फिर नकाबपोश तत्व की पृष्ठभूमि का रंग बदलते हैं। यह svg के भरण गुण को बदलने के समान प्रभाव डालता है।

HTML:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

सीएसएस:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

आपको यहां पूर्ण ट्यूटोरियल मिलेगा: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (मेरा अपना नहीं)। यह विभिन्न प्रकार के दृष्टिकोणों का प्रस्ताव करता है (नकाब तक सीमित नहीं)।

Comments

इस पर ध्यान देने वाली एक बात ब्राउज़र समर्थन है। मेरा मानना ​​है कि IE (हमेशा की तरह) इस पर पीछे है।

— मैथ्यू जॉनसन

दुर्भाग्य maskसे आईई द्वारा समर्थित नहीं है और न ही एज: caniuse.com/#search=mask

— alpipego

क्रोम में मेरे लिए काम नहीं कर रहा है। संपादित करें: ओह एनवीएम ... मेरे पास ऑटोपरिफ़िशर सक्षम नहीं है। मैंने सोचा था कि विक्रेताओं को उपसर्गों का उपयोग बंद करना चाहिए था ?!

— १

नवीनतम क्रोम और फ़ायरफ़ॉक्स में काम करता है

— टिक

Answer 5

यह सास के साथ संभव है! केवल एक चीज आपको अपने svg कोड को url-encode करना है। और यह सैस में एक सहायक कार्य के साथ संभव है। मैंने इसके लिए एक कोडपेन बनाया है। इसे देखो:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

Comments

यह बहुत अच्छा काम करता है। केवल समस्या: IE10 में आइकन बहुत छोटा है (मुझे लगता है कि दिए गए आकार का 10% है।

— हेनिंग फिशर

Answer 6

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

कोडबेन लेख और डेमो

Comments

यह विधि बच्चों सहित पूरे ऑब्जेक्ट पर फ़िल्टर लागू करेगी।

— क्रिज़िस्तोफ़ एंटोनिक

Answer 7

अपने svg को टेक्स्ट के रूप में डाउनलोड करें।

पेंट / स्ट्रोक / रंग भरने के लिए जावास्क्रिप्ट का उपयोग करके अपने svg टेक्स्ट को संशोधित करें [रंग]।

फिर संशोधित एसवीजी स्ट्रिंग इनलाइन को अपने सीएसएस में एम्बेड करें जैसा कि यहां वर्णित है ।

Answer 8

अब आप इसे क्लाइंट की तरफ इस तरह से प्राप्त कर सकते हैं:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

यहाँ बेला!

Comments

आपको एसवीजी के लिए बेस 64 के उपयोग से बचना चाहिए क्योंकि यह अनावश्यक है, आपकी फ़ाइलों को बड़ा बनाता है और यहां तक ​​कि कोड के उन हिस्सों को प्रभावी ढंग से संपीड़ित करने से GZIP को रोकता है।

— Inta

यह एन्कोडिंग क्लाइंट की तरफ से हो रही है, शायद पूरी तरह से भागने के लिए ...

— diachedelic

यह कहे बिना जाता है कि आप जेएस के साथ कुछ भी कर सकते हैं। बात जेएस से बचने की है।

— मंगल

Answer 9

आप SVG को एक वैरिएबल में स्टोर कर सकते हैं। फिर अपनी आवश्यकताओं के आधार पर एसवीजी स्ट्रिंग में हेरफेर करें (यानी, सेट चौड़ाई, ऊंचाई, रंग, आदि)। फिर परिणाम को पृष्ठभूमि सेट करने के लिए उपयोग करें, जैसे

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

मैंने एक डेमो भी बनाया है, http://sassmeister.com/gist/4cf0265c5d0143a9e734 ।

यह कोड SVG के बारे में कुछ धारणाएँ बनाता है, जैसे कि <svg /> तत्व में एक मौजूदा रंग नहीं है और न ही चौड़ाई या ऊंचाई के गुण निर्धारित हैं। चूंकि इनपुट SCSS दस्तावेज़ में हार्डकोड किया गया है, इसलिए इन बाधाओं को लागू करना काफी आसान है।

कोड दोहराव के बारे में चिंता न करें। gzip संपीड़न अंतर को नगण्य बनाता है।

Comments

डुप्लिकेट कोड एक कोड गंध है, इसलिए लोगों को सुझाव देना चाहिए कि आपके उदाहरण के मामले में डुप्लिकेट कोड के बारे में चिंता नहीं करनी चाहिए, यह एक अच्छा विचार नहीं है, हालांकि कहा कि मैं यह नहीं देख सकता कि आपका कोड कहां डुप्लिकेट है? मुझे लगता है कि यह बेहतर होगा यदि आप टिप्पणी को पूरी तरह से हटा दें।

— को प्रोग्रामिंग

Answer 10

आप इसके लिए अपना SCSS फ़ंक्शन बना सकते हैं। अपने config.rb फ़ाइल में निम्न जोड़ रहा है।

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

फिर आप इसे अपने CSS में इस्तेमाल कर सकते हैं:

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

आपको अपनी एसवीजी फाइलों को संपादित करने और मार्कअप में किसी भी भरण विशेषताओं को भरने के साथ भरने की आवश्यकता होगी = "{color}"

आइकन पथ हमेशा एक ही config.rb फ़ाइल में आपके images_dir पैरामीटर के सापेक्ष होता है।

कुछ अन्य समाधानों के समान है, लेकिन यह बहुत साफ है और आपकी SCSS फ़ाइलों को चुस्त रखता है!

Comments

यह जीथुब-इश्यू से है । यदि कोई व्यक्ति वहां चर्चा को पढ़ना चाहता है तो उसे यहाँ संदर्भित करना है

— MMachinegun

Answer 11

कुछ (बहुत विशिष्ट) स्थितियों में फ़िल्टर का उपयोग करके इसे प्राप्त किया जा सकता है । उदाहरण के लिए, आप ह्यू का उपयोग करके 45 डिग्री को घुमाकर एक नीली एसवीजी छवि को बैंगनी में बदल सकते हैं filter: hue-rotate(45deg);। ब्राउज़र का समर्थन न्यूनतम है लेकिन यह अभी भी एक दिलचस्प तकनीक है।

डेमो

Answer 12

मोनोक्रोम पृष्ठभूमि के लिए आप एक मास्क के साथ एक svg का उपयोग कर सकते हैं, जहां पृष्ठभूमि का रंग प्रदर्शित किया जाना चाहिए

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

और इस सीएसएस का उपयोग करने से

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);

Answer 13

हम चाहते हैं कि किसी भी रंग बनाने के लिए ह्यू-रोटेट, चमक और संतृप्ति के साथ सीपिया फिल्टर का उपयोग करें।

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

Answer 14

यहाँ शो के लिए देर से, लेकिन, मैं SVG बहुभुज में एक रंग भरने में सक्षम था, अगर आप सीधे SVG कोड को संपादित करने में सक्षम हैं, इसलिए उदाहरण के लिए निम्नलिखित svg लाल रंग के बजाय डिफ़ॉल्ट काला प्रदान करता है। मैंने हालांकि Chrome के बाहर परीक्षण नहीं किया है:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>

Answer 15

यह मेरी पसंदीदा विधि है, लेकिन आपका ब्राउज़र समर्थन बहुत प्रगतिशील होना चाहिए। मुखौटा संपत्ति के साथ आप एक मुखौटा बनाते हैं जो एक तत्व पर लागू होता है। हर जगह मुखौटा अपारदर्शी या ठोस होता है, अंतर्निहित छवि से पता चलता है। जहाँ यह पारदर्शी है, अंतर्निहित छवि बाहर की ओर, या छिपी हुई है। CSS मास्क-छवि के लिए सिंटैक्स पृष्ठभूमि-छवि के समान है। कोडपेन को देखेंmask

Answer 16

बहुत सारे आईएफएस, लेकिन अगर आपका पूर्व बेस 64 एनकोडेड एसवीजी शुरू होता है:

<svg fill="#000000

फिर base64 एन्कोडेड स्ट्रिंग शुरू होगी:

PHN2ZyBmaWxsPSIjMDAwMDAw

यदि पूर्व-एन्कोडेड स्ट्रिंग प्रारंभ होती है:

<svg fill="#bfa76e

तब यह एनकोड करता है:

PHN2ZyBmaWxsPSIjYmZhNzZl

दोनों एन्कोड किए गए तार एक ही शुरू होते हैं:

PHN2ZyBmaWxsPSIj

बेस 64 एनकोडिंग का क्विकर हर 3 इनपुट कैरेक्टर 4 आउटपुट कैरेक्टर बनते हैं। एसवीजी इस तरह से शुरू होता है तो 6-वर्ण हेक्स फिल रंग एक एन्कोडिंग ब्लॉक 'सीमा' पर शुरू होता है। इसलिए आप आसानी से एक क्रॉस-ब्राउज़र जेएस प्रतिस्थापित कर सकते हैं:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

लेकिन ऊपर tnt-rox उत्तर आगे बढ़ने का रास्ता है।