SVG Studio — Create Vector Graphics Right in Your Browser

What Is SVG?

SVG (Scalable Vector Graphics) is an XML-based image format. Instead of pixels, it describes images using mathematical curves and coordinates — which means they stay perfectly sharp at any size, from a tiny favicon to a full-screen billboard.

On the web, SVG is used everywhere: icons, logos, charts, illustrations, and animations.

---

SVG Studio

Write SVG code below and see a live preview instantly.

SVG Studio

Infinite Resolution Analytics

RESET

Edit and preview SVG code instantly. Experience the magic of crisp vector graphics.

SVG Code Editor

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" stroke="#84cc16" stroke-width="4" fill="#a3e635" /> </svg>

Live Preview

Copy CodeSave as File

---

SVG Core Elements

Circle

<circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2"/>

• cx, cy: center coordinates
• r: radius
• fill: fill color
• stroke: border color

Rectangle

<rect x="10" y="10" width="80" height="60" rx="10" ry="10" fill="green"/>

• x, y: top-left corner coordinates
• width, height: dimensions
• rx, ry: corner rounding radius

Line

<line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="3"/>

Text

<text x="50" y="50" text-anchor="middle" font-size="20" fill="black">Hello SVG</text>

Path

<path d="M 10 10 L 90 10 L 50 90 Z" fill="orange"/>

Path d attribute commands:

• M: Move to
• L: Line to
• C: Cubic Bezier curve
• A: Arc
• Z: Close path

---

SVG vs PNG/JPG

Property	SVG	PNG/JPG
Type	Vector	Raster (pixel-based)
When scaled up	Stays crisp	Pixelates
File size	Can be large for complex images	Can be large for simple images
Editing	Edit directly in code	Requires image editing software
Animation	Possible with CSS/JS	Very limited
Browser support	All modern browsers	Full support

---

SVG Color Formats

SVG accepts colors in multiple formats:

<!-- Color name -->
fill="blue"

<!-- HEX code -->
fill="#3b82f6"

<!-- RGB -->
fill="rgb(59, 130, 246)"

<!-- RGBA (with transparency) -->
fill="rgba(59, 130, 246, 0.5)"

<!-- HSL -->
fill="hsl(217, 91%, 60%)"

---

Quick Practice Example

Paste this code into SVG Studio to see it render:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="200" height="200" fill="#f0f9ff"/>
  
  <!-- Sun -->
  <circle cx="100" cy="100" r="40" fill="#fbbf24"/>
  
  <!-- Rays -->
  <line x1="100" y1="50" x2="100" y2="10" stroke="#fbbf24" stroke-width="4"/>
  <line x1="100" y1="150" x2="100" y2="190" stroke="#fbbf24" stroke-width="4"/>
  <line x1="50" y1="100" x2="10" y2="100" stroke="#fbbf24" stroke-width="4"/>
  <line x1="150" y1="100" x2="190" y2="100" stroke="#fbbf24" stroke-width="4"/>
</svg>