SVG Background

At my site, svg background is a collection of SVG based backgrounds for website design use. Easy to use, completely free.

Click to copy and paste to your code.

What is SVG background

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, this is what you work with in Adobe illustrator. You can use SVG on the web easily, but there are plenty of things that you should know about:

Why do we use SVG?

  • 1. Small file sizes that compress well

  • 2. Scales to any size without losing clarity (except very tiny)

  • 3. Looks great on retina displays

  • 4. Design control like interactivity and filters

Using SVG as a background-image

Notice that we have set the background-size to the size of the logo element. We have to do that otherwise we only see a bit of the upper left of our much larger original SVG image. These numbers are aspect-ratio aware of the original size. But you can use background-size keywords if you want to make sure the image fits and the parent the exact right size.