/    Sign up×
Community /Pin to ProfileBookmark

svg symbol as CSS background?

I am trying to use a symbol link in CSS background-image. But this seems to be impossible?

“`
.symbol {
width: 42px;
height: 42px;
padding: 0px;
background-image: url(“<svg><use xlink:href=”#status6″ /></svg>”);
cursor: pointer;
}
“`

https://jsfiddle.net/e2jgnytr/3/

Is this possible? If – how?

to post a comment
CSSHTML

5 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJul 01.2022 — I found this:

https://stackoverflow.com/questions/10768451/inline-svg-in-css

but did not work for xlink, neither url encoded nor base64 encoded.

According to this:

https://stackoverflow.com/questions/33001321/can-svg-use-xlink-be-used-in-a-css-background-image

Robert Longson's comment:
>images must be complete in a single file so the <use> reference would have to be internal to the image and not to an external file as you have it.
>
it's not possible. Where I assume that an image referenced by `url</C> in CSS is equivalent to a file.

I tried using a pseudo element <C>
::before`
but it doesn't accept HTML or SVG code.

I assume you intend to avoid to insert the SVG text of your icon multiplely. This should be possible by inserting it into a file and referencing it in the CSS.
Copy linkTweet thisAlerts:
@mdahmadkhan0967Jul 01.2022 — Find here [url=https://www.yellowpages.ae/subcategory/engineering-&-mechanicals/mep-contracting/5eca2f24ebee8a7379accf9c]MEP Contractors in UAE[/url]. Get complete details of MEP Contracting Companies provides a complete range of Mechanical, Electrical and Plumbing services.
Copy linkTweet thisAlerts:
@sibertauthorJul 01.2022 — > @Sempervivum#1645121 I assume you intend to avoid to insert the SVG text of your icon multiplely. This should be possible by inserting it into a file and referencing it in the CSS.

I find svg symbol convenient. And my goal is to treat svg images the same way regardless where I use the icon.

Maybe I have to add an svg icon in each and every table row (where svg symbol works). But to me it seems more code than a single CSS. Or do I have to treat them different (equal symbols and svg documents)

Thanks anyway.
Copy linkTweet thisAlerts:
@sibertauthorJul 01.2022 — I found a solution that is not based on symbol.

https://jsfiddle.net/9tkqa514/

``<i>
</i>.symbol {
width: 42px;
height: 42px;
padding: 0px;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Lager_1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='42px' height='42px' viewBox='0 0 42 42' %3E%3Ccircle cx='21' cy='28.009' r='1.873'/%3E%3Ccircle cx='21' cy='20.25' r='1.872'/%3E%3Ccircle cx='21' cy='12.49' r='1.872'/%3E%3C/svg%3E");
cursor: pointer;
}<i>
</i>
`</CODE>

And the other solution is based on "symbol", but repeated for each table row:

<CODE>
`<i>
</i>function filltable(data) {
for (let item of data) {
row = table.insertRow();
row.setAttribute("data-id", item.tsk_id)

r1 = row.insertCell(0);
r1.setAttribute("data-key", "tsk_subject");
r1.innerHTML = item.tsk_subject
row.insertCell(1).className = "status"
row.insertCell(2).insertHTML = '&lt;svg&gt;&lt;use xlink:href="#status6" /&gt;&lt;/svg&gt;'
}
tippy2()
}<i>
</i>
``

But the above does not work as I expected.

Which one is "best" regarding to speed and simplicity?
Copy linkTweet thisAlerts:
@skinhampshireJul 02.2022 — The use of botox basingstoke has become very popular for reducing wrinkles and rejuvenating the ageing face. The effects are only temporary, but the injections can be done quickly, require no recovery time, and are not as complicated as many other cosmetic procedures for the face.

https://www.skinhampshire.com/
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...