Creating High Resolution, Interactive Artwork on Bitcoin Ordinals
Scalable Vector Graphics, or SVG, is a vector image format made for two-dimensional graphics on the web with support for interactivity and animation.
Bitcoin Ordinals and SVGs go together like peanut butter and jelly. While many Ethereum NFT projects use SVGs for on-chain art because the art can be created through a function in the smart contract to assemble a unique SVG for each token, the usage of SVGs in Bitcoin Ordinals is used to serve a far greater purpose.
Small File Size: For simple graphics, SVGs are up to 80% smaller in file size compared to raster images like JPEGs and PNGs. Bitcoin's block space being both scarce and expensive, SVG empowers artists to create higher quality (and more valuable) work on a smaller budget. It also improves web performance, which is particularly important for mobile devices.
Ultra High Resolution: Unlike raster images (like JPEGs or PNGs), which are made up of pixels, SVGs are vector-based, composing of paths, shapes, and text. This means they can be scaled to any size without losing quality, making them ideal for high resolution artwork.
Ideal for Generative Artwork: SVG images are defined in XML, a markup language used for storing and transporting data. This makes SVGs both readable and modifiable with text editors and also searchable, indexable, and scriptable.
Interactivity and Animation: Unlike JPEGs or PNGs, SVGs can be animated and made interactive using CSS, JavaScript, and HTML Canvas, making them powerful for creating dynamic art and interfaces.
Compatibility: Not only are SVGs compatible with all of the latest web technologies, SVGs are supported by all modern web browsers, making them extremely versatile. Furthermore, text in SVGs is selectable and searchable, unlike text in raster images. Properly coded SVGs are more accessible to people with disabilities.
Code Sample
This is the SVG code for the "Stoic Body__Stoic Body White.svg" trait.
<svg> — This line sets the view box (the part of the canvas visible to the user) with coordinates (0, 0) at the top left corner and (1000, 1000) at the bottom right corner. It specifies the SVG version as 1.1 and the XML namespace needed for SVG.
<path> — This defines a shape using a series of movements and lines. The fill attribute sets the color of the shape in the hexadecimal color space. The d attribute contains a series of commands and parameters that define the path. The commands include move (M), curve (C), and line (L). The path is closed with a Z command.
%%COLOR%% — Is used to customize the color of this path in our javascript file so we only need to inscribe one version of this trait in order to produce unlimited color version.
<svg viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill="#000000" d=" M 519.22 711.17 C 541.47 709.52 563.94 710.13 585.96 713.93 C 617.55 719.47 648.11 734.25 670.04 757.96 C 689.33 778.75 700.83 805.57 707.01 832.99 C 713.17 859.97 715.08 887.67 716.76 915.23 C 718.49 943.44 719.12 971.73 718.71 1000.00 L 699.58 1000.00 C 699.60 976.31 698.89 952.64 697.95 928.97 C 696.34 897.03 694.71 864.82 687.21 833.60 C 680.66 806.98 668.53 780.74 647.81 762.18 C 635.31 750.85 620.15 742.54 603.94 737.88 C 580.94 731.18 556.75 730.50 532.97 731.11 C 490.30 732.86 447.82 737.96 405.71 744.94 C 383.11 748.90 360.22 752.89 339.00 761.96 C 328.23 766.51 318.02 772.50 309.17 780.18 C 294.96 792.26 284.37 808.21 277.36 825.41 C 270.23 843.54 266.67 862.84 264.31 882.12 C 260.28 914.93 260.76 948.04 261.06 981.03 C 261.47 987.34 261.41 993.69 262.04 1000.00 L 238.69 1000.00 C 239.02 980.99 240.12 962.01 240.69 943.02 C 242.16 902.30 242.92 860.73 255.67 821.63 C 261.52 803.83 269.79 786.45 282.43 772.43 C 293.31 760.28 307.46 751.33 322.70 745.68 C 341.30 738.73 360.65 734.05 380.02 729.83 C 425.91 720.37 472.53 714.78 519.22 711.17 Z" />
<path fill="#000000" d=" M 589.53 856.41 C 590.27 851.76 596.58 849.97 599.95 853.04 C 616.37 866.91 625.07 887.70 629.53 908.27 C 635.67 938.44 634.47 969.39 634.80 1000.00 L 621.36 1000.00 C 621.46 983.68 620.93 967.37 620.24 951.07 C 619.32 935.89 618.04 920.62 614.10 905.88 C 610.35 891.88 604.08 878.41 594.73 867.26 C 592.33 864.10 588.93 860.71 589.53 856.41 Z" />
<path fill="#000000" d=" M 388.88 857.86 C 390.79 855.93 392.98 853.62 395.94 853.77 C 399.42 853.88 402.18 857.47 401.41 860.87 C 400.40 864.56 397.61 867.37 395.35 870.35 C 389.73 877.06 385.23 884.69 381.94 892.81 C 374.16 912.19 374.22 933.44 374.17 954.00 C 374.03 969.34 374.65 984.66 374.68 1000.00 L 361.34 1000.00 C 360.76 990.69 360.95 981.36 360.49 972.05 C 360.38 950.79 359.79 929.34 363.47 908.30 C 366.71 889.49 375.42 871.49 388.88 857.86 Z" />
<path fill="%%COLOR%%" d=" M 405.71 744.94 C 447.82 737.96 490.30 732.86 532.97 731.11 C 556.75 730.50 580.94 731.18 603.94 737.88 C 620.15 742.54 635.31 750.85 647.81 762.18 C 668.53 780.74 680.66 806.98 687.21 833.60 C 694.71 864.82 696.34 897.03 697.95 928.97 C 698.89 952.64 699.60 976.31 699.58 1000.00 L 634.80 1000.00 C 634.47 969.39 635.67 938.44 629.53 908.27 C 625.07 887.70 616.37 866.91 599.95 853.04 C 596.58 849.97 590.27 851.76 589.53 856.41 C 588.93 860.71 592.33 864.10 594.73 867.26 C 604.08 878.41 610.35 891.88 614.10 905.88 C 618.04 920.62 619.32 935.89 620.24 951.07 C 620.93 967.37 621.46 983.68 621.36 1000.00 L 374.68 1000.00 C 374.65 984.66 374.03 969.34 374.17 954.00 C 374.22 933.44 374.16 912.19 381.94 892.81 C 385.23 884.69 389.73 877.06 395.35 870.35 C 397.61 867.37 400.40 864.56 401.41 860.87 C 402.18 857.47 399.42 853.88 395.94 853.77 C 392.98 853.62 390.79 855.93 388.88 857.86 C 375.42 871.49 366.71 889.49 363.47 908.30 C 359.79 929.34 360.38 950.79 360.49 972.05 C 360.95 981.36 360.76 990.69 361.34 1000.00 L 262.04 1000.00 C 261.41 993.69 261.47 987.34 261.06 981.03 C 260.76 948.04 260.28 914.93 264.31 882.12 C 266.67 862.84 270.23 843.54 277.36 825.41 C 284.37 808.21 294.96 792.26 309.17 780.18 C 318.02 772.50 328.23 766.51 339.00 761.96 C 360.22 752.89 383.11 748.90 405.71 744.94 Z" />
</svg>
Conclusion
The integration of Scalable Vector Graphics (SVGs) in Bitcoin Ordinals presents a transformative approach to digital art and NFT creation. SVGs' small file size, ultra-high resolution, and suitability for generative artwork makes them a formidable tool for artists.
Their capabilities for interactivity, animation, and broad compatibility, position SVGs as a key player in the future of Bitcoin Ordinals.
