CODEWITHSUNDEEP
htmlcsssvg
Enlico
Enlico

Reputation: 28406

Define an SVG in the HTML but use it like it was included directly in the CSS via background-image with url

I would like to obtain the same result as the following snippet, but with the SVG being defined/included in the HTML file instead of in CSS, so that I can keep the CSS independent from the specific content of the web page.

.image {
  content: "";
  width: 3em;
  height: 3em;
  border-radius: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg");
  background-size: 100%;
}
<div class="image"></div>

I've not been able to do it myself, because as soon as put the SVG in the HTML, then I have to target it and write CSS rules for it, whereas when it is in the CSS as in the snippet above, it is part of the rule, so it's two completely different workflows.

Upvotes: 1

Views: 150

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

You could do it with CSS variables. Like so:

.image {
  content: "";
  width: 3em;
  height: 3em;
  border-radius: 100%;
  background-image: var(--bg);
  background-size: 100%;
}
<div class="image" style="--bg: url(https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg)" ></div>

Although perhaps you are just happy with making the .image CSS rule non-specific, by separating out the icon into a different class. This is a very common technique in CSS.

.image {
  content: "";
  width: 3em;
  height: 3em;
  border-radius: 100%;
  background-size: 100%;
}

.flag-it {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg);
}
<div class="image flag-it"></div>

Then define other versions of the flag-it CSS rule for other flags.

Upvotes: 2

Related Questions