How to Create SVG from Scratch: Hand-Coding Basics

A practical guide on how to create svg from scratch — when, why, and how.

You don't need a design tool to create SVG — it's XML text that you can write by hand. Understanding the basics lets you create simple icons, debug conversion output, and modify SVGs programmatically.

Minimal SVG Structure

Every SVG starts with the <svg> element with a viewBox attribute defining the coordinate space. Inside, add shapes using built-in elements like <rect>, <circle>, <ellipse>, <line>, <polygon>, and <path>.

Basic Shapes

• <rect x="10" y="10" width="80" height="60" fill="#1A56DB"/>
• <circle cx="50" cy="50" r="40" fill="#F59E0B"/>
• <line x1="0" y1="0" x2="100" y2="100" stroke="#333" stroke-width="2"/>

The Path Element

The <path> element can draw any shape using commands in the d attribute. M (move to), L (line to), C (curve to), Z (close path). This is what conversion tools output when they convert PNG to SVG.

Tools for Hand-Coding

Use VS Code with the SVG Preview extension, or simply write SVG in any text editor and open in a browser to see the result. For complex shapes, design in Figma or Inkscape and export — but understanding the underlying code helps you optimize and debug.