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 need no extra network request
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
.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 (or use single quotes inside the SVG) */
/* % becomes %25 */
Interactive SVG Pattern Builder
40px
0.5
40px
Generated CSS:
/* Generated CSS will appear here */
Advanced SVG Patterns
1. Complex Geometric Patterns
.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
.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
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
.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
/* Responsive with viewport units */
.responsive-svg {
background-size: 15vw 15vw;
}
@media (max-width: 768px) {
.responsive-svg {
background-size: 25vw 25vw;
}
}
2. CSS Custom Properties
/* CSS variables are not resolved inside data URIs,
so build the whole url() in JavaScript instead */
function generateSVG(color) {
// encodeURIComponent turns # into %23
return `url('data:image/svg+xml,<svg...fill="${encodeURIComponent(color)}"...</svg>')`;
}
el.style.setProperty('--dynamic-svg', generateSVG('#764ba2'));
/* CSS */
.dynamic-svg {
background-image: var(--dynamic-svg);
}
3. Mask and Clip Patterns
.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 the shortest color form (e.g.
#fff); in data URIs remember that#must be written as%23 - 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 (as written inside a data URI) */
<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 | ✓ Yes | ✓ Yes | ✓ Yes | ✓ Yes |
| SVG Animations | ✓ Yes | ✓ Yes | ✓ Yes | ✓ Yes |
| SVG Masks | ✓ Yes | ✓ Yes | ✓ Yes | ✓ Yes |
All three are supported in every current browser. Older Chromium-based browsers and older Safari versions only support masks through the -webkit-mask properties, so include both forms as in the mask example above.
Fallback Strategies
/* Progressive enhancement */
.pattern-bg {
/* Fallback: solid color */
background-color: #f0f0f0;
/* SVG pattern layered over a gradient: the gradient
still shows if the SVG fails to load or parse */
background-image: url('data:image/svg+xml,...'),
linear-gradient(45deg, #667eea, #764ba2);
}
/* Feature detection with CSS */
@supports (mask-image: none) or (-webkit-mask-image: none) {
.advanced-pattern {
/* SVG mask techniques */
}
}
/* Note: document.implementation.hasFeature() is deprecated and
always returns true, so it cannot detect SVG support. Every
current browser supports SVG backgrounds. */
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;
}
}