Inline Svg in Css

Inline SVG in CSS

Yes, it is possible. Try this:

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>");
}
  • http://jsfiddle.net/6WAtQ/

(Note that the SVG content needs to be url-escaped for this to work, e.g. # gets replaced with %23.)

This works in IE 9 (which supports SVG). Data-URLs work in older versions of IE too (with limitations), but they don’t natively support SVG.

Inline SVG in CSS doing background image

  • You're missing the definition of the xlink namespace.
  • The # character is reserved in URLs to indicate the start of a fragment identifier. It must be written as %23

That gives us this as a valid URL

data:image/svg+xml;utf8,<svg class='editorial' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none' viewBox='0 24 150 28'><defs><path id='gentle-wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' /></defs><g class='parallax1'><use xlink:href='%23gentle-wave' x='50' y='3' fill='%23f461c1' /></g></svg>

Try pasting the URL directly into your browser's address bar and it will tell you.

Inline SVG in CSS doesn't work

You need to set xmlns="http://www.w3.org/2000/svg". You may find more information here:

#bgr{  width:500px;  height:500px;  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"   width="500" height="500"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" style="fill:red;"/></svg>');}
<div id="bgr"></div>

Inline svg in css is hidden behind div

Is there a reason you're including it with background-image? You could try moving it out of the background image and into the HTML, then making it a background with CSS position: absolute.

I've changed your example slightly to include my idea. Let me know if this is not exactly what you're looking for and I can maybe help you a little further?

.curve {  position: relative;}
.curve svg { position: absolute; z-index: -3; bottom: 0;}
.curve svg path { fill: none; stroke: #53DD6C; stroke-width: 120; stroke-linecap: round;}
<div class="curve">  <svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270'> <path d='M-314,267 C105,364 400,100 812,279'/> </svg>  <div class="beforeFooter">    <div id="blankGTitle">      <h2>Impacting lives.</h2>    </div>
<div id="blankGText"> <h3>Create your event and make a difference.</h3> </div>
<div id="buttono4"> <nuxt-link to="/create-event"> <buttons-vue text="create my event" type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" /> </nuxt-link> </div>
<div id="blankGText2"> <nuxt-link to="/organiser" id="blankGText2" class="wText"> <p class="underline">Tell me more</p> </nuxt-link> </div> </div></div>

Is there a way to use SVG as content in a pseudo element ::before or ::after

Yes you can! Just tested this and it works great, this is awesome! It still doesn't work with html, but it does with svg.

SVG URL encoder to format your own SVGs as shown here.

#test::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
width: 200px;
height: 200px;
}
<div id="test"></div>

How to add extra outer space to inline svg?

Adjust the viewBox attribute:

viewBox="-25 -53 562.00002 562"

Adds space for a 25px margin.

Note that you have to decrease the top/left coordinates by 25 and increase the bottom/right coordinates by double the amount as your width/height must cater for 2 times the margin width.

svg {  width: 10rem;  fill: transparent;  stroke: #222;  stroke-width: 30;}
svg:hover { fill: #222;}
<svg   viewBox="-25 -53 562.00002 562"   xmlns="http://www.w3.org/2000/svg">  <path d="m471.382812 44.578125c-26.503906-28.746094-62.871093-44.578125-102.410156-44.578125-29.554687 0-56.621094 9.34375-80.449218 27.769531-12.023438 9.300781-22.917969 20.679688-32.523438 33.960938-9.601562-13.277344-20.5-24.660157-32.527344-33.960938-23.824218-18.425781-50.890625-27.769531-80.445312-27.769531-39.539063 0-75.910156 15.832031-102.414063 44.578125-26.1875 28.410156-40.613281 67.222656-40.613281 109.292969 0 43.300781 16.136719 82.9375 50.78125 124.742187 30.992188 37.394531 75.535156 75.355469 127.117188 119.3125 17.613281 15.011719 37.578124 32.027344 58.308593 50.152344 5.476563 4.796875 12.503907 7.4375 19.792969 7.4375 7.285156 0 14.316406-2.640625 19.785156-7.429687 20.730469-18.128907 40.707032-35.152344 58.328125-50.171876 51.574219-43.949218 96.117188-81.90625 127.109375-119.304687 34.644532-41.800781 50.777344-81.4375 50.777344-124.742187 0-42.066407-14.425781-80.878907-40.617188-109.289063zm0 0"/></svg>


Related Topics



Leave a reply



Submit