Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw a hollow circle in SVG?
To draw a hollow circle in SVG, use the <circle> element with fill="none" and define the outline using stroke properties. This creates a circle with only a border and transparent interior.
SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML. The XML is then rendered by an SVG viewer, and most web browsers can display SVG just like they display PNG, GIF, and JPG images.
Syntax
Following is the syntax for drawing a hollow circle in SVG −
<circle cx="x-coordinate" cy="y-coordinate" r="radius" stroke="color" stroke-width="width" fill="none" />
Parameters
The <circle> element uses the following attributes to create a hollow circle −
cx − The x-coordinate of the circle's center
cy − The y-coordinate of the circle's center
r − The radius of the circle
stroke − The color of the circle's outline
stroke-width − The thickness of the outline
fill − Set to "none" to make the circle hollow
Example − Basic Hollow Circle
Following example demonstrates how to draw a simple hollow circle −
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG Hollow Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Basic Hollow Circle</h2>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="75" r="40" stroke="black" stroke-width="4" fill="none" />
</svg>
</body>
</html>
The output displays a black hollow circle with a radius of 40 pixels −
A black circular outline (hollow circle) centered at (100, 75)
Example − Multiple Hollow Circles with Different Styles
Following example shows various hollow circles with different colors, sizes, and stroke widths −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Hollow Circles</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Various Hollow Circle Styles</h2>
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="80" cy="100" r="35" stroke="red" stroke-width="2" fill="none" />
<circle cx="200" cy="100" r="45" stroke="blue" stroke-width="6" fill="none" />
<circle cx="320" cy="100" r="30" stroke="green" stroke-width="8" fill="none" />
</svg>
</body>
</html>
The output shows three hollow circles with different colors and stroke widths −
Three hollow circles: red (thin stroke), blue (medium stroke), green (thick stroke)
Example − Dashed Hollow Circle
You can create a dashed hollow circle using the stroke-dasharray attribute −
<!DOCTYPE html>
<html>
<head>
<title>Dashed Hollow Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dashed Hollow Circle</h2>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="80" cy="100" r="40" stroke="purple" stroke-width="3" stroke-dasharray="10,5" fill="none" />
<circle cx="200" cy="100" r="35" stroke="orange" stroke-width="4" stroke-dasharray="5,3,2,3" fill="none" />
</svg>
</body>
</html>
The first circle has a simple dash pattern, while the second has a more complex pattern −
Two dashed hollow circles with different dash patterns
Comparison: Hollow vs Filled Circle
Following table shows the difference between hollow and filled circles −
| Hollow Circle | Filled Circle |
|---|---|
fill="none" |
fill="color" |
| Only outline visible | Interior filled with color |
| Requires stroke properties | Can work without stroke |
| Transparent interior | Solid interior |
Example − Side-by-Side Comparison
Following example shows hollow and filled circles side by side −
<!DOCTYPE html>
<html>
<head>
<title>Hollow vs Filled Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Hollow vs Filled Circle</h2>
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
<text x="75" y="30" text-anchor="middle" font-size="14">Hollow</text>
<circle cx="75" cy="80" r="35" stroke="navy" stroke-width="4" fill="none" />
<text x="225" y="30" text-anchor="middle" font-size="14">Filled</text>
<circle cx="225" cy="80" r="35" stroke="navy" stroke-width="4" fill="lightblue" />
</svg>
</body>
</html>
The left circle is hollow (transparent center), while the right circle is filled with light blue −
Two circles labeled "Hollow" and "Filled" showing the visual difference
Common Use Cases
Hollow circles in SVG are commonly used for −
UI Elements − Radio buttons, selection indicators, and interactive controls
Data Visualization − Chart markers, plot points, and graph elements
Decorative Graphics − Borders, frames, and ornamental designs
Icons and Symbols − Minimalist icons and symbolic representations
Conclusion
Drawing a hollow circle in SVG requires the <circle> element with fill="none" and stroke properties to define the outline. This technique creates circles with transparent interiors while maintaining customizable borders through stroke attributes. Hollow circles are versatile elements useful for UI components, data visualization, and decorative graphics.
3K+ Views
