ImageToSVG

How to Create SVG from Scratch

Understanding SVG code lets you create, optimize, and modify vector graphics with total control — no design tool required.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

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

Free converterConvert any image to SVG instantlySVG for CricutCricut-compatible SVG in one stepSVG vs PNGWhich format should you use?Conversion guideStep-by-step image to SVG walkthrough

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