1. How do SVG files become base64

The idea is simple: read the file as a Base64 URL using the readAsDataURL in FileReader

Code:

<input type="file" accept=".svg"/>

<script>
  window.onload=function(){
  	document.querySelector('input').onchange=function(event){
    		const files = event.target.files;
      	if(files && files.length){
          // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/FileReader
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
              	console.log('base64Url：', reader.result); }}else{
        	 console.log("No file selected")}}}</script>
Copy the code

The above method of converting a file to a Base64 image path applies to any image format

2. How will base64 from SVG be displayed on a page

2.1. What label is displayed on the page

Use the img image to set SRC to base64

2.2 SVG tags must be used

const base64Url = 'data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciP gogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMM CwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgI E01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogI CAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkd Gg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K'
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL);
xhr.addEventListener('load'.function (ev) {
    const xml = ev.target.response; // The browser gets the SVG string
  	// Create a parser that converts SVG strings into DOM elements
    const dom = new DOMParser();
    const svg = dom.parseFromString(xml, 'image/svg+xml');
    // Set the theme color, or other properties
     svg.rootElement.setAttribute('fill'.'#478aee');
  console.log(svg.rootElement);
});
xhr.send(null);
Copy the code

3, how to set the theme color of base64 from SVG without request

Because the base64 image path is divided into: [Data URL Scheme Type] + [base encoded character]

Ideas:

  1. getbase64UrlIn the afterbase64Encoded data
  2. Proceed with the data you getbase64Decoder decompilation
  3. Dynamically create an element that will decode the string after it passesinnerHTMLParsing.
  4. Parse it out and get itsvgElement, bysetAttributeSet up thefillFill color (you can also set other properties)
  5. throughouterHTMLGet the completesvgstring
  6. thensvgString rendering to the page
const dataURL = 'data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciP gogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMM CwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgI E01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogI CAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkd Gg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K';
const encoded = img.src.substring(26);
const wrapper = document.createElement('div');
wrapper.innerHTML = atob(encoded);
const newSvg = wrapper.querySelector('svg');
newSvg.setAttribute("fill"."#478aee");
console.log(newSvg.outerHTML);
Copy the code