SVG Coding Examples: Useful Recipes For Writing Vectors By Hand

Understanding SVG: Code That Draws

Scalable Vector Graphics (SVG) is a markup language for describing two-dimensional graphics. Unlike raster images (PNG, JPEG) that store fixed pixels, SVGs store XML definitions for shapes that scale responsively to any size without losing quality.

Hand-coding SVG is like giving your browser instructions for how to draw something on screen, relative to a coordinate system. This approach provides complete control over every element and enables programmatic graphics generation--a powerful capability for building dynamic user interfaces with AI agents.

Why hand-coding SVG matters for modern development:

• Precision control - Every coordinate, curve, and stroke is exactly as you specify, eliminating design-tool export inconsistencies
• Smaller file sizes - Hand-coded SVG often produces cleaner, more compact code than exported graphics from design tools
• Accessibility built-in - Adding ARIA labels, titles, and descriptions is straightforward when you control the markup
• LLM-friendly - AI agents can generate, read, and modify SVG code directly, making vector graphics ideal for AI-assisted design workflows
• CSS integration - Styling through CSS custom properties enables easy theming and dark mode support

This guide provides practical recipes for creating SVG graphics by hand, covering the fundamentals you need to build anything from simple icons to complex illustrations.

The SVG Coordinate System

Before drawing shapes, you need to understand how SVG positions elements on the canvas.

Origin Point and Axes

The SVG coordinate system starts at (0, 0) in the top-left corner:

• X-axis values increase as you move right
• Y-axis values increase as you move down

This is different from traditional mathematical coordinate systems where Y increases upward, and it's essential to remember for placing elements correctly.

The viewBox Attribute

The viewBox defines the dimensions of your SVG canvas and establishes the coordinate system:

<svg viewBox="0 0 24 24" width="64" height="64">
 <!-- Shapes are drawn within this 24x24 coordinate system -->
</svg>

The viewBox accepts four values: min-x min-y width height

• First two values (0 0): The offset from the origin, allowing you to pan the viewport
• Last two values (24 24): The size of the coordinate system

How viewBox Enables Scaling

The viewBox is what makes SVG truly scalable. All shapes are drawn relative to the coordinate system defined by viewBox, not the pixel dimensions of width and height. A circle positioned at (12,12) in a 24x24 viewBox will always appear at the center--50% from each edge--regardless of whether the SVG displays at 64x64 pixels or 640x640 pixels.

This relationship between coordinate space and display size is the foundation of responsive SVG graphics. When you change width and height, the browser scales all coordinates proportionally, maintaining the exact proportions and positioning of your shapes.

Creating Basic Shapes with SVG

SVG provides several elements for drawing basic geometric shapes. Each shape uses specific attributes for positioning and sizing.

Lines

The <line> element draws a straight line between two points:

Polylines

The <polyline> element creates connected line segments defined by a series of points:

<polyline points="3 8, 3 4, 21 4, 21 8"></polyline>

The points attribute accepts comma-separated or space-separated x y coordinate pairs. Unlike polygons, polylines do not automatically close the shape.

Circles

The <circle> element requires a center point (cx, cy) and a radius (r):

<circle cx="12" cy="12" r="10"></circle>

Polygons

The <polygon> element creates closed shapes by connecting the last point back to the first:

<polygon points="12 2, 22 22, 2 22"></polygon>

This creates a warning triangle with points at the top-center, bottom-right, and bottom-left.

Rectangles and Ellipses

The <rect> element creates rectangles with optional rounded corners (rx, ry), while <ellipse> creates oval shapes using separate horizontal and vertical radii:

Styling Strokes and Fills

SVG provides comprehensive styling options for controlling how shapes appear.

Stroke Properties

Fill Properties

Important: By default, closed shapes (circle, polygon, rect) have a black fill. For line-based icons, always set fill="none" to avoid unwanted filled shapes.

Using currentColor allows your SVG to inherit colors from CSS, making it seamless to support dark mode and theme changes without modifying the SVG markup itself.

The Path Element

The <path> element is the most powerful SVG element for drawing complex shapes. It uses the d attribute (path data) containing commands and coordinates.

Path Commands Reference

Key points:

• Uppercase commands use absolute coordinates
• Lowercase commands use coordinates relative to the current position
• The path must start with an M (moveto) command
• Z closes the path by drawing a line back to the starting point

For creating icons and UI elements, you'll primarily use M, L, H, V, A, and Z. Curve commands (C and Q) become essential when drawing more complex illustrations or organic shapes.

Transform Operations

SVG transforms modify shapes using coordinate system transformations.

Available Transform Functions

Multiple transforms can be combined:

<rect x="0" y="0" width="10" height="10" 
 transform="translate(10, 10) rotate(45) scale(2)">
</rect>

Transforms apply in order, so the result of each operation affects subsequent ones. This sequence--translate, then rotate, then scale--creates different results than applying them in reverse order.

Accessibility Best Practices

Making SVG accessible ensures all users can understand and interact with your graphics.

Essential Accessibility Elements

<svg viewBox="0 0 24 24" width="64" height="64" 
 role="img" aria-labelledby="iconTitle iconDesc">
 <title id="iconTitle">Settings Icon</title>
 <desc id="iconDesc">A gear with eight teeth representing settings options</desc>
 <!-- shapes -->
</svg>

Key Accessibility Techniques

1. Add role="img" - Identifies the SVG as an image to assistive technologies
2. Include <title> - Provides a brief description (first child of SVG)
3. Add <desc> - Provides detailed description for complex graphics
4. Use aria-labelledby - Associates title/desc with the SVG
5. Use currentColor - Ensures proper color contrast and theme compatibility
6. Ensure sufficient contrast - Check fills and strokes meet WCAG standards

Building accessibility into your SVG from the start is far easier than retrofilling it later. For complex graphics used in your web applications, comprehensive descriptions enable screen reader users to understand visual content. When combined with AI-powered design tools, accessible SVG becomes even more powerful for creating inclusive digital experiences.

Best Practices for Hand-Coding SVG

Organization and Reuse

<svg viewBox="0 0 24 24" width="64" height="64">
 <defs>
 <symbol id="icon-star">
 <polygon points="12 2, 15 9, 22 9, 16 14, 18 22, 12 17, 6 22, 8 14, 2 9, 9 9"></polygon>
 </symbol>
 </defs>
 <use href="#icon-star" x="0" y="0"></use>
</svg>

Using <defs> and <symbol> allows you to define reusable components once and reference them multiple times. The <use> element instantiates symbols, and each instance can be positioned independently.

Quick Reference Patterns

Responsive SVG:

<svg viewBox="0 0 24 24" width="100%" style="max-width: 64px">

Color-customizable icon (dark mode ready):

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 
 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

Checklist for Hand-Coded SVG

• Start with a viewBox that matches your coordinate needs (24x24 is common for icons)
• Set fill="none" for line-based icons to avoid unwanted filled shapes
• Apply stroke-linejoin and stroke-linecap for consistent, polished line endings
• Group related elements with <g> for organization and potential animation
• Add accessibility metadata from the start--title, desc, and ARIA attributes
• Use CSS custom properties with currentColor for seamless theming
• Minimize precision in coordinates (use 1 decimal place when possible) for smaller file sizes

Conclusion

Hand-coding SVG becomes intuitive with practice and opens powerful possibilities for creating scalable graphics programmatically. The key concepts to master are:

1. Coordinate system - Understanding (0,0) at top-left with X right, Y down
2. viewBox - Establishing your drawing canvas and enabling responsive scaling
3. Basic shapes - Using line, circle, polygon, rect for simple graphics
4. Paths - Leveraging commands for complex shapes
5. Styling - Controlling strokes, fills, and line endings
6. Accessibility - Making graphics usable for everyone

SVG Skills and AI Development

In the era of large language models and AI agents, SVG proficiency becomes particularly valuable. LLMs can generate, read, and modify SVG code directly, making vector graphics ideal for AI-assisted design workflows. You can describe what you want visually, have an AI generate the code, then fine-tune the results with precise coordinate adjustments.

For teams building AI-powered applications, the ability to programmatically generate icons, charts, and illustrations opens new possibilities for dynamic, data-driven visual experiences. Whether you're building dashboards, generating social media graphics, or creating personalized visual content, hand-coded SVG provides the foundation for precise, scalable, and accessible graphics that work across all devices and display sizes.

Start simple with basic shapes, then progressively add path commands and transforms as you grow more comfortable. The investment in understanding these fundamentals pays dividends in every graphic you create.

Sources

1. Smashing Magazine - SVG Coding Examples: Useful Recipes For Writing Vectors By Hand
2. MDN Web Docs - SVG
3. Pocket Guide to Writing SVG
4. SVG Tutorial: How to Code SVG Icons by Hand