SVG Atlas

A collection of free and high-quality vector art

Basic SVG Shapes

Master the fundamental building blocks of vector graphics

Introduction

SVG provides several basic shape elements that serve as the foundation for creating vector graphics. These predefined shapes are perfect for beginners and can be combined to create complex designs. Understanding these basic shapes is essential for anyone working with SVG.

Each shape element has specific attributes that control its appearance, position, and size. By mastering these basic shapes, you'll have the tools to create everything from simple icons to complex illustrations.

Rectangle (rect)

The rect element creates rectangles and squares. It's one of the most commonly used SVG shapes.

Key Attributes:

  • • x, y - Position coordinates
  • • width, height - Dimensions
  • • rx, ry - Corner radius for rounded rectangles

Example Code:

<rect x="10" y="10" width="80" height="60" />

Circle

The circle element creates perfect circles. It's defined by its center point and radius.

Key Attributes:

  • • cx, cy - Center coordinates
  • • r - Radius

Example Code:

<circle cx="100" cy="100" r="50" />

Ellipse

The ellipse element creates oval shapes. Unlike circles, ellipses can have different horizontal and vertical radii.

Key Attributes:

  • • cx, cy - Center coordinates
  • • rx - Horizontal radius
  • • ry - Vertical radius

Example Code:

<ellipse cx="100" cy="100" rx="80" ry="40" />

Line

The line element creates straight lines between two points. It's perfect for creating simple geometric patterns.

Key Attributes:

  • • x1, y1 - Starting point coordinates
  • • x2, y2 - Ending point coordinates
  • • stroke - Line color (required for visibility)

Example Code:

<line x1="0" y1="0" x2="100" y2="100" stroke="black" />

Polyline

The polyline element creates connected line segments through a series of points. It's useful for creating open shapes.

Key Attributes:

  • • points - Space-separated list of x,y coordinates
  • • fill - Fill color (optional)
  • • stroke - Line color

Example Code:

<polyline points="20,20 60,60 100,20 140,60 180,20" />

Polygon

The polygon element creates closed shapes by connecting a series of points. It automatically closes the shape.

Key Attributes:

  • • points - Space-separated list of x,y coordinates
  • • fill - Fill color
  • • stroke - Border color

Example Code:

<polygon points="100,20 180,80 100,140 20,80" />

Text

The text element adds text to SVG graphics. Text in SVG is scalable and can be styled with CSS.

Key Attributes:

  • • x, y - Text position coordinates
  • • font-family - Font type
  • • font-size - Text size
  • • text-anchor - Text alignment

Example Code:

<text x="100" y="100" text-anchor="middle">Hello SVG!</text>

Hello SVG!Scalable TextVector Graphics

Combining Shapes

The real power of SVG comes from combining multiple basic shapes to create complex designs. Here's an example of a simple house made from basic shapes:

House Design Components:

  • • Rectangle - Main house body
  • • Triangle (polygon) - Roof
  • • Rectangle - Door
  • • Rectangle - Windows
  • • Circle - Door handle

Code Structure:

<svg width="200" height="200">
  <rect x="40" y="80" width="120" height="80" fill="beige" />
  <polygon points="30,80 100,30 170,80" fill="darkred" />
  <rect x="80" y="120" width="30" height="40" fill="brown" />
  <!-- More shapes... -->
</svg>

Best Practices

Organization

  • • Group related shapes using <g> elements
  • • Use meaningful IDs for important elements
  • • Comment your code for complex designs
  • • Maintain consistent naming conventions

Performance

  • • Minimize the number of elements
  • • Use CSS classes for repeated styles
  • • Optimize coordinates for precision
  • • Consider viewBox for responsive scaling

Accessibility

  • • Add alt text using <title> and <desc>
  • • Use semantic elements when possible
  • • Ensure sufficient contrast for visibility
  • • Provide text alternatives for complex graphics

Maintenance

  • • Keep shapes simple and well-structured
  • • Use relative positioning when possible
  • • Document complex layouts with comments
  • • Test across browsers for compatibility

Conclusion

Basic SVG shapes provide a solid foundation for creating vector graphics. By mastering these fundamental elements, you can build complex designs through simple combinations and transformations.

Remember that while these shapes are basic, they're incredibly powerful when combined with CSS styling, JavaScript interactivity, and advanced SVG features like gradients, patterns, and filters.

Start with these basic shapes, experiment with their attributes, and gradually build more complex designs. The more you practice, the more you'll discover the creative possibilities within SVG.

Ready to Practice?

Explore our SVG collection and tools to start creating your own vector graphics.

Browse SVG CollectionLearn SVG Paths
← Back to HomeLearn About SVG Paths →