SVG

A SVG is an image, but the image itself is built with code.

A SVG is an image, but the image itself is built with code.

https://www.svgviewer.dev

You go to this web site : https://www.svgviewer.dev

and paste the following code to the left side

<svg xmlns=”http://www.w3.org/2000/svg" preserveAspectRatio=”xMinYMin meet” viewBox=”0 0 350 350">

<style>.base { fill: white; font-family: serif; font-size: 14px; }</style>

<rect width=”100%” height=”100%” fill=”black” />

<text x=”50%” y=”50%” class=”base” dominant-baseline=”middle” text-anchor=”middle”>EpicLordHamburger</text>

</svg>

You go to this web site : https://www.utilities-online.info/base64

Paste in your full SVG code above and then click “encode” to get your base64 encoded SVG.

https://www.utilities-online.info/base64

Then result will be as the following:

Open a new tab in browser and in the URL bar paste this:

data:image/svg+xml;base64,INSERT_YOUR_BASE64_ENCODED_SVG_HERE

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCAzNTAgMzUwIj4KwqA8c3R5bGU+LmJhc2UgeyBmaWxsOiB3aGl0ZTsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPgrCoDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9ImJsYWNrIiAvPgrCoDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBjbGFzcz0iYmFzZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RXBpY0xvcmRIYW1idXJnZXI8L3RleHQ+wqAKPC9zdmc+

We turned our SVG code into a nice string .

base64 is basically an accepted standard for encoding data into a string.

So when we say data:image/svg+xml;base64 it's basically saying, "Hey, I'm about to give you base64 encoded data please process it as a SVG, thank you!".

We have json

{

“name”: “EpicLordHamburger”,

“description”: “An NFT from the highly acclaimed square collection”,

“image”:“data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCAzNTAgMzUwIj4KwqA8c3R5bGU+LmJhc2UgeyBmaWxsOiB3aGl0ZTsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPgrCoDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9ImJsYWNrIiAvPgrCoDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBjbGFzcz0iYmFzZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RXBpY0xvcmRIYW1idXJnZXI8L3RleHQ+wqAKPC9zdmc+”

}

Head to this website again. Paste in your full JSON metadata with the base64 encoded SVG (should look sorta like what I have above) and then click “encode” to get you encoded JSON.

https://www.utilities-online.info/base64

Open a new tab in browser and in the URL bar paste this:

data:application/json;base64,INSERT_YOUR_BASE64_ENCODED_JSON_HERE