How to correctly include SVG code using only CSS?

Question

css

There is access to the site only to CSS. Is it possible to include SVG code only through CSS and how to do it? Maybe someone will give an example.

Answer 1

Can be inlined

.e{
background-image:  url("data:image/svg+xml;utf8,<svg>....</svg>")
}

Answer 2

You can try using :before or :after in the content attribute:

DIV:before{
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" /></svg>');
  }

Answer 3

In CSS, you can include SVG using the standard propertybackground-image

.element {
  background-image: url(/images/image.svg);
}

True, in this case you will not have access to editing the properties of the elements of the SVG itself.

Answer 4

I would like to paint for a teapot. Where is the best place to get the svg code? (I sort of got it through corel by opening svg in notepad). Where can I upload svg if I receive a link? Or how to insert this svg code into css to make it work. Do you immediately need to paint svg with background-color so that it is visible, etc.? I would be very grateful for a constructive answer!

Answer 5

Take the svg code, you can even try dragging the picture from the editor into an open notepad and inserting the code in this way, at least in illustrator it’s possible, like in Corell, I don’t know, or find something like save as. Then the picture can be uploaded to some exchanger for photos, or to a free stock, somewhere in the cloud, in general. Insert a link to the image in css through background-image.
Option two, find a base64 converter on the net, and google "base64 converter svg", fill it with svg and copy-paste a hefty and scary code, then paste it into the background-image, only without url(), and stupidly paste it as a property value.

Answer 6

I always do almost this way
1) create a sprite, use symbol

<div style="display: none;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="right-arr" viewBox="0 0 17 32">
            <g id="right-arr">
                <line x1="16" y1="16" x2="1" y2="31"/>
                <path d="M1,1"/>
                <line x1="1" y1="1" x2="16" y2="16"/>
            </g>
        </symbol>
        <symbol id="left-arr" viewBox="0 0 17 32">
            <g id="left-arr">
                <line class="cls-1" x1="1" y1="16" x2="16" y2="1"/>
                <path class="cls-1" d="M16,31"/>
                <line class="cls-1" x1="16" y1="31" x2="1" y2="16"/>
            </g>
        </symbol>
    </svg>
</div>

2) in the markup I write:

<svg class="icon-right-arr">
  <use xlink:href="#right-arr"></use>
</svg>
<svg class="icon-left-arr">
  <use xlink:href="#left-arr"></use>
</svg>

and voila, you're done, you can affect your icons any way, anywhere with css.
Regarding the sheet with the svg sprite, it's under display: none; but if the perception is jarring, you can also throw it somewhere on a server and pull it from there.