What is an SVG? - SVG Atlas

SVG stands for Scalable Vector Graphics. It's an XML-based vector image format that defines graphics using mathematical shapes, lines, and curves rather than pixels. This makes SVGs infinitely scalable without losing quality.

Simple SVG Example

The Code:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" 
          fill="#3B82F6" stroke="#1E40AF" strokeWidth="2"/>
  <text x="50" y="55" textAnchor="middle" 
        fill="white" fontSize="12" fontWeight="bold">SVG</text>
</svg>

Why Are SVGs Useful?

✓

Scalable

Perfect at any size without quality loss

✓

Lightweight

Small file sizes for faster loading

✓

Editable

Easy to customize colors and styles

✓

Accessible

Can include text and semantic markup

✓

Interactive

Can be animated and styled with CSS

✓

SEO Friendly

Search engines can read SVG content

Basic SVG Shapes

Rectangle

<rect x="10" y="10" 
       width="60" height="40" 
       fill="#EF4444" 
       stroke="#DC2626" 
       strokeWidth="2"/>

Circle

<circle cx="40" cy="30" r="20" 
         fill="#10B981" 
         stroke="#059669" 
         strokeWidth="2"/>

Triangle

<polygon points="40,10 70,50 10,50" 
          fill="#8B5CF6" 
          stroke="#7C3AED" 
          strokeWidth="2"/>

How to Use SVGs

1. Inline SVG (Recommended)

Embed SVG code directly in your HTML. This allows for full CSS styling and JavaScript interaction.

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>

2. As an Image

Use SVG files as regular images with the <img> tag or CSS background.

<!-- HTML -->
<img src="icon.svg" alt="Icon" />

/* CSS */
.icon {
  background-image: url('icon.svg');
}

3. CSS Styling

Style SVG elements with CSS for dynamic colors and effects.

/* Change fill color on hover */
svg circle:hover {
  fill: #F59E0B;
  transition: fill 0.3s ease;
}

/* Use currentColor for theme integration */
.icon {
  color: #3B82F6;
}

Interactive SVG Example

Hover Effect Code:

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50" 
          fill="#3B82F6" stroke="#1E40AF" 
          strokeWidth="3"
          class="hover:fill-yellow-400 
                 transition-colors duration-300"/>
  <path d="M45 60 L55 70 L75 50" 
        stroke="white" strokeWidth="4" 
        fill="none" strokeLinecap="round"/>
</svg>

Hover over the checkmark to see the color change effect!

Best Practices

Do's

✓Use semantic element names and IDs
✓Include proper viewBox attributes
✓Optimize SVG files for web use
✓Add alt text for accessibility

Don'ts

✗Don't use overly complex paths
✗Avoid unnecessary metadata
✗Don't forget responsive design
✗Avoid hardcoded colors when possible

Tools and Resources

Design Tools

• Figma
• Adobe Illustrator
• Inkscape (Free)
• Sketch

Optimization

• SVGO
• SVGOMG
• Squoosh
• TinyPNG

Learning

• MDN Web Docs
• CSS-Tricks SVG Guide
• SVG Tutorial
• Codrops

Ready to Use SVGs?

Explore our collection of free, high-quality SVG graphics perfect for your next project.

Browse SVG Collection