SVG Backgrounds

Scalable, crisp graphics that look perfect at any size

Why SVG Backgrounds?

SVG (Scalable Vector Graphics) backgrounds offer unmatched quality and flexibility for modern web design. Unlike raster images, SVG graphics remain crisp at any scale, are lightweight, and can be styled with CSS or animated.

📐

Infinitely Scalable

Perfect quality at any size, from mobile to 4K displays

🚀

Lightweight

Small file sizes compared to equivalent raster images

🎨

Customizable

Change colors, shapes, and animations with CSS

⚡

No HTTP Requests

Inline SVG data URIs load instantly

SVG Pattern Gallery

Dots Pattern
Lines Pattern
Geometric Shapes
Wave Pattern
Hexagon Grid
Organic Shapes

SVG Data URIs in CSS

The most common way to use SVG backgrounds is through data URIs, which embed the SVG code directly in your CSS.

Basic Syntax

/* Basic SVG data URI */
.svg-background {
    background-image: url('data:image/svg+xml,<svg...>...</svg>');
}

/* URL-encoded version (recommended) */
.svg-background-encoded {
    background-image: url('data:image/svg+xml,%3Csvg...%3E...%3C/svg%3E');
}

/* Base64 encoded (less efficient) */
.svg-background-base64 {
    background-image: url('data:image/svg+xml;base64,PHN2Zy4uLj4uLi48L3N2Zz4=');
}

Simple Circle Pattern

'); background-size: 40px 40px; border: 2px solid #333; border-radius: 8px; margin: 1rem 0; ">
.circle-pattern {
    background-image: url('data:image/svg+xml,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="8" fill="%23667eea" opacity="0.5"/></svg>');
    background-size: 40px 40px;
    background-repeat: repeat;
}

/* Important: URL-encode special characters */
/* # becomes %23 */
/* < becomes %3C */
/* > becomes %3E */
/* " becomes %22 */

Interactive SVG Pattern Builder

40px
0.5
40px

Generated CSS:

/* Generated CSS will appear here */

Advanced SVG Patterns

1. Complex Geometric Patterns

'); background-size: 120px 120px; border: 2px solid #333; border-radius: 8px; margin: 1rem 0; ">
.complex-pattern {
    background-image: url('data:image/svg+xml,<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="complexPattern" x="0" y="0" width="120" height="120" patternUnits="userSpaceOnUse"><rect width="120" height="120" fill="%23f8f9fa"/><circle cx="60" cy="60" r="40" fill="none" stroke="%23667eea" stroke-width="2"/><circle cx="60" cy="60" r="25" fill="none" stroke="%23764ba2" stroke-width="1"/><circle cx="60" cy="60" r="10" fill="%23f093fb" opacity="0.5"/><circle cx="20" cy="20" r="8" fill="%23667eea" opacity="0.3"/><circle cx="100" cy="20" r="8" fill="%23667eea" opacity="0.3"/><circle cx="20" cy="100" r="8" fill="%23667eea" opacity="0.3"/><circle cx="100" cy="100" r="8" fill="%23667eea" opacity="0.3"/></pattern></defs><rect width="120" height="120" fill="url(%23complexPattern)"/></svg>');
    background-size: 120px 120px;
}

2. Gradient Patterns

'); background-size: 100px 100px; border: 2px solid #333; border-radius: 8px; margin: 1rem 0; ">
.gradient-pattern {
    background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23667eea;stop-opacity:0.3"/><stop offset="100%" style="stop-color:%23f093fb;stop-opacity:0.8"/></linearGradient><radialGradient id="grad2" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23fff;stop-opacity:0.5"/><stop offset="100%" style="stop-color:%23764ba2;stop-opacity:0.1"/></radialGradient></defs><rect width="100" height="100" fill="url(%23grad1)"/><circle cx="50" cy="50" r="30" fill="url(%23grad2)"/></svg>');
    background-size: 100px 100px;
}

3. Text and Typography

BACKGROUND TEXT'); background-size: 200px 50px; border: 2px solid #333; border-radius: 8px; margin: 1rem 0; display: flex; align-items: center; justify-content: center; color: #333; font-weight: 600; ">Content with text watermark
.text-watermark {
    background-image: url('data:image/svg+xml,<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg"><text x="100" y="30" text-anchor="middle" fill="%23667eea" font-family="Arial, sans-serif" font-size="12" opacity="0.1">BACKGROUND TEXT</text></svg>');
    background-size: 200px 50px;
    background-repeat: repeat;
}

Animated SVG Backgrounds

SVG supports animation through SMIL (Synchronized Multimedia Integration Language), allowing for complex animated backgrounds without JavaScript.

Color Animation

.animated-color {
    background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="animGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:%23667eea"><animate attributeName="stop-color" values="%23667eea;%23764ba2;%23f093fb;%23667eea" dur="3s" repeatCount="indefinite"/></stop><stop offset="100%" style="stop-color:%23764ba2"><animate attributeName="stop-color" values="%23764ba2;%23f093fb;%23667eea;%23764ba2" dur="3s" repeatCount="indefinite"/></stop></linearGradient></defs><circle cx="50" cy="50" r="40" fill="url(%23animGrad)"/></svg>');
    background-size: 100px 100px;
}

Rotation Animation

'); background-size: 80px 80px; border: 2px solid #333; border-radius: 8px; margin: 1rem 0; ">
.rotating-pattern {
    background-image: url('data:image/svg+xml,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" values="0 40 40;360 40 40" dur="10s" repeatCount="indefinite"/><polygon points="40,10 60,30 60,50 40,70 20,50 20,30" fill="none" stroke="%23667eea" stroke-width="2" opacity="0.3"/></g></svg>');
    background-size: 80px 80px;
}

Advanced SVG Techniques

1. Responsive SVG Patterns

'); background-size: 15vw 15vw; ">
/* Responsive with viewport units */
.responsive-svg {
    background-size: 15vw 15vw;
}

@media (max-width: 768px) {
    .responsive-svg {
        background-size: 25vw 25vw;
    }
}

2. CSS Custom Properties

'); background-size: 60px 60px; ">
/* Unfortunately, CSS variables don't work in data URIs */
/* Use JavaScript to generate dynamic SVGs */
function generateSVG(color) {
    return `url('data:image/svg+xml,<svg...fill="${color}"...</svg>')`;
}

.dynamic-svg {
    background-image: var(--dynamic-svg);
}

3. Mask and Clip Patterns

'); mask-size: 50px 50px; -webkit-mask: url('data:image/svg+xml,'); -webkit-mask-size: 50px 50px; ">
.masked-pattern {
    background: linear-gradient(45deg, #667eea, #f093fb);
    mask: url('data:image/svg+xml,<svg...>...</svg>');
    mask-size: 50px 50px;
    -webkit-mask: url('data:image/svg+xml,<svg...>...</svg>');
    -webkit-mask-size: 50px 50px;
}

Performance & Optimization

SVG vs Other Formats

Aspect SVG PNG CSS Gradients
File Size Very Small Large Smallest
Scalability Perfect Poor Perfect
Complexity High Medium Low
HTTP Requests None (data URI) One per image None
Animation Built-in None CSS only

Optimization Best Practices

  • Minimize SVG code: Remove unnecessary attributes and whitespace
  • Use simple shapes: Complex paths increase file size
  • Optimize colors: Use hex codes instead of named colors
  • Reuse elements: Use <defs> and <use> for repeated elements
  • Consider CSS alternatives: Simple patterns may be better as CSS
/* Optimized SVG example */
/* Before - verbose */
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="rgb(102, 126, 234)" opacity="0.5"></circle>
</svg>

/* After - optimized */
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="%23667eea" opacity=".5"/>
</svg>

/* Use SVGO tool for automatic optimization */
npm install -g svgo
svgo input.svg -o output.svg

Browser Support & Fallbacks

Feature Chrome Firefox Safari Edge
SVG Data URIs ✓ 4+ ✓ 4+ ✓ 4+ ✓ All
SVG Animations ✓ 4+ ✓ 4+ ✓ 6+ ✓ All
SVG Masks ✓ 4+ (-webkit-) ✓ 53+ ✓ 4+ (-webkit-) ✓ 79+

Fallback Strategies

/* Progressive enhancement */
.pattern-bg {
    /* Fallback: solid color */
    background-color: #f0f0f0;
    
    /* Fallback: CSS gradient */
    background-image: linear-gradient(45deg, #667eea, #764ba2);
    
    /* Enhanced: SVG pattern */
    background-image: url('data:image/svg+xml,...');
}

/* Feature detection with CSS */
@supports (mask: url()) {
    .advanced-pattern {
        /* SVG mask techniques */
    }
}

/* JavaScript fallback */
function supportsSVG() {
    return document.implementation.hasFeature(
        "http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"
    );
}

if (!supportsSVG()) {
    // Use PNG fallback
    document.querySelector('.svg-bg').style.backgroundImage = 
        'url("fallback.png")';
}

Common SVG Pattern Library

1. Polka Dots

.polka-dots {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="3" fill="%23667eea" opacity="0.5"/></svg>');
    background-size: 20px 20px;
}

2. Diagonal Lines

.diagonal-lines {
    background-image: url('data:image/svg+xml,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0,40 L40,0" stroke="%23667eea" stroke-width="1" opacity="0.3"/></svg>');
    background-size: 40px 40px;
}

3. Grid Pattern

.grid-pattern {
    background-image: url('data:image/svg+xml,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50" fill="none" stroke="%23667eea" stroke-width="1" opacity="0.2"/></svg>');
    background-size: 50px 50px;
}

4. Hexagon Pattern

.hexagon-pattern {
    background-image: url('data:image/svg+xml,<svg width="56" height="48" xmlns="http://www.w3.org/2000/svg"><polygon points="28,6 42,16 42,32 28,42 14,32 14,16" fill="none" stroke="%23667eea" stroke-width="1" opacity="0.3"/></svg>');
    background-size: 56px 48px;
}

5. Organic Blobs

.organic-blobs {
    background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M50,10 C70,20 80,40 70,60 C50,70 30,60 20,40 C30,20 50,10 50,10 Z" fill="%23667eea" opacity="0.1"/></svg>');
    background-size: 100px 100px;
}

Accessibility Considerations

SVG Background Accessibility

  • Decorative only: SVG backgrounds are not accessible to screen readers
  • Respect motion preferences: Disable animations for users who prefer reduced motion
  • Contrast ratios: Ensure sufficient contrast between background and content
  • Fallbacks: Provide alternatives for users with older browsers
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .animated-svg {
        background-image: url('data:image/svg+xml,<svg...>static version</svg>');
    }
}

/* Ensure contrast */
.accessible-pattern {
    background-image: url('data:image/svg+xml,...');
    /* Ensure content has sufficient contrast */
    color: #333;
    background-color: rgba(255,255,255,0.9);
}

/* Provide meaningful alternatives */
.pattern-container::before {
    content: "";
    /* Visible pattern */
}

@media (prefers-reduced-transparency: reduce) {
    .pattern-container {
        /* Solid background alternative */
        background-image: none;
        background-color: #f8f9fa;
    }
}

Related Resources

CSS Background Patterns

Create patterns with pure CSS

Animated Backgrounds

CSS animation techniques

Background Repeat

Control pattern repetition

Background Size

Scale backgrounds perfectly