Media & Binary Assets

Deterministic Dynamic SVG Avatars

Zero-dependency, infinite-resolution vector avatars generated deterministically from any username, email, or user ID. Features 12 curated modern gradients, intelligent initials parsing, dynamic squircle or circle clipping, and 1-year immutable CDN caching.

100% Vector SVG (Zero Pixelation)12 Curated Gradient PalettesSmart Initials ExtractionImmutable 1-Year CDN Cache

Live Vector Avatar Studio

Customize seed, dimensions, and shape to preview the dynamically generated vector SVG in real-time.

GET /api/v1/avatars/:seed.svg

128 × 128px

Seed: "Bret"

Shape: Circular (rx=size/2)

Seed String (Username, Email, or Full Name):Hashed into color & initials

Quick Test Personas & Formats:

Avatar Resolution: 128 × 128 pixels

Border Style / Shape:

Computed Asset CDN URL:

https://playground.nileslabs.com/api/v1/avatars/Bret.svg?size=128&rounded=true

12 Curated Deterministic Gradient Palettes

The backend hashes the seed string into an integer to select from 12 accessible, modern linear gradients. Click any palette to load its matching seed into the studio.

Initials Parsing Algorithm & XML Sanitization

How Playground API safely extracts clean initials while eliminating vector injection and XSS vulnerabilities.

Token Extraction Rules

Input Seed	Extracted Initials	Parsing Logic
Leanne Graham	LG	First char of first & second word
user-alex-turner	UA	Hyphen/underscore separated tokens
bret	BR	First two letters of single word
Z	Z	Single letter fallback
***	PA	Playground Avatar default fallback

SVG Injection & Caching Architecture

Every rendered initial character undergoes strict XML entity escaping via escapeXml() to eliminate SVG tag breakout and stored XSS vectors.

Immutable CDN Cache Headers:

Cache-Control: public, max-age=86400, s-maxage=31536000, stale-while-revalidate

In-memory LRU cache stores up to 1,000 recently generated SVGs on the server, serving repeated requests in under 1 millisecond.

Interactive Avatar API Consoles

Execute direct HTTP requests to test responses and raw SVG XML payloads:

Fetch Raw Vector SVG

Fetches raw SVG image data with Content-Type: image/svg+xml.

GET

response.json

{

// Click "Send" above to execute this request against the live server.

}

Generate Custom Squircle Avatar

Fetches a 256px squircle avatar with explicit .svg extension.

GET

response.json

{

// Click "Send" above to execute this request against the live server.

}

Production Client Integration Recipes

Ready-to-use snippets for React components, Tailwind avatar stacks, TypeScript helpers, and direct HTML:

// Reusable React / Next.js UserAvatar Component

import React, { useState } from 'react';

interface UserAvatarProps {

seed: string;

size?: number;

rounded?: boolean;

className?: string;

alt?: string;

}

export function UserAvatar({

seed,

size = 48,

rounded = true,

className = '',

alt = 'User Avatar',

}: UserAvatarProps) {

const [hasError, setHasError] = useState(false);

// Explicit .svg extension ensures clean rendering in all image tags and SSR

const avatarUrl = https://playground.nileslabs.com/api/v1/avatars/${encodeURIComponent(

seed

)}.svg?size=${size}&rounded=${rounded};

return (

<img

src={hasError ? '/fallback-avatar.png' : avatarUrl}

alt={alt}

width={size}

height={size}

onError={() => setHasError(true)}

loading="lazy"

decoding="async"

className={inline-block shrink-0 object-contain ${

rounded ? 'rounded-full' : 'rounded-2xl'

} ${className}}

);

}

Next in Media

Landscape Thumbnails & Transformations

Generate 16:9 placeholder banners with dynamic multiline word wrapping and dimension badges.

Multipart File Uploads

Test single and bulk multipart uploads with real Cloudinary CDN delivery and magic byte validation.

PreviousMultipart File Uploads

NextImage Thumbnails