On-Chain SVG Builder

Create fully on-chain SVG NFTs. Generate Base64 data URIs for images and metadata. Estimate gas costs.

SVG Code

Preview

Options

Minify SVG (remove whitespace)

Size Analysis

Raw SVG:242 bytes

Base64 SVG:350 bytes

Full metadata:645 bytes

Est. gas cost:~420,000 gas

SVG Data URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj4KICA8cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iIzAwMCIvPgogIDx0ZXh0IHg9IjIwMCIgeT0iMjAwIiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4KICAgIEhlbGxvIE9uLUNoYWluCiAgPC90ZXh0Pgo8L3N2Zz4=

Metadata Data URI

data:application/json;base64,ewogICJuYW1lIjogIk9uLUNoYWluIFNWRyBORlQiLAogICJkZXNjcmlwdGlvbiI6ICJGdWxseSBvbi1jaGFpbiBTVkcgc3RvcmVkIGluIEJhc2U2NCBkYXRhIFVSSSIsCiAgImltYWdlIjogImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0EwTURBZ05EQXdJajRLSUNBOGNtVmpkQ0IzYVdSMGFEMGlOREF3SWlCb1pXbG5hSFE5SWpRd01DSWdabWxzYkQwaUl6QXdNQ0l2UGdvZ0lEeDBaWGgwSUhnOUlqSXdNQ0lnZVQwaU1qQXdJaUJtYjI1MExXWmhiV2xzZVQwaWJXOXViM053WVdObElpQm1iMjUwTFhOcGVtVTlJakkwSWlCbWFXeHNQU0lqWm1abUlpQjBaWGgwTFdGdVkyaHZjajBpYldsa1pHeGxJajRLSUNBZ0lFaGxiR3h2SUU5dUxVTm9ZV2x1Q2lBZ1BDOTBaWGgwUGdvOEwzTjJaejQ9Igp9

Solidity: tokenURI

function tokenURI(uint256 tokenId) 
    public view returns (string memory) 
{
    string memory svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 400\">
  <rect width=\"400\" height=\"400\" fill=\"#000\"/>
  <text x=\"200\" y=\"200\" font-family=\"monospace\" font-size=\"24\" fill=\"#fff\" text-anchor=\"middle\">
    Hello On-Chain
  </text>
</svg>";
    string memory base64SVG = Base64.encode(bytes(svg));
    
    string memory json = string(abi.encodePacked(
        '{"name":"Token #', tokenId.toString(), '",',
        '"image":"data:image/svg+xml;base64,', base64SVG, '"}'
    ));
    
    return string(abi.encodePacked(
        "data:application/json;base64,",
        Base64.encode(bytes(json))
    ));
}