How to Add a Background to an SVG
Add a solid color, gradient, or image background to any SVG — using a background <rect>, CSS, or Inkscape — without affecting your existing path content.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: Background <rect> in SVG Code
The standard SVG approach: add a rectangle as the first element (painted behind everything else).
- <rect width='100%' height='100%' fill='#ffffff'/> — solid white background
- Place the rect before all other SVG elements so it renders behind them
- Gradient background: fill='url(#myGradient)' — define the gradient in <defs>
- Rounded background: add rx='10' ry='10' for rounded corner background
- Transparent: don't add a rect — SVG default background is transparent
Method 2: CSS Background on the SVG Element
For inline SVG embedded in HTML, use CSS to set the background.
- svg { background-color: #f5f5f5; }
- Gradient: svg { background: linear-gradient(45deg, #fff, #ccc); }
- Image: svg { background-image: url('bg.jpg'); background-size: cover; }
- This only works for inline SVG — not for external SVG in <img> tags
- The background is outside the SVG coordinate space — won't export with the SVG
Method 3: Inkscape
Inkscape's document properties set the page background color, which can be included in export.
- File > Document Properties > Page > Background Color: set RGBA
- Draw a rect manually: draw rectangle, set fill to desired color, send to back (End key)
- Object > Align and Distribute: align rect to page with 'Relative to page' option
- Export: Inkscape includes the background in PNG export; SVG export includes the rect
Frequently Asked Questions
How do I make an SVG have a transparent background?
Don't add a background <rect>. SVG's default background is transparent. If there's a white rect, delete it in Inkscape or your text editor.
Why does my SVG show a white background in some apps?
Some apps (Cricut Design Space, certain image viewers) add their own canvas background. The SVG itself may be transparent — test by opening in a browser on a dark page.
Can I add a photographic image background to an SVG?
Yes. Add <image href='photo.jpg' width='100%' height='100%'/> as the first element before your paths. For standalone SVG files, embed the image as a base64 data URI.
How do I add a gradient background to SVG?
Define a <linearGradient> in <defs>. Then: <rect width='100%' height='100%' fill='url(#myGradient)'/>. The rect fills with the gradient, appearing as the background.
Will my SVG background show when I use it as an img tag?
Yes — the <rect> background is part of the SVG content and renders in <img>, <object>, and inline contexts alike.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG