How to Create SVG from Scratch
Understanding SVG code lets you create, optimize, and modify vector graphics with total control — no design tool required.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG File Structure
Every SVG file starts with these required elements.
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>: the root element
- xmlns: required XML namespace declaration
- viewBox='minX minY width height': defines the coordinate space
- width and height on the svg element: sets display size (optional if CSS controls it)
- <title>Description</title>: accessibility — screen readers read this for meaningful SVGs
Basic SVG Shapes
SVG has built-in shape elements for common forms.
- Rectangle: <rect x='10' y='10' width='80' height='60' rx='5' fill='#4F46E5'/>
- Circle: <circle cx='50' cy='50' r='30' fill='#10B981'/>
- Ellipse: <ellipse cx='50' cy='50' rx='40' ry='20' fill='#F59E0B'/>
- Line: <line x1='10' y1='10' x2='90' y2='90' stroke='#6B7280' stroke-width='2'/>
- Polygon: <polygon points='50,10 90,90 10,90' fill='#EF4444'/>
SVG Path Element
The <path> element is the most powerful SVG primitive — it draws any shape.
- d attribute: a series of commands defining the path
- M x y: moveTo — start position
- L x y: lineTo — draw a straight line
- C x1 y1 x2 y2 x y: cubic bezier curve
- Z: closePath — close the shape back to the start
- Example: <path d='M 10 10 L 90 10 L 50 90 Z' fill='purple'/> draws a triangle
Frequently Asked Questions
What is the SVG viewBox?
viewBox defines the SVG's internal coordinate system: viewBox='0 0 100 100' means the SVG internally uses 100×100 units. The browser scales this to the display size. It's what makes SVG resolution-independent.
How do I create a circle in SVG?
<circle cx='50' cy='50' r='40' fill='blue' stroke='navy' stroke-width='2'/> — cx/cy are the center coordinates, r is the radius.
What is the difference between fill and stroke in SVG?
fill is the interior color of a shape. stroke is the border/outline color. stroke-width sets the outline thickness. Both accept color values, 'none', or 'currentColor'.
How do I add a gradient fill to an SVG shape?
Define a <linearGradient> or <radialGradient> in <defs>, give it an id, then reference it: fill='url(#gradientId)'. Example: <linearGradient id='g1'><stop offset='0%' stop-color='blue'/><stop offset='100%' stop-color='purple'/></linearGradient>
What's the difference between an SVG group and a layer?
SVG groups (<g> elements) are the SVG equivalent of layers. They group elements so transforms, opacity, and other properties apply to all children at once. Design tools map their layer panels to SVG <g> elements.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG