HTML · Graphics

SVG Basics

Learn to create scalable, vector-based graphics with SVG

Find videos you like?

Save to resource drawer for future reference!

What is SVG?

Scalable Vector Graphics for web

SVG (Scalable Vector Graphics) is an XML-based format for creating graphics that scale perfectly at any size. Unlike raster images (PNG, JPG), SVGs use mathematical vectors to define shapes, making them crisp on any screen.

Key Advantages

✓Scales infinitely without quality loss
✓Smaller file sizes than raster images
✓CSS and JavaScript interactive support
✓DOM elements - each shape is accessible

Common Uses

🎨 Icons and logos
📊 Charts and graphs
🗺️ Maps and diagrams
🎭 Animations and illustrations
🧩 UI components

Pro Tip

SVG is perfect for icons and logos because it stays sharp at any size - great for responsive design!

Basic SVG Shapes

Simple elements you can combine to create any graphic

▭

Rectangle

Use <rect> element with x, y, width, height

●

Circle

Use <circle> with cx, cy, r attributes

◯

Ellipse

Use <ellipse> with rx and ry radii

—

Line

Use <line> with x1, y1, x2, y2 coordinates

Example: Rectangle

<svg width="200" height="150">
  <rect x="20" y="20" width="100" height="80" 
        fill="#f97316" stroke="#ea580c" stroke-width="2"/>
</svg>

Interactive: All Basic Shapes

Click play to see all SVG shapes in action

Frontend

<div class="shapes-demo">
  <h3>Basic SVG Shapes</h3>
  <svg viewBox="0 0 500 150" class="shapes-svg">
    <!-- Rectangle -->
    <rect x="20" y="20" width="100" height="80" fill="#f97316" rx="5"/>
    <!-- Circle -->
    <circle cx="200" cy="60" r="40" fill="#06b6d4"/>
    <!-- Ellipse -->
    <ellipse cx="320" cy="60" rx="60" ry="40" fill="#ec4899"/>
    <!-- Line -->
    <line x1="20" y1="130" x2="150" y2="130" stroke="#8b5cf6" stroke-width="2"/>
    <!-- Polygon (Triangle) -->
    <polygon points="300,20 340,100 260,100" fill="#10b981"/>
  </svg>
</div>

Live Preview

Loading preview...

Essential SVG Attributes

Control appearance and styling of SVG elements

fill

Fill color of the shape

fill="#8b5cf6"

stroke

Border/outline color

stroke="#6d28d9"

stroke-width

Border thickness

stroke-width="3"

opacity

Transparency (0-1)

opacity="0.5"

viewBox

Coordinate system

viewBox="0 0 200 200"

preserveAspectRatio

Scale behavior

preserveAspectRatio="xMidYMid"

Example: Styling SVG Circles

Different colors, strokes, and opacity

Frontend

<div class="svg-demo-container">
  <h3>Simple SVG Circle</h3>
  <svg viewBox="0 0 200 200" class="svg-canvas">
    <circle cx="100" cy="100" r="80" fill="#8b5cf6" stroke="#6d28d9" stroke-width="4"/>
  </svg>
  <p class="demo-info">Vector-based circle that scales infinitely</p>
</div>

Live Preview

Loading preview...

SVG Paths: Drawing Complex Shapes

Create any shape with the powerful path element

The <path> element uses a series of commands to draw custom shapes. Here are the main commands:

Move

Move to a position without drawing

Line

Draw a line to a point

Quadratic Curve

Draw a curved line

Cubic Curve

Draw a smooth curved line

Close Path

Connect back to start point

Example: Drawing with Paths

Lines, curves, and closed shapes

Frontend

<div class="path-demo">
  <h3>SVG Paths & Drawing</h3>
  <svg viewBox="0 0 300 200" class="path-svg">
    <!-- Simple path drawing -->
    <path d="M 50 150 L 150 50 L 250 150" stroke="#3b82f6" stroke-width="3" fill="none"/>
    <!-- Curved path -->
    <path d="M 50 50 Q 100 20 150 50 T 250 50" stroke="#ec4899" stroke-width="3" fill="none"/>
    <!-- Closed path -->
    <path d="M 50 100 L 100 80 L 150 100 L 100 120 Z" fill="#10b981" opacity="0.7"/>
  </svg>
  <p class="path-info">Paths use commands: M (move), L (line), Q (quadratic curve), Z (close)</p>
</div>

Live Preview

Loading preview...

Adding Text to SVG

Include readable text in your graphics

You can add text to SVG using the <text> element. Text can be styled with CSS or SVG attributes and even follow curved paths!

Basic Text Example

<svg width="300" height="100">
  <text x="10" y="50" font-size="32" fill="#3b82f6">
    SVG Text
  </text>
</svg>

Example: Text Styles and Paths

Regular text and text following a curved path

Frontend

<div class="text-demo">
  <h3>Text in SVG</h3>
  <svg viewBox="0 0 400 150" class="text-svg">
    <!-- Simple text -->
    <text x="20" y="40" class="text-heading">SVG Text</text>
    <!-- Styled text -->
    <text x="20" y="80" class="text-content">Beautiful typography in SVG</text>
    <!-- Path text -->
    <path id="textPath" d="M 20 120 Q 100 100 380 120" stroke="none"/>
    <text class="text-curved">
      <textPath href="#textPath" startOffset="50%" text-anchor="middle">
        Text follows a path
      </textPath>
    </text>
  </svg>
</div>

Live Preview

Loading preview...

Interactive SVG with JavaScript

Make SVGs respond to user interactions

Since SVG elements are part of the DOM, you can add event listeners and dynamically change their properties with JavaScript.

Common SVG Interactions

✓ Change color on hover: element.setAttribute('fill', '#new-color')
✓ Add click handlers: element.addEventListener('click', callback)
✓ Animate with CSS: @keyframes animation
✓ Animate with JS: element.animate() API

Example: Interactive Shapes

Hover and click SVG elements to interact

Frontend

<div class="interactive-svg">
  <h3>Interactive SVG Shapes</h3>
  <svg viewBox="0 0 300 300" class="interactive-canvas">
    <!-- Hover circle -->
    <circle id="hoverCircle" cx="100" cy="100" r="40" fill="#8b5cf6" class="interactive-shape"/>
    <!-- Click square -->
    <rect id="clickSquare" x="180" y="60" width="80" height="80" fill="#06b6d4" class="interactive-shape"/>
    <!-- Hover text -->
    <text id="hoverText" x="100" y="250" text-anchor="middle" class="svg-text">Hover over shapes</text>
  </svg>
</div>

Live Preview

Loading preview...

SVG Best Practices

✅ Do This

✓ Use SVG for icons and logos
✓ Set proper viewBox for responsive scaling
✓ Use semantic element names (id, class)
✓ Optimize SVG files for web
✓ Group related shapes with <g>
✓ Use CSS for styling and animations

❌ Avoid This

✗ Don't use SVG for complex photos
✗ Don't forget viewBox attribute
✗ Don't leave unused elements in code
✗ Don't hardcode colors (use CSS)
✗ Don't nest too many layers
✗ Don't make interactive SVGs too heavy

Quick Tip

Use tools like SVGO to automatically optimize SVG files by removing unnecessary code.

Real-World SVG Use Cases

🎨

App Icons

Crisp icons at any resolution

📊

Charts & Graphs

Interactive data visualizations

✨

Animations

Smooth animated graphics

🏢

Logo & Branding

Scalable brand assets

🗺️

Maps

Interactive geographic displays

🧩

UI Components

Buttons, badges, decorations

Previous Topic

Video Subtitles

<track> element for subtitles, captions, and video text tracks (VTT files).

Next Topic

Canvas Basics

<canvas> element for drawing graphics with JavaScript.

Ask a Question

Have a question about SVG Basics? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Graphics

SVG Basics

Learn to create scalable, vector-based graphics with SVG

Find videos you like?

Save to resource drawer for future reference!

What is SVG?

Scalable Vector Graphics for web

Key Advantages

✓Scales infinitely without quality loss
✓Smaller file sizes than raster images
✓CSS and JavaScript interactive support
✓DOM elements - each shape is accessible

Common Uses

🎨 Icons and logos
📊 Charts and graphs
🗺️ Maps and diagrams
🎭 Animations and illustrations
🧩 UI components

Pro Tip

SVG is perfect for icons and logos because it stays sharp at any size - great for responsive design!

Basic SVG Shapes

Simple elements you can combine to create any graphic

▭

Rectangle

Use <rect> element with x, y, width, height

●

Circle

Use <circle> with cx, cy, r attributes

◯

Ellipse

Use <ellipse> with rx and ry radii

—

Line

Use <line> with x1, y1, x2, y2 coordinates

Example: Rectangle

<svg width="200" height="150">
  <rect x="20" y="20" width="100" height="80" 
        fill="#f97316" stroke="#ea580c" stroke-width="2"/>
</svg>

Interactive: All Basic Shapes

Click play to see all SVG shapes in action

Frontend

<div class="shapes-demo">
  <h3>Basic SVG Shapes</h3>
  <svg viewBox="0 0 500 150" class="shapes-svg">
    <!-- Rectangle -->
    <rect x="20" y="20" width="100" height="80" fill="#f97316" rx="5"/>
    <!-- Circle -->
    <circle cx="200" cy="60" r="40" fill="#06b6d4"/>
    <!-- Ellipse -->
    <ellipse cx="320" cy="60" rx="60" ry="40" fill="#ec4899"/>
    <!-- Line -->
    <line x1="20" y1="130" x2="150" y2="130" stroke="#8b5cf6" stroke-width="2"/>
    <!-- Polygon (Triangle) -->
    <polygon points="300,20 340,100 260,100" fill="#10b981"/>
  </svg>
</div>

Live Preview

Loading preview...

Essential SVG Attributes

Control appearance and styling of SVG elements

fill

Fill color of the shape

fill="#8b5cf6"

stroke

Border/outline color

stroke="#6d28d9"

stroke-width

Border thickness

stroke-width="3"

opacity

Transparency (0-1)

opacity="0.5"

viewBox

Coordinate system

viewBox="0 0 200 200"

preserveAspectRatio

Scale behavior

preserveAspectRatio="xMidYMid"

Example: Styling SVG Circles

Different colors, strokes, and opacity

Frontend

<div class="svg-demo-container">
  <h3>Simple SVG Circle</h3>
  <svg viewBox="0 0 200 200" class="svg-canvas">
    <circle cx="100" cy="100" r="80" fill="#8b5cf6" stroke="#6d28d9" stroke-width="4"/>
  </svg>
  <p class="demo-info">Vector-based circle that scales infinitely</p>
</div>

Live Preview

Loading preview...

SVG Paths: Drawing Complex Shapes

Create any shape with the powerful path element

The <path> element uses a series of commands to draw custom shapes. Here are the main commands:

Move

Move to a position without drawing

Line

Draw a line to a point

Quadratic Curve

Draw a curved line

Cubic Curve

Draw a smooth curved line

Close Path

Connect back to start point

Example: Drawing with Paths

Lines, curves, and closed shapes

Frontend

<div class="path-demo">
  <h3>SVG Paths & Drawing</h3>
  <svg viewBox="0 0 300 200" class="path-svg">
    <!-- Simple path drawing -->
    <path d="M 50 150 L 150 50 L 250 150" stroke="#3b82f6" stroke-width="3" fill="none"/>
    <!-- Curved path -->
    <path d="M 50 50 Q 100 20 150 50 T 250 50" stroke="#ec4899" stroke-width="3" fill="none"/>
    <!-- Closed path -->
    <path d="M 50 100 L 100 80 L 150 100 L 100 120 Z" fill="#10b981" opacity="0.7"/>
  </svg>
  <p class="path-info">Paths use commands: M (move), L (line), Q (quadratic curve), Z (close)</p>
</div>

Live Preview

Loading preview...

Adding Text to SVG

Include readable text in your graphics

You can add text to SVG using the <text> element. Text can be styled with CSS or SVG attributes and even follow curved paths!

Basic Text Example

<svg width="300" height="100">
  <text x="10" y="50" font-size="32" fill="#3b82f6">
    SVG Text
  </text>
</svg>

Example: Text Styles and Paths

Regular text and text following a curved path

Frontend

<div class="text-demo">
  <h3>Text in SVG</h3>
  <svg viewBox="0 0 400 150" class="text-svg">
    <!-- Simple text -->
    <text x="20" y="40" class="text-heading">SVG Text</text>
    <!-- Styled text -->
    <text x="20" y="80" class="text-content">Beautiful typography in SVG</text>
    <!-- Path text -->
    <path id="textPath" d="M 20 120 Q 100 100 380 120" stroke="none"/>
    <text class="text-curved">
      <textPath href="#textPath" startOffset="50%" text-anchor="middle">
        Text follows a path
      </textPath>
    </text>
  </svg>
</div>

Live Preview

Loading preview...

Interactive SVG with JavaScript

Make SVGs respond to user interactions

Since SVG elements are part of the DOM, you can add event listeners and dynamically change their properties with JavaScript.

Common SVG Interactions

✓ Change color on hover: element.setAttribute('fill', '#new-color')
✓ Add click handlers: element.addEventListener('click', callback)
✓ Animate with CSS: @keyframes animation
✓ Animate with JS: element.animate() API

Example: Interactive Shapes

Hover and click SVG elements to interact

Frontend

<div class="interactive-svg">
  <h3>Interactive SVG Shapes</h3>
  <svg viewBox="0 0 300 300" class="interactive-canvas">
    <!-- Hover circle -->
    <circle id="hoverCircle" cx="100" cy="100" r="40" fill="#8b5cf6" class="interactive-shape"/>
    <!-- Click square -->
    <rect id="clickSquare" x="180" y="60" width="80" height="80" fill="#06b6d4" class="interactive-shape"/>
    <!-- Hover text -->
    <text id="hoverText" x="100" y="250" text-anchor="middle" class="svg-text">Hover over shapes</text>
  </svg>
</div>

Live Preview

Loading preview...

SVG Best Practices

✅ Do This

✓ Use SVG for icons and logos
✓ Set proper viewBox for responsive scaling
✓ Use semantic element names (id, class)
✓ Optimize SVG files for web
✓ Group related shapes with <g>
✓ Use CSS for styling and animations

❌ Avoid This

✗ Don't use SVG for complex photos
✗ Don't forget viewBox attribute
✗ Don't leave unused elements in code
✗ Don't hardcode colors (use CSS)
✗ Don't nest too many layers
✗ Don't make interactive SVGs too heavy

Quick Tip

Use tools like SVGO to automatically optimize SVG files by removing unnecessary code.

Real-World SVG Use Cases

🎨

App Icons

Crisp icons at any resolution

📊

Charts & Graphs

Interactive data visualizations

✨

Animations

Smooth animated graphics

🏢

Logo & Branding

Scalable brand assets

🗺️

Maps

Interactive geographic displays

🧩

UI Components

Buttons, badges, decorations

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Video Subtitles

Canvas Basics

HTML Code Editor

Building Your Learning Module...

SVG Basics

Key Advantages

Common Uses

Pro Tip

Rectangle

Circle

Ellipse

Line

Example: Rectangle

Interactive: All Basic Shapes

fill

stroke

stroke-width

opacity

viewBox

preserveAspectRatio

Example: Styling SVG Circles

Move

Line

Quadratic Curve

Cubic Curve

Close Path

Example: Drawing with Paths

Basic Text Example

Example: Text Styles and Paths

Common SVG Interactions

Example: Interactive Shapes

✅ Do This

❌ Avoid This

Quick Tip

App Icons

Charts & Graphs

Animations

Logo & Branding

Maps

UI Components

Video Subtitles

Canvas Basics

HTML Code Editor

SVG Basics

Key Advantages

Common Uses

Pro Tip

Rectangle

Circle

Ellipse

Line

Example: Rectangle

Interactive: All Basic Shapes

fill

stroke

stroke-width

opacity

viewBox

preserveAspectRatio

Example: Styling SVG Circles

Move

Line

Quadratic Curve

Cubic Curve

Close Path

Example: Drawing with Paths

Basic Text Example

Example: Text Styles and Paths

Common SVG Interactions

Example: Interactive Shapes

✅ Do This

❌ Avoid This

Quick Tip

App Icons

Charts & Graphs

Animations

Logo & Branding

Maps

UI Components