Різновиди on-chain SVG NFT у мережі Ethereum

NFT ідентифікують унікальні об’єкти в блокчейні. Кожен NFT має URI, який містить дані про метадані та візуалізації. URI можуть бути у форматі HTTP-посилання на сервер, IPFS-адреси (геш), Arweave для стимулювання зберігання або data URI, що містять усю інформацію в одному посиланні. Data URI стає все популярнішим методом, оскільки дозволяє розміщувати NFT-контент повністю у блокчейні. Це гарантує сталість незалежно від зовнішніх інфраструктур. Візуалізація у форматі SVG отримала перевагу для on-chain NFT завдяки підтримці браузерів і обмеженням обсягу смартконтрактів, що робить SVG NFT на Ethereum надійним рішенням для сталості цифрових активів.

SVG у блокчейні

У мережі Ethereum завантаження коду вимагає плати за gas. Операції, що змінюють стан, виконують за гроші, а лише для читання — безкоштовно. Візуалізація on-chain SVG NFT відбувається через смартконтракт із динамічним формуванням зображення при зверненні до функції tokenURI(). Вона виконує код за поточними даними, не змінюючи стан, тому газ не витрачається. Такий підхід до рендерингу на вимогу став основою on-chain SVG-проєктів. Наприклад, у Neolastics унікальні ID, присвоєні при mint, слугують вхідними даними для генеративних функцій, які забезпечують стабільність і динамічність результату. Ключовий виклик — оптимізувати код у межах обмежень транзакції за допомогою gas-ефективного програмування, відомого як "gas golf".

Avastars

Avastars започаткували підхід on-chain SVG для NFT. Спочатку вони використовували HTTP-сервер метаданих, але повний SVG і метадані залишилися відтворюваними на блокчейні за допомогою функції getAvastarMetadata() і renderAvastar() із контракту AvastarsTeleporter. Це забезпечує збереження контенту у разі втрати доступу до зовнішніх серверів. Avastars формує SVG шляхом об’єднання різних рис, що були додані до смартконтракту як SVG-компоненти, дозволяючи повністю відновити твір із блокчейн-даних.

Squiggly.WTF

Squiggly використовує гібридну архітектуру, як і Avastars, поєднуючи HTTP-сервер метаданих із можливістю відтворення вмісту на блокчейні через функцію getIdtoSVG(). На відміну від Avastars із окремими рисами, Squiggly завантажує повний SVG-код під час розгортання контракту. Для рендерингу використовується seed для динамічного створення градієнтів і кривих, формуючи унікальні зображення для кожного токена. Важливо, що Squiggly впровадив нестандартне поле метаданих "image_data" — це обхідний механізм, який підхопили основні NFT-платформи для підтримки data URI до появи повної сумісності маркетплейсів.

Neolastics

Neolastics використовує архітектуру, подібну до Squiggly: є позачейн-сервери метаданих та можливість відтворити зображення на блокчейні. Функція generateSVGofTokenById() дозволяє згенерувати SVG напряму, що забезпечує стійкість у разі збоїв серверів. SVG-компоненти, як і у Squiggly, завантажують під час розгортання контракту, а комбінування відбувається за seed-параметрами. Це поєднує зручний досвід через традиційні сервери з перевагою повної on-chain-відтворюваності.

TinyBoxes

TinyBoxes відрізняється тим, що використовує анімовані SVG-елементи, розширюючи можливості статичної генерації. Функція tokenArt() здійснює кастомний рендер, зберігаючи архітектуру позачейн-серверів метаданих. Унікальність TinyBoxes полягає у вбудовуванні атрибутів як HTML-тегів у сам SVG, а не у зберіганні окремих on-chain-метаданих. Анімації створюють із випадкових seed із більшою складністю, ніж у простих проєктах. Для обходу обмежень на обробку рядків у Solidity використовується SVG.sol — абстракція, що містить логіку рендерингу та генерації анімації.

Mandalas

Mandalas радикально змінює архітектуру, повністю відмовляючись від HTTP-серверів метаданих. Усі JSON-метадані та SVG-ізображення кодуються base64 і розміщуються безпосередньо у data URI. Base64-кодування потрібне для коректної обробки спеціальних символів URI, хоч і збільшує витрати на gas порівняно з plain SVG. Це забезпечує сумісність із браузерами та дозволяє рендерити повне зображення через декодування data URI. Система рендерингу Mandalas малює base64-кодовані пікселі поверх шаблонних структур, генеруючи геометричне мистецтво процедурним шляхом.

UniSwap V3 NFTs

UniSwap V3 NFT демонструють складні анімації із повністю on-chain-зберіганням через багаторівневе base64-кодування. Data URI містить JSON-метадані у base64, які у свою чергу містять base64-кодоване SVG-ізображення. Це забезпечило загальне впровадження data URI на NFT-маркетплейсах. Складна логіка рендерингу винесена в окремі контракти (NFTDescriptor.sol і NFTSVG.sol), щоб обійти обмеження Solidity щодо роботи з рядками. Артворки містять елементи, що відображають фінансовий стан, демонструючи можливості SVG для динамічного візуалізування блокчейн-даних.

Anchor Certificates

Anchor Certificates побудовано на повністю on-chain-архітектурі: усі метадані та SVG кодують у base64 та зберігають у data URI. SVG-компоненти винесено в окремі функції для обходу обмежень callstack у Solidity, що дозволяє очищати змінні між обчислювальними етапами. Така модульність дає змогу генерувати складні твори у межах блокчейн-обмежень і підтримувати повну доступність ончейн.

Blitmap

Blitmap має традиційну архітектуру з позачейн-зберіганням зображень і метаданих, але забезпечує on-chain-відтворюваність через спеціальні функції рендерингу. Особливість — кодування твору у 268 байт піксельних даних через mintOriginal() або mintVariant, далі відтворення зображення як набору SVG-прямокутників. Кожен байт — це інформація про піксель, яку конвертують у візуальний rect-елемент. Це стискає дані для ефективного блокчейн-зберігання і дає повну можливість відтворення.

Nouns

Nouns поєднує техніки попередників: метадані і SVG розміщує на блокчейні з base64-кодуванням, має окремий дескриптор-контракт як UniSwap V3, а кодування ознак — як у Avastars і Blitmap. Відмінність — групування однаково забарвлених ділянок у єдиний SVG-прямокутник замість окремих піксельних. Це суттєво зменшує розмір, зберігаючи якість. Оптимізація підтверджує інноваційність кодування on-chain-графіки.

solSeedlings

solSeedlings використовує гібридний підхід із фокусом на відтворюваність замість суворої технічної чистоти. Колекція містить спеціальні символи, не ідеальні для data URI, але достатня кількість on-chain-компонентів забезпечує можливість відтворення. Рендеринг використовує seed-рандомізацію з власними реалізаціями для колекції, демонструючи різні підходи в екосистемі SVG на блокчейні.

Висновки

On-chain SVG NFT пройшли різні архітектурні підходи для пошуку балансу між обмеженнями, gas-ефективністю та сталістю. Від конкатенації рис у Avastars до повної реалізації data URI у Mandalas, від кодування пікселів у Blitmap до оптимізації прямокутників у Nouns, розробники постійно вдосконалюють технології зберігання та рендерингу творів безпосередньо у блокчейні. Поняття "повністю on-chain" ще обговорюють, але завдяки експериментам виникло стійке цифрове мистецтво на основі незмінної інфраструктури Ethereum. SVG на Ethereum став стандартом для сталого цифрового творення, а нові формати і методи кодування забезпечують подальшу еволюцію on-chain-арту. Це не лише технічне досягнення, а й відкриття нових мистецьких можливостей, де обмеження блокчейну стимулюють креативність, а оптимізація gas стає інженерною дисципліною та засобом художнього самовираження.

FAQ

Як генерувати й зберігати SVG-ізображення у смартконтрактах Ethereum?

Зберігайте SVG-дані у закодованому вигляді безпосередньо у смартконтрактах, а не використовуйте зовнішні ресурси. Функція tokenURI повертає закодований JSON зі SVG-даними для відображення у браузері. Це гарантує цілісність даних і дає змогу створювати динамічні SVG NFT без зовнішніх залежностей.

У чому полягає взаємозв’язок між SVG на Ethereum і NFT, та як створити on-chain NFT-арт за допомогою SVG?

SVG дає змогу створювати унікальні NFT у блокчейні шляхом кодування візуальних елементів безпосередньо у ланцюзі. SVG-файли можуть бути частиною метаданих NFT, що дозволяє програмно створювати й масштабувати цифрове мистецтво через алгоритмічне компонування візуальних складових.

Які заходи безпеки слід враховувати при створенні графіки в мережі Ethereum із використанням SVG?

Щоб уникнути XSS-атак, переконайтеся, що SVG-файли не містять шкідливого JavaScript-коду, який може поставити під загрозу гаманці користувачів. Перевіряйте всі SVG-входи, санітуйте метадані й використовуйте захищені бібліотеки для рендерингу, щоб запобігти вразливостям через ін’єкції коду.