SVG Getting started with SVG SVG as a background image
Example
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.
