Getting started with SVG – SVG as a background image

You can display an SVG file within an HTML document, by specifying it as a background image in CSS. For example:

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;

If the dimensions specified in your SVG file are larger than the dimensions of your HTML element, it may be desirable to specify the background-size property, to scale the SVG to fit within its element.

As with using SVG as an <img>, it’s worth noting some limitations with this approach:

  • Browser support doesn’t include Internet Explorer 8 and earlier versions, nor Android 2.3 and earlier versions.
  • You can’t style the individual elements contained within the SVG file using CSS which is external to the SVG file. All CSS must be within the image file itself.

if you want to reproduce, please indicate the source:
Getting started with SVG – SVG as a background image - CodeDay