SVG embedded as a background image using CSS

One of the popular ways to embed an SVG is using a background image on an

element. The following snippet shows an element with an SVG background image:
.element {
background-image: url(my_SVG_image.svg);
/* other styles */
}
Luckily, we don’t have to apply any fixes or hacks to make an SVG background image
behave as expected—an SVG background image can be positioned, tiled, sized, and
scaled as any bitmap background image can.
Check out the live demo showing a simple example of the above logo being used
as a background image of a fluid element.
In the demo, I’ve used the padding hack so that the element has an intrinsic ratio
similar to that of the SVG. You may or may not want/need to do this. I did this for
demonstration purposes only so that the SVG fits exactly into the background at all
times. I just collapsed the height of the element, and then applied the padding to get
the aspect ratio I wanted. Without doing this, and because the element is empty in the
demo, it would have collapsed anyway and the background image wouldn’t have been
visible.

Making SVGs adaptive Using CSS Media Queries

The fact that the graphical elements inside an SVG are created using XML makes
working with SVGs very liberating. Because SVG content is made up of XML tags that
render graphics, we can select individual elements and apply specific styles to them,
just like we can select HTML elements, using CSS selectors.
Just like you can change the styles of an HTML element—like background color,
borders, etc.—you can change certain styles of an SVG element using CSS. SVG
elements are usually styled using presentation attributes like fill, stroke, transform, and
many others. However, only a subset of all presentation attributes can be set using
CSS. You can find a list of SVG styling properties that can be set using
CSS available in the SVG Styling specification. The list of attributes that can be set
using CSS properties currently does not include the x, y, width, and height attributes; but
these four will be added to the list and we will be able to set them using CSS in SVG2.
Some of the most commonly set styles using CSS include fill, which works similar to a
background color on many elements; stroke, which is similar
to border; opacity, display, transform, and a few others.
For the logo we have in our demos, we’re going to use the img tag to reference it. After
applying the fix mentioned earlier to make the SVG fluid, we’re going to hide some
elements on smaller screens, and change the fill color of others, thus slightly changing
how it looks on different screen sizes that we’ll specify in the CSS media queries.
We’re going to add the media queries inside a <style> tag inside the root <svg>. The
following is how the SVG file we’re going to be referencing looks like:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
<style>
 /* CSS styles and media queries here */
</style>

</svg>
And we’re going to reference the logo using an <img> tag like so:
<img src="logo.svg" alt="Logo" />
At this point, it’s time to point out that the sizes specified in the media queries refer to
the size of the SVG viewport, except for when the SVG is embedded inline in the
document using an <svg> tag. The SVG viewport is defined by the dimensions of the
element referencing the SVG. For example, in the case when the SVG is referenced in
an img tag, the width and height of the img specify the viewport. In other words, the
conditions specified in the media queries apply to the img tag, so that (width: 30em) would
apply styles to the SVG when the img is 30em wide.
That said, here is the markup for the SVG. Each of the elements inside it has an ID
that we’re going to use in the CSS to select and style it:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
<path id="curved_bg" fill="#195463" d="..."/>
<g id="primary_content" fill="#ECECEC">
<path id="icon" d="..."/>
<path id="inner-circle" d="..."/>
<path id="middle-circle" d="..."/>
</g>
<g id="secondary_content" fill="#ECECEC">
<path id="bottom-text" d="..."/>
<path id="upper-text" d="..."/>
<path id="outer-circle" d="..."/>
<circle id="left-dot" cx="31.1" cy="91.5" r="3"/>
<circle id="right-dot" cx="163.4" cy="91.5" r="3"/>
</g>
</svg>
Using a <style> tag inside the SVG, we’re going to specify the media queries that will
change the SVG’s styles depending on the size of the viewport. The SVG will change
as shown in the following image:

We’re only going to be using the CSS fill and opacity properties. As the viewport size
decreases, the curvy background is first removed by setting its opacity to zero, and the
fill color of the remaining content of the SVG is changed from white to dark navy. As
the screen gets smaller, the text part of the logo is removed so that it takes up less
screen estate. And finally, the circle surrounding the icon is removed and only the
anchor icon remains on very small screens.
Adding the media queries, our SVG file looks like this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
<style>
svg * {
transition: fill .1s ease-out, opacity .1s ease-out;
}
@media all and (max-width: 250px) {
#curved_bg {
opacity: 0;
}
#secondary_content, #primary_content {
fill: #195463;
}
}
@media all and (max-width: 200px) {
#secondary_content {
opacity: 0;
}
}
@media all and (max-width: 150px) {
#inner-circle, #middle-circle {
opacity: 0;
}
}
</style>
<path id="curved_bg" fill="#195463" d="..."/>

</svg>
First, I added a transition to the elements inside the SVG so that they fade in and out
and change color smoothly over the course of 0.1 seconds. Then, for each media
query, part of the SVG is hidden.