Guide
Prepare a layered SVG for an NFT collection.
SVG Variants, the SVG NFT collection generator, reads the structure of your file. A few habits when you draw keep the layer tree clean, the traits readable and the variations quick to describe.
01
One folder per variable element
Put each thing that will change, a hat, a background, an accessory, in its own group: each one can become a trait of your collection. Groups become folders; a folder can receive a palette, be hidden, get a stroke, or join a variant set as a single variant with everything inside it.
02
Name your layers
Layer names become the default names of traits and values in the metadata, for example Hats: Cap. Illustrator, Inkscape and Figma names are read; automatic names such as path34 are ignored and you can rename inside SVG Variants.
SVG Variants detects variant sets from your names and offers to create them in one click: a named folder whose children are named alternatives (Hats → Beret, Cap, Top hat), or sibling layers named Trait/Value, Trait - Value or Trait: Value. Add #5 at the end of a value to set its weight, and start a name with _ for a fixed layer that never varies.
- Hats/
- Beret
- Cap
- Top hat
{
"trait_type": "Hats",
"value": "Cap"
}
A variant set made from the Hats folder takes the folder name, and each layer inside is a value. In an edition where Cap is drawn, its JSON file lists this attribute. You can rename both in SVG Variants. Variant sets need a pack to generate.
03
Keep colours plain
Flat fills and strokes are detected and recolourable, whether set as attributes, in a <style> block or inline. Gradients, patterns and images are kept as they are but cannot be recoloured. Use one colour per element you want to vary. Flat colours also give the cleanest pixel art.
04
Vectorise text
Convert text to outlines before exporting so the result looks the same everywhere. Embedded fonts are not kept.
05
Export settings
- SVG 1.1, keep groups and layer names (Illustrator: “Object IDs: Layer Names”; Figma: “Include id attribute”).
- No external images: embed them or leave them out.
- Set a
viewBox; it defines the frame of every PNG and print file. - A CSS background on the root is detected and offered as a stage colour, but it is not part of the drawing: add a collection background in SVG Variants if you want one in the files.
- Limits: 10 MB per file, 2,000 colourable shapes, 256 nesting levels.
06
What you get at the end
With the NFT collection output (it needs a pack; packs are not on sale yet), each edition comes as a PNG with its own JSON metadata file: name, description, image, edition number and attributes, each attribute a trait_type and a value. A rarity statistics file gives the count and percentage of each trait value for the editions you export, the whole collection when you export it all. The image field holds the file name of the PNG, for example 1.png in the collection ZIP: before minting, replace it with the address where you host the image, such as an IPFS link. SVG Variants makes the files; it does not mint, upload to IPFS or connect a wallet.
- assets/
- 1.png … 12.pngPNG, 1024 or 2048 px
- 1.svg … 12.svgSVG option, sharp rendering only
- metadata/
- 1.json … 12.jsonone JSON file per edition
- rarity-stats.jsoncount and percentage of each trait value, for the editions in the ZIP
- collection.jsoncollection name, date and the list of editions in the ZIP
Start today
Your next SVG can become an NFT collection.
The studio is open. Start free with 100 credits once your e-mail is verified.
No subscription · Free previews