Inline svg css

Add svg to html

<!-- external svg -->
<img src="mySvgImage.svg" />

<!-- internal svg example -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" x="50" y="50"/>
</svg>

Using svg in html

<img src="image.svg" />

Source: vecta.io

Inline svg css

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }

Source: stackoverflow.com

Similar codes

56 votes346 views1 answer
Media queries screen width
CSS
0 vote398 views1 answer
Importing scss into vue component
CSS
0 vote323 views1 answer
Css class and attribute selector
CSS
72 votes345 views6 answers
Css absolute center horizontal
CSS
1 vote363 views1 answer
Change order columns bootstrap
CSS
40 votes334 views3 answers
Select first 5 child css
CSS
0 vote342 views1 answer
Tail block css
CSS
17 votes292 views1 answer
Have you used flexbox & css grid before? what are the differences between them? interview
CSS
0 vote315 views1 answer
Jest test try catch
CSS
0 vote316 views3 answers
Boostarp grid npm css react
CSS