CODEWITHSUNDEEP
csssvglazy-loading
Sam
Sam

Reputation: 2093

Is it possible to Inline an SVG in style.css for reuse, multiple times, as a background-image?

Essentially the footer on many pages of my websites, is 3 buttons. In style.css I've styled them with a background svg. This is problematic because I have multiple images at the top paused by class="lazyload" using <script src="../lazysizes.min.js" async=""></script>, so the browser is now prioritising loading 3 unimportant SVG images at the very bottom.

.button {
    background-repeat: no-repeat;background-position: center;background-size: contain}

.button{background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, silver, darkgrey)}
.button:hover {background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, #648DA2, #215c7a)}

I want to inline the svg code in style.css however you can see I use each svg twice, I use it again for the button:hover state. I don't want to bloat out my styles.css with duplicate svg code. Further I read that svgs aren't cached, so whenever the users goes to a new page it loads them again, and it may even load the svgs twice if the user hovers on any page - Good Lord!

I've tried Google, it has information on <use xlink=""/> but that's if you want to reuse an svg in the HTML body, there doesn't appear to be a way to inline SVG for reuse within style.css, or is there?

Thanks to G-Cyrillus comment on css vars I used this:

.buttonLeft{
background-repeat: no-repeat;background-position: center;background-size: contain;
--gem: url("data:image/svg+xml;base64,.....BLOB....");
background-image:var(--gem), linear-gradient(to bottom right, silver, darkgrey)}

.buttonLeft:hover {background-image:var(--gem), linear-gradient(to bottom right, #648DA2, #215c7a)}

It switches the background gradient on a button on hover, but doesn't bloat up the CSS with another background images for the hover state. PERFECT!

Upvotes: 2

Views: 683

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

(from earlier comment)

You may use the css var() function to avoid repeating the same value and shorten the code .

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

https://developer.mozilla.org/en-US/docs/Web/CSS/var()

The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.

example for a background : svg found at www . svgrepo . com

html {
  --svg: url(https://www.svgrepo.com/show/530401/table-of-contents.svg) no-repeat center;
  background: var(--svg) / 50%;
  filter : drop-shadow(0 0 5px);
}

body {
  margin: 0;
  height: 100vh;
  background: var(--svg) / 25%;
}

p {
  background: var(--svg) / 60%; 
  padding: 6em 3em;
  width:max-content
}
<p>
  some more bg here
</p>
<p style="background-color:silver;color:white">
  Any SVG will do.
</p>

Upvotes: 3

Related Questions