Intermediate17 min read

Basic SVG Shapes & Styling

17 min read
849 words
36 sections21 code blocks

Introduction

Creating beautiful graphics for your website doesn't require expensive design software or complex image editing skills. With SVG (Scalable Vector Graphics), you can build stunning visuals using simple HTML-like code that works perfectly across all devices and screen sizes.

Think of SVG as digital building blocks - you combine basic shapes like circles, rectangles, and lines to create everything from simple icons to complex illustrations. The best part? You can style these shapes with familiar techniques, making them change colors, sizes, and appearances just like any other HTML element.

In this article, you'll master the fundamental SVG shapes and learn how to style them effectively. By the end, you'll be creating your own icons, logos, and graphics that look professional and scale beautifully on any device.

What are SVG Shapes?

The Building Blocks of Vector Graphics

SVG shapes are predefined elements that represent basic geometric forms like rectangles, circles, and lines. These shapes serve as the foundation for creating more complex graphics, much like how letters combine to form words and sentences.

Understanding the SVG Canvas

Every SVG graphic exists within a coordinate system that starts at the top-left corner (0,0). The x-axis extends to the right, and the y-axis extends downward. Understanding this coordinate system is crucial for positioning your shapes accurately.

JavaScript
<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Shapes will be positioned within this 200x100 canvas -->
</svg>

Basic SVG Shape Elements

Rectangle (<rect>)

The rectangle is one of the most versatile SVG shapes, perfect for creating buttons, panels, and geometric designs.

Essential Attributes:

  • x, y: Position of the top-left corner
  • width, height: Size of the rectangle
  • rx, ry: Corner radius for rounded rectangles
JavaScript
<svg width="300" height="150">
  <!-- Basic rectangle -->
  <rect x="20" y="20" width="100" height="60" fill="blue"/>
  
  <!-- Rounded rectangle -->
  <rect x="150" y="20" width="100" height="60" rx="15" ry="15" fill="green"/>
</svg>

Circle (<circle>)

Circles are perfect for creating buttons, badges, and decorative elements.

Essential Attributes:

  • cx, cy: Center point coordinates
  • r: Radius of the circle
JavaScript
<svg width="200" height="100">
  <!-- Small circle -->
  <circle cx="50" cy="50" r="25" fill="red"/>
  
  <!-- Large circle -->
  <circle cx="130" cy="50" r="35" fill="orange"/>
</svg>

Ellipse (<ellipse>)

Ellipses are oval shapes, great for creating more organic, flowing designs.

Essential Attributes:

  • cx, cy: Center point coordinates
  • rx: Horizontal radius
  • ry: Vertical radius
JavaScript
<svg width="200" height="100">
  <!-- Wide ellipse -->
  <ellipse cx="100" cy="50" rx="60" ry="25" fill="purple"/>
</svg>

Line (<line>)

Lines are essential for creating borders, dividers, and geometric patterns.

Essential Attributes:

  • x1, y1: Starting point coordinates
  • x2, y2: Ending point coordinates
  • stroke: Line color (required for visibility)
  • stroke-width: Line thickness
JavaScript
<svg width="200" height="100">
  <!-- Horizontal line -->
  <line x1="20" y1="30" x2="180" y2="30" stroke="black" stroke-width="2"/>
  
  <!-- Diagonal line -->
  <line x1="20" y1="50" x2="180" y2="80" stroke="blue" stroke-width="3"/>
</svg>

Polyline (<polyline>)

Polylines connect multiple points with straight lines, perfect for creating charts, zigzag patterns, and complex shapes.

Essential Attributes:

  • points: A list of x,y coordinate pairs
  • stroke: Line color
  • fill: Fill color (use "none" for just the outline)
JavaScript
<svg width="200" height="100">
  <!-- Zigzag pattern -->
  <polyline points="20,80 60,20 100,80 140,20 180,80" 
            stroke="red" stroke-width="3" fill="none"/>
</svg>

Polygon (<polygon>)

Polygons are closed shapes with multiple sides, ideal for creating triangles, stars, and custom geometric forms.

Essential Attributes:

  • points: A list of x,y coordinate pairs (automatically closes the shape)
JavaScript
<svg width="200" height="150">
  <!-- Triangle -->
  <polygon points="100,20 40,120 160,120" fill="green"/>
  
  <!-- Diamond -->
  <polygon points="100,10 140,50 100,90 60,50" fill="gold"/>
</svg>

Styling SVG Shapes

Fill Properties

The fill attribute controls the interior color of your shapes.

JavaScript
<svg width="300" height="100">
  <!-- Solid colors -->
  <circle cx="50" cy="50" r="30" fill="red"/>
  <circle cx="130" cy="50" r="30" fill="#3498db"/>
  <circle cx="210" cy="50" r="30" fill="rgb(46, 204, 113)"/>
</svg>

Stroke Properties

Stroke properties control the outline of your shapes.

JavaScript
<svg width="250" height="100">
  <!-- Different stroke styles -->
  <rect x="20" y="20" width="60" height="60" fill="none" stroke="black" stroke-width="2"/>
  <rect x="100" y="20" width="60" height="60" fill="lightblue" stroke="darkblue" stroke-width="4"/>
  <rect x="180" y="20" width="60" height="60" fill="yellow" stroke="red" stroke-width="1"/>
</svg>

Stroke Styling Options

Create different line styles for more visual interest:

JavaScript
<svg width="300" height="120">
  <!-- Dashed line -->
  <line x1="20" y1="30" x2="280" y2="30" stroke="blue" stroke-width="3" 
        stroke-dasharray="10,5"/>
  
  <!-- Dotted line -->
  <line x1="20" y1="60" x2="280" y2="60" stroke="green" stroke-width="3" 
        stroke-dasharray="2,3"/>
  
  <!-- Rounded line caps -->
  <line x1="20" y1="90" x2="280" y2="90" stroke="red" stroke-width="8" 
        stroke-linecap="round"/>
</svg>

Opacity and Transparency

Control the transparency of your shapes for layered effects:

JavaScript
<svg width="200" height="150">
  <!-- Overlapping transparent shapes -->
  <circle cx="70" cy="60" r="40" fill="red" opacity="0.7"/>
  <circle cx="100" cy="60" r="40" fill="blue" opacity="0.7"/>
  <circle cx="85" cy="90" r="40" fill="green" opacity="0.7"/>
</svg>

Practical Examples

Creating a Simple Icon

Let's build a house icon using basic shapes:

JavaScript
<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- House base -->
  <rect x="25" y="50" width="50" height="40" fill="#8B4513" stroke="#654321" stroke-width="2"/>
  
  <!-- Roof -->
  <polygon points="20,50 50,20 80,50" fill="#DC143C" stroke="#B22222" stroke-width="2"/>
  
  <!-- Door -->
  <rect x="40" y="70" width="12" height="20" fill="#4B0082"/>
  
  <!-- Windows -->
  <rect x="30" y="60" width="8" height="8" fill="#87CEEB" stroke="#4682B4"/>
  <rect x="60" y="60" width="8" height="8" fill="#87CEEB" stroke="#4682B4"/>
  
  <!-- Door handle -->
  <circle cx="49" cy="80" r="1" fill="#FFD700"/>
</svg>

Create a modern logo using geometric shapes:

JavaScript
<svg width="150" height="80" viewBox="0 0 150 80">
  <!-- Background circle -->
  <circle cx="40" cy="40" r="30" fill="#2E86AB" opacity="0.9"/>
  
  <!-- Inner triangle -->
  <polygon points="40,25 52,45 28,45" fill="white"/>
  
  <!-- Company name -->
  <text x="85" y="35" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2E86AB">
    TechCorp
  </text>
  
  <!-- Tagline -->
  <text x="85" y="50" font-family="Arial, sans-serif" font-size="10" fill="#666">
    Innovation First
  </text>
</svg>

Creating a Progress Indicator

Build a circular progress indicator:

JavaScript
<svg width="120" height="120" viewBox="0 0 120 120">
  <!-- Background circle -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#e0e0e0" stroke-width="8"/>
  
  <!-- Progress circle (75% complete) -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#4CAF50" stroke-width="8" 
          stroke-dasharray="235,314" stroke-linecap="round" 
          transform="rotate(-90 60 60)"/>
  
  <!-- Center text -->
  <text x="60" y="65" text-anchor="middle" font-family="Arial" font-size="18" font-weight="bold" fill="#333">
    75%
  </text>
</svg>

Use Cases and Applications

Create a complete set of navigation icons:

JavaScript
<svg width="200" height="50" viewBox="0 0 200 50">
  <!-- Home icon -->
  <g>
    <polygon points="25,35 15,25 35,25" fill="#666"/>
    <rect x="20" y="25" width="10" height="15" fill="#666"/>
  </g>
  
  <!-- Search icon -->
  <g transform="translate(50,0)">
    <circle cx="20" cy="20" r="8" fill="none" stroke="#666" stroke-width="2"/>
    <line x1="26" y1="26" x2="30" y2="30" stroke="#666" stroke-width="2"/>
  </g>
  
  <!-- Menu icon -->
  <g transform="translate(100,0)">
    <line x1="15" y1="15" x2="35" y2="15" stroke="#666" stroke-width="2"/>
    <line x1="15" y1="22" x2="35" y2="22" stroke="#666" stroke-width="2"/>
    <line x1="15" y1="29" x2="35" y2="29" stroke="#666" stroke-width="2"/>
  </g>
</svg>

Decorative Elements

Add visual interest to your layouts:

JavaScript
<svg width="300" height="60" viewBox="0 0 300 60">
  <!-- Decorative border -->
  <rect x="0" y="0" width="300" height="60" fill="none" stroke="#ddd" stroke-width="2"/>
  
  <!-- Geometric pattern -->
  <polygon points="30,30 20,15 40,15" fill="#3498db" opacity="0.7"/>
  <polygon points="60,30 50,15 70,15" fill="#e74c3c" opacity="0.7"/>
  <polygon points="90,30 80,15 100,15" fill="#2ecc71" opacity="0.7"/>
  
  <!-- Dividing line -->
  <line x1="150" y1="10" x2="150" y2="50" stroke="#bdc3c7" stroke-width="2"/>
  
  <!-- Dots pattern -->
  <circle cx="200" cy="20" r="3" fill="#9b59b6"/>
  <circle cx="220" cy="20" r="3" fill="#9b59b6"/>
  <circle cx="240" cy="20" r="3" fill="#9b59b6"/>
</svg>

Simple Charts and Diagrams

Create basic data visualizations:

JavaScript
<svg width="250" height="150" viewBox="0 0 250 150">
  <!-- Chart background -->
  <rect x="40" y="20" width="180" height="100" fill="none" stroke="#ddd"/>
  
  <!-- Bar chart -->
  <rect x="60" y="80" width="20" height="40" fill="#3498db"/>
  <rect x="90" y="60" width="20" height="60" fill="#e74c3c"/>
  <rect x="120" y="70" width="20" height="50" fill="#2ecc71"/>
  <rect x="150" y="50" width="20" height="70" fill="#f39c12"/>
  
  <!-- Labels -->
  <text x="70" y="135" text-anchor="middle" font-size="12" fill="#666">Q1</text>
  <text x="100" y="135" text-anchor="middle" font-size="12" fill="#666">Q2</text>
  <text x="130" y="135" text-anchor="middle" font-size="12" fill="#666">Q3</text>
  <text x="160" y="135" text-anchor="middle" font-size="12" fill="#666">Q4</text>
</svg>

Advantages of SVG Shapes

Perfect Scalability

SVG shapes maintain crisp edges and perfect proportions at any size, from tiny mobile icons to large desktop graphics.

Small File Sizes

Simple geometric shapes create very lightweight graphics, often just a few hundred bytes.

Easy Customization

Change colors, sizes, and styles instantly without creating new image files.

Accessibility Support

SVG shapes can include proper titles and descriptions for screen readers.

Vector graphics look perfect when printed at any resolution.

Best Practices for SVG Shapes

Keep Coordinates Clean

Use round numbers when possible for cleaner code and better rendering:

JavaScript
<!-- Good: Clean coordinates -->
<rect x="20" y="20" width="60" height="40" fill="blue"/>

<!-- Avoid: Fractional coordinates unless necessary -->
<rect x="20.5" y="20.33" width="59.67" height="40.25" fill="blue"/>

Use Meaningful Grouping

Group related shapes together for better organization:

JavaScript
<svg width="100" height="100">
  <g id="house-icon">
    <rect x="25" y="50" width="50" height="40" fill="#8B4513"/>
    <polygon points="20,50 50,20 80,50" fill="#DC143C"/>
  </g>
</svg>

Optimize for Performance

Remove unnecessary attributes and keep your code clean:

JavaScript
<!-- Good: Minimal necessary attributes -->
<circle cx="50" cy="50" r="25" fill="red"/>

<!-- Avoid: Redundant default values -->
<circle cx="50" cy="50" r="25" fill="red" opacity="1" stroke="none"/>

Plan Your viewBox

Use viewBox to make your graphics responsive:

JavaScript
<svg width="100%" height="auto" viewBox="0 0 100 100">
  <!-- Content scales proportionally -->
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

Conclusion

Mastering basic SVG shapes and styling opens up endless possibilities for creating custom graphics that enhance your websites. You've learned how to use rectangles, circles, lines, and polygons to build everything from simple icons to complex illustrations.

The key to becoming proficient with SVG is practice and experimentation. Start with simple shapes and gradually combine them into more complex designs. Remember that every professional icon or logo started with these same basic building blocks.

Your next step should be to recreate some simple icons or graphics you see on websites you admire. Try building a set of social media icons, a simple logo, or decorative elements for your current project. With each creation, you'll develop a better understanding of how shapes work together to create compelling visual designs.

The beauty of SVG lies in its simplicity and flexibility - you're not just creating graphics, you're writing code that can be styled, animated, and modified as easily as any other HTML element.