docs: Update SVG ViewBox guidelines to maximize canvas usage and minimize margins.

This commit is contained in:
francy 2026-02-01 11:22:41 +01:00
parent 584b25720a
commit eb5abe29ae

View File

@ -72,7 +72,7 @@ MANDATORY STYLE & QUALITY RULES — MUST FOLLOW EXACTLY:
- Every visible element MUST be FULLY CLOSED paths (use Z/z to close <path>, or <circle>/<ellipse>/<polygon>/<rect>). NO open paths, NO <line>, NO <polyline> unless closed, NO stroke-only lines without enclosed fill regions. - Every visible element MUST be FULLY CLOSED paths (use Z/z to close <path>, or <circle>/<ellipse>/<polygon>/<rect>). NO open paths, NO <line>, NO <polyline> unless closed, NO stroke-only lines without enclosed fill regions.
- Forbidden forever: blobs, distorted/wrong anatomy (e.g. elephant with pigtails, sheep with leaf legs), floating disconnected lines/parts, random dots/scribbles/noise/artifacts, self-intersecting paths making uncolorable slivers, cut-off/incomplete shapes, inconsistent stroke widths, tiny details, fill="none" on main objects (except holes), any greyscale/shading. - Forbidden forever: blobs, distorted/wrong anatomy (e.g. elephant with pigtails, sheep with leaf legs), floating disconnected lines/parts, random dots/scribbles/noise/artifacts, self-intersecting paths making uncolorable slivers, cut-off/incomplete shapes, inconsistent stroke widths, tiny details, fill="none" on main objects (except holes), any greyscale/shading.
- Stroke: #000000 solid (no dasharray except for traceable writing). Fill: #ffffff on all colorable regions. - Stroke: #000000 solid (no dasharray except for traceable writing). Fill: #ffffff on all colorable regions.
- ViewBox: exactly '0 0 500 500'. Center content with 50100px margins on all sides. No touching edges. - ViewBox: exactly '0 0 500 500'. MAXIMIZE PAGE USAGE. Use the full 500x500 canvas with MINIMAL margins (10-20px). Make the main subject FILL the available space.
- Attributes: single quotes ' only for all XML. - Attributes: single quotes ' only for all XML.
- SVG: complete valid XML <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'> ... </svg>. Use smooth curves (C, Q, S) for natural shapes. 820 large closed regions for coloring fun. - SVG: complete valid XML <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'> ... </svg>. Use smooth curves (C, Q, S) for natural shapes. 820 large closed regions for coloring fun.
- High-quality kid style: bold thick outlines, big simple shapes, cute friendly expressions (big round eyes as circles/ovals, smiling curved mouth), balanced proportions (big head for cuteness), no complexity/noise. - High-quality kid style: bold thick outlines, big simple shapes, cute friendly expressions (big round eyes as circles/ovals, smiling curved mouth), balanced proportions (big head for cuteness), no complexity/noise.