HTML SVG Graphics

HTML SVG Graphics – Complete Beginner Guide With Examples

What is SVG in HTML?

SVG stands for Scalable Vector Graphics. It is a web-friendly image format used to create vector-based graphics directly inside HTML pages.

Unlike traditional image formats such as JPG or PNG, SVG graphics:

• Do not lose quality when resized

• Are resolution independent

• Can be styled with CSS

• Can be animated

• Can be controlled using JavaScript

SVG is ideal for modern websites because it provides flexibility, performance, and scalability.

Why Use SVG Instead of JPG or PNG?

To understand SVG better, let’s compare it with traditional image formats.

SVG is perfect for:

• Logos

• Icons

• Charts

• Diagrams

• UI elements

For photographs, JPG or PNG is still better.

Basic Structure of SVG in HTML

SVG can be written directly inside HTML using the <svg> element.

Basic Example:

• <svg> → Container element

• width & height → Canvas size

• <circle> → Shape

• cx, cy → Center coordinates

• r → Radius

• fill → Color

This creates a simple blue circle.

Common SVG Shapes

SVG supports many built-in shapes.

 SVG Circle

 SVG Rectangle

 SVG Line

You can control line thickness using stroke-width.

Now the line is:

• Blue

• 5 pixels thick

 Horizontal Line Example

Since y1 and y2 are equal, the line is horizontal.

 Vertical Line Example

Since x1 and x2 are equal, the line is vertical.

 Dashed Line Example

stroke-dasharray="10,5"

• 10px dash

• 5px gap

• Repeats pattern

Responsive SVG Line (Recommended)

Using viewBox makes the line responsive and scalable.

The SVG <line> element requires:

• x1 → Starting X position

• y1 → Starting Y position

• x2 → Ending X position

• y2 → Ending Y position

• stroke → Line color

Optional:

• stroke-width

• stroke-dasharray

SVG lines are:

•  Scalable
• Lightweight
•  Customizable
•  Easy to animate
•  Ideal for charts and diagrams

 SVG Ellipse

 What This Code Does

This creates a blue ellipse inside a 300×200 SVG area.

Understanding Each Attribute

<svg width="300" height="200">

• Defines the drawing canvas

• Width = 300px

• Height = 200px

<ellipse>

Creates an oval shape.

cx="150"

• X-axis center position

• Moves ellipse 150px from left

cy="100"

• Y-axis center position

• Moves ellipse 100px from top

This places the ellipse exactly in the center.

rx="100"

• Horizontal radius

• Width of ellipse (half width)

ry="50"

• Vertical radius

• Height of ellipse (half height)

fill="blue"

• Sets ellipse color

 SVG Ellipse With Border

New Attributes:

• stroke → Border color

• stroke-width → Border thickness

Tall Ellipse Example

This creates a vertically stretched ellipse.

 Responsive SVG Ellipse (Recommended)

Using viewBox makes the ellipse responsive and scalable.

The SVG <ellipse> element requires:

• cx → X center position

• cy → Y center position

• rx → Horizontal radius

• ry → Vertical radius

• fill → Color

Optional:

• stroke

• stroke-width

SVG ellipses are:

•  Scalable
•  Lightweight
• Customizable
• Perfect for UI shapes and diagrams

 SVG Polygon

Adding Text Inside SVG

Basic SVG Text Example

What This Code Does

This creates a blue text “Hello SVG” inside a 400×200 SVG area.

 Understanding Each Attribute

<svg width="400" height="200">

Defines the drawing area.

<text>

Used to display text inside SVG.

x="50"

• Horizontal starting position

• Moves text 50px from the left

y="100"

• Vertical position

• Moves text 100px from the top

 Important:
In SVG, the y value refers to the baseline of the text, not the top.

fill="blue"

• Sets text color

font-size="30"

• Controls text size

 SVG Text With More Styling

New Attributes:

• font-family → Font style

• font-weight → Bold text

 Centered SVG Text Example

text-anchor="middle"

• Aligns text from center

• Makes positioning easier

 SVG Text With Stroke (Outline)

This adds a border around text.

Responsive SVG Text (Recommended)

Using viewBox makes text scale properly on all screen sizes.

The SVG <text> element uses:

• x → Horizontal position

• y → Vertical position

• fill → Text color

• font-size → Text size

Optional:

• font-family

• font-weight

• stroke

• text-anchor

SVG text is:

•  Scalable
•  SEO-friendly
•  Stylable with CSS
•  Easy to animate

Styling SVG with CSS

One of the biggest advantages of SVG is styling flexibility.

Example:

This separates design from structure.

Inline SVG vs External SVG

There are two ways to use SVG.

Inline SVG (Recommended)

Basic Inline SVG Example

<!DOCTYPE html> <html> <head> <title>Inline SVG Example</title> <style> .circle { fill: blue; stroke: black; stroke-width: 3; } </style> </head> <body> <h2>Inline SVG Example</h2> <svg width="200" height="200"> <circle cx="100" cy="100" r="70" class="circle" /> </svg> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!DOCTYPE html> <html> <head> <title>Inline SVG Example</title> <style> .circle { fill: blue; stroke: black; stroke-width: 3; } </style> </head> <body>   <h2>Inline SVG Example</h2>   <svg width="200" height="200"> <circle cx="100" cy="100" r="70" class="circle" /> </svg>   </body> </html>

 

---

 What This Code Does

• Creates a 200×200 SVG area

• Draws a blue circle

• Adds black border

• Styles the SVG using CSS

Since it is inline:

•  You can use CSS
•  You can use JavaScript
•  You can animate it

---

Inline SVG With Multiple Elements

<svg width="300" height="200"> <rect x="20" y="20" width="100" height="60" fill="green" /> <circle cx="200" cy="100" r="40" fill="red" /> <text x="90" y="170" fill="blue" font-size="20"> Inline SVG Demo </text> </svg>

1 2 3 4 5 6 7

<svg width="300" height="200"> <rect x="20" y="20" width="100" height="60" fill="green" /> <circle cx="200" cy="100" r="40" fill="red" /> <text x="90" y="170" fill="blue" font-size="20"> Inline SVG Demo </text> </svg>

 

This creates:

• Rectangle

• Circle

• Text
  All inside one SVG.

---

Inline SVG With JavaScript Interaction

<svg width="200" height="200"> <circle id="myCircle" cx="100" cy="100" r="70" fill="blue" /> </svg> <script> document.getElementById("myCircle").addEventListener("click", function() { this.setAttribute("fill", "green"); }); </script>

1 2 3 4 5 6 7 8 9

<svg width="200" height="200"> <circle id="myCircle" cx="100" cy="100" r="70" fill="blue" /> </svg>   <script> document.getElementById("myCircle").addEventListener("click", function() { this.setAttribute("fill", "green"); }); </script>

 

When you click the circle → It changes color.

This is possible because it is inline.

---

 Responsive Inline SVG (Recommended Method)

<svg viewBox="0 0 200 200" width="100%"> <circle cx="100" cy="100" r="70" fill="blue" /> </svg>

1 2 3

<svg viewBox="0 0 200 200" width="100%"> <circle cx="100" cy="100" r="70" fill="blue" /> </svg>

 

viewBox makes SVG responsive on mobile devices.

---

 Why Inline SVG is Recommended

Feature	Inline SVG	<img> SVG
CSS Styling	Yes	Limited
JavaScript Control	Yes	No
Animation	Yes	Limited
SEO Friendly	Yes	Limited

Inline SVG gives full control.

Inline SVG:

• Is written directly in HTML

• Can be styled with CSS

• Can be animated

• Can be controlled with JavaScript

• Is SEO-friendly

• Is responsive

Best choice for:

•  Logos
•  Icons
•  UI elements
•  Interactive graphics

 External SVG File

Advantages:

• Cleaner HTML

• Reusable

But less flexible for styling.

Making SVG Responsive

Why Make SVG Responsive?

Responsive SVG means:

• It adjusts automatically to different screen sizes

• It looks good on mobile, tablet, and desktop

• It scales without losing quality

SVG is naturally scalable, but you must use viewBox correctly.

Basic Responsive SVG Example (Recommended Method)

Why This Is Responsive

viewBox="0 0 200 200"

This defines:

So here:

• Starting point: 0,0

• SVG coordinate width: 200

• SVG coordinate height: 200

It creates a flexible coordinate system.

width: 100%

This makes SVG take full width of its container.

height: auto

Maintains proper aspect ratio.

 What Happens on Different Screens?

• On desktop → Large SVG

• On mobile → Smaller SVG

• Quality remains sharp

• No pixelation

That’s the power of SVG.

 Wrong Way (Not Fully Responsive)

This sets fixed width and height → Not flexible.

Responsive Rectangle Example

This rectangle will scale properly on all devices.

 Maintaining Aspect Ratio

By default, SVG keeps aspect ratio.

You can control it using:

Example:

Common values:

• meet → Keeps full image visible

• slice → Fills container (may crop)

 Best Practice for Responsive SVG

Always use:

Or use CSS:

Why SVG Is Better Than PNG for Responsiveness

To make SVG responsive:

1. Use viewBox

2. Remove fixed width & height

3. Set width: 100%

4. Use height: auto

5. Keep aspect ratio intact

Responsive SVG is:

•  Mobile-friendly
•  SEO-friendly
•  Lightweight
• High-quality at any size

SVG Animation

SVG supports animation using:

• CSS

• JavaScript

• SVG animation elements

Example Using CSS:

Animations make SVG powerful for UI effects.

SVG and JavaScript

You can manipulate SVG elements dynamically.

Example:

This makes SVG interactive.

SVG vs Canvas

Use SVG for:

• Logos

• Icons

• UI elements

Use Canvas for:

• Games

• Pixel manipulation

• Complex animations

Accessibility and SEO for SVG

To improve accessibility:

Add inside SVG:

This helps:

• Screen readers

• Search engines

SEO benefits of SVG:

• Text is readable by search engines

• Faster loading improves ranking

• Responsive design improves mobile SEO

Advantages of SVG

•  Scalable without quality loss
•  Lightweight
•  Editable with code
•  Supports animation
•  SEO-friendly
•  Interactive

Disadvantages of SVG

•  Not ideal for complex photographs
• Large SVG code can become complex

Real-World Use Cases of SVG

SVG is widely used in:

• Website logos

• Mobile app icons

• Data visualizations

• Navigation icons

• Infographics

• Interactive dashboards

Almost every modern website uses SVG icons.

Common Beginner Mistakes

 Forgetting viewBox

Without it, scaling may break.

 Using SVG for photographs

Use JPG/PNG for photos.

 Not optimizing SVG files

Remove unnecessary metadata before uploading.

FAQs About HTML SVG Graphics

1. What does SVG stand for?

SVG stands for Scalable Vector Graphics.

2. Why is SVG better than PNG?

SVG does not lose quality when resized and is usually smaller for simple graphics.

3. Can SVG be animated?

Yes, SVG supports animation using CSS and JavaScript.

4. Is SVG SEO-friendly?

Yes. Text inside SVG can be indexed by search engines.

5. When should I use SVG?

Use SVG for logos, icons, shapes, and scalable graphics.

Conclusion

HTML SVG Graphics allow developers to create scalable, lightweight, interactive, and modern web graphics.

By mastering:

• SVG shapes

• CSS styling

• Animation

• JavaScript interaction

• Responsive techniques

You can design professional and high-performance websites.

SVG is essential knowledge for modern front-end development and UI design.