About

Date vectors serve as foundational elements in calendar systems, event graphics, and temporal data visualization. Manual creation in vector editors requires precise text alignment calculations and consistent spacing ratios. This tool generates mathematically precise SVG output with correct viewBox proportions, ensuring scalability from 16px favicons to 1000mm print banners without quality degradation. The generated code follows SVG 1.1 specification with proper text anchoring (text-anchor: middle) and dominant baseline adjustments for cross-browser rendering consistency.

Output dimensions use a calculated aspect ratio based on content bounds. Decorative elements employ quadratic Bézier curves (Q command) with control points at 0.5 offset from endpoints. Typography stacks declare web-safe fallbacks: custom → system → generic. Note: Script fonts render with browser-installed typefaces only. For production use, embed font subsets via <style> block within the SVG.

Formulas

The SVG viewBox dimensions are calculated from content bounds with padding ratio p:

viewBox = 0 0 W H

Where W = contentWidth × (1 + 2p) and H = contentHeight × (1 + 2p). Default padding p = 0.1 (10%).

Circular text arc positioning uses parametric angle θ for each character:

x = cx + r ⋅ cos(θ)

y = cy + r ⋅ sin(θ)

Where cx, cy define center coordinates and r is the arc radius. Rotation per glyph: rotate = θ × 180π + 90°.

Week number calculation follows ISO 8601 (week starts Monday, first week contains Jan 4):

W = ordinalDay − weekday + 107

Where ordinalDay is day-of-year (1 - 366) and weekday is 1 - 7 (Mon - Sun).

Reference Data

Style Preset	Best Use Case	Elements Included	Aspect Ratio
Minimal Tile	Calendar grids, app icons	Day number, month abbrev	1:1
Full Stack	Event headers, invitations	Weekday, day, month, year	3:4
Horizontal Bar	Timeline markers, banners	All elements inline	4:1
Circular Badge	Stamps, logos, badges	Day centered, month arc	1:1
Elegant Script	Wedding, formal events	Full date with flourishes	2:1
Retro Label	Vintage designs, journals	Bordered with ornaments	3:2
ISO Stamp	Technical docs, logs	ISO 8601 format only	5:1
Week Focus	Planners, agendas	Week number, year	2:1
Date Format Reference
ISO 8601	YYYY-MM-DD (e.g., 2025-07-15)
European	DD/MM/YYYY (e.g., 15/07/2025)
American	MM/DD/YYYY (e.g., 07/15/2025)
Long Form	Month DD, YYYY (e.g., July 15, 2025)
SVG Text Anchoring
start	Text begins at x coordinate (left-align)
middle	Text centered on x coordinate
end	Text ends at x coordinate (right-align)
Common SVG Dimensions
Social Media	1200 × 630px		OG Image
Instagram Post	1080 × 1080px		Square
Print A4	210 × 297mm		Portrait
Icon	512 × 512px		App Store

Frequently Asked Questions

Circular text uses individual rotated glyphs rather than a textPath element for broader compatibility. At sizes below 100px, sub-pixel anti-aliasing causes visible stepping. Export at 400px minimum and scale down in your target application for crisp rendering.

The generated SVG references system fonts. To embed: (1) Convert your font to Base64, (2) Add a <style> block inside the SVG's <defs> containing @font-face with src: url(data:font/woff2;base64,...). This increases file size by approximately 20 - 100KB per font weight.

This tool outputs SVG only. For PNG: open the SVG in a browser and use screenshot, or use command-line tools like Inkscape (inkscape -w 1024 input.svg -o output.png). For PDF: Inkscape or browser print-to-PDF. Rasterization at 300DPI for print requires width = inches × 300.

Illustrator interprets certain SVG attributes differently, particularly dominant-baseline and font-family stacks. For maximum compatibility, use the "Minimal Tile" or "ISO Stamp" presets which avoid complex text positioning. Always embed fonts when transferring to Illustrator.

Week numbering follows ISO 8601: weeks start Monday, and week 1 is the week containing January 4th. This means December 31 can be week 1 of the next year, and January 1 can be week 52 or 53 of the prior year.

Set "Background" toggle to off. The exported SVG will have no background rectangle, making it transparent when placed over other content. Note: some applications fill missing backgrounds with white. Use fill="none" on the root SVG if issues persist.