Menu
I have a complex Jquery-UI based dialog and I want to provide a SVG image as background. I tried to make this work in a simple test file first and it does not work though the SVG, as a standalone image, works fine. Here is the simplified code:
<script>
$(document).ready(function () {
svg = "<svg width='400' height='400' fill='url(#grad1)' \
xmlns='http://www.w3.org/2000/svg'> <rect id='bkgrect' width='400' \
height='400' style='fill:'url(#grad1)'; stroke-width:3;'/> <defs>\
<linearGradient id='grad1' x1='0' y1='20%' x2='0%' y2='100%'> \
<stop id='stop1' offset='0%' stop-color='blue'/> <stop offset='100%' \
stop-color='white'/> </linearGradient> </defs> </svg>";
svgBase64 = btoa(svg);
bkgrndImg = "url('data:image/svg+xml;base64,"+ svgBase64 +"')";
$('#testDiv').css('background-image', bkgrndImg);
});
</script>
</head>
<body>
<div id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;"> Some SVG Div </div>
<svg ... /svg>
The svg ... /svg is the same svg as used in the background and it displays properly.
After looking at various solutions, I have relied primarily on this post. I also tried to simulate background SVG image by using z-index and positioning the image in the Div as an image but thats not a good fix. I want to get SVG as a background image to work smoothly across browsers because at least SVG gradients are well supported in all modern browsers and I think the time for SVG's potential to be fully realized has finally arrived.
796
you have to change your path background-image: url('/ximages/websiteheader1. png') ; TO background-image: url('ximages/websiteheader1. png') ; actually, remove the first / from the path of the image.
SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.
Say you want to put an image or two on a webpage. One way is to use the background-image CSS property. This property applies one or more background images to an element, like a <div> , as the documentation explains.
You can't adjust individual properties, like fill color, of an SVG background because it is treated just like any image.
Here is an alternative. You could use CSS classes then in your Javascript just change its class to toggle between different backgrounds. See example below:
$('button').click(function() {
$('#testDiv').toggleClass('gradient1 gradient2');
}); .gradient1 {
background: #4e8ef7 url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjk2YWQ0IiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ZThlZjciIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
background-size: contain;
}
.gradient2 {
background: #7962ff url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjM2ZiYWUyIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3OTYyZmYiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
background-size: contain;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change gradient</button>
<div class="gradient1" id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;">Some SVG Div</div>Or
$('button').click(function() {
var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#EEE'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('testDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change gradient</button>
<div class="gradient1" id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;">Some SVG Div</div>EDIT Added OPs gradient color.
Problem is with syntax :
Change style='fill:'url(#grad1)'; stroke-width:3;' to style='fill:url(#grad1);stroke-width:3;' -- remove the ' around the url() and it should work
$(document).ready(function() {
var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' fill='url(#grad1)'><rect id='bkgrect' width='400' height='400' style='fill:url(#grad1);stroke-width:3;' /><linearGradient id='grad1' x1='0' y1='20%' x2='0%' y2='100%'><stop offset='0%' stop-color='blue'/><stop offset='100%' stop-color='white'/> </linearGradient><rect fill='url(#grad1)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('testDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;">Some SVG Div</div>Read more here about styling properties
129
You could try not using the base64 encoding, as described here:
https://css-tricks.com/probably-dont-base64-svg/
.bg {
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}
However, if you only want the gradient, you could just use the CSS background-image: linear-gradient(blue, white) syntax.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
