Using inline SVG as a background in CSS

Recently, I've been on the hunt for a way to create a blur effect on a background specifically for IE10+. After experimenting with StackBlur, I found that it did work, but unfortunately, it was quite slow due to the size of my background image. I'm looking for a solution that will render the blur effect as quickly as possible.

I came across using an SVG filter for the blur effect which works perfectly when applied to an SVG content like this:

<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>

My goal is to use this SVG image as a CSS background. Although I stumbled upon a helpful fiddle here showing that it is achievable, I'm encountering issues with getting it to work properly in my own code - demonstrated by this failed attempt: here

var mySVG2 ="<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>";

var mySVG64 = window.btoa(mySVG2);
$('body').css({
    "background-image": "url('data:image/svg+xml;base64,"+mySVG64+"')"
});

Despite attempting to convert to Base64 format, the issue persists and I have yet to find a successful solution.

Answer №1

I recommend starting by encoding the image link in the first place. A helpful tool for this task is available here:

  1. Next, use a validator to ensure that your code is valid. You can do this by visiting http://validator.w3.org/#validate_by_input
  2. Save your SVG file.
  3. Then, encode the SVG file.

    Check out the DEMO edit here or View the DEMO full page here

Your resulting SVG code may look like the following (with a truncated linked image):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width='331' height='500' id='svgroot' version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<defs><filter id='blur'>
<feGaussianBlur stdDeviation='4' />
</filter>
</defs>
<image filter='url(#blur)' xlink:href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..... ' height='100%' width='100%'/>
</svg>

The encoded SVG would appear similar to:

data:image/svg+xml;base64, ...much too long to include here....

To improve performance, consider optimizing the size of the image you are using as it appears quite large in my opinion.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for activating JavaScript and embedding it into an HTML document?

I am currently utilizing a JavaScript API that contains several functions. How can I incorporate it into an HTML file? One of the functions, "api.ping()", performs well on PowerShell, but I am encountering difficulties with displaying it on an HTML file. ...

Adding elements to an array in Node.js

In my 'both' object, I need to store 2 arrays: eng and fr. Each of these arrays contains multiple objects. How can I transfer all values from frDisplayData to fr:[] within the 'both' object: const displayData = []; var both = {eng:dis ...

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

What steps are needed to successfully integrate bootstrap.js, jquery, and popper.js into a project by using NPM to add Bootstrap?

I've successfully set up a project and incorporated Bootstrap via npm. However, I'm facing challenges in loading the necessary javascript files for Bootstrap components. It's important to note that I am utilizing a Vagrant Box (virtual machi ...

Why does this CSS ticker only display the first four posts?

Hello, I'm interested in adding a News Ticker to my Rails application. I came across this CSS ticker: I'm facing an issue where it only displays the first four posts. I believe the problem might not be with my data retrieval using the .each loop ...

Avoiding duplication of prints in EJS template files

In my EJS code, I have created a loop to fetch the total amount of items from the database. Here is my current code: <h2>Summary</h2> <% if(typeof items.cart!=="undefined"){ var amount = 0; %> <% i ...

The CSS selector "not:nth-child" is failing to function properly within the template

Trying to apply a margin-top to all labels except the first one in a row using the :not() and :nth-child selectors. Having trouble with my selector, can anyone help? .form-group:not(:nth-child(1)) + .label { margin-top: 20px; } <div class="form- ...

Implement a system in Angular Service that automatically generates user IDs for an array of user inputs

How can I automatically increment the user ID for each new user input and use that value for deletion or updating of specific entries? If a user adds their details as shown in the output picture link below, I want to display the output in a similar format ...

Utilizing Laravel to Send Table Data to Modal for Form Submission to Controller

In our users table, there is an edit modal that needs to retrieve specific user data from the table list and display it within the modal's input fields. This requires using Laravel logic to edit the data and submit it back to the controller as a form. ...

Having trouble creating a PDF from HTML

Having trouble with generating PDFs using various libraries as I keep encountering the following error: Fatal Error: spawn UNKNOWN The code snippet looks like this: mammoth.convertToHtml({ path: './backend/common/template.docx' } ...

What is the best way to create a menu in JavaScript that includes a variable declaration?

Here is the menu I've created: <a id="page1" href="" onclick="var = page1">Home</a> <a id="page2" href="" >About us</a> <a id="page3" href="" >Services</a> <a id="page4" href="" >Partners</a> <a ...

Turn off horizontal scrolling on your mobile site

I am working on a mobile webpage with a Facebook-like side menu button, but I'm having trouble disabling horizontal scrolling using CSS overflow-x:hidden. Here is the code I have so far: <meta name="viewport" content="width=device-width, initial-s ...

What is the best way to integrate HTML code within a JavaScript function?

I need the HTML code to execute only when a specific condition in JavaScript is met. Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function () { if(window.location.href.indexOf("index.php") > -1) { ...

Tampermonkey script encounters the error message "targetNode.dispatchEvent is not a recognized function"

I am attempting to press a button with Tampermonkey but keep encountering this error: userscript.html?id=2514f475-79e4-4e83-a523-6fef16dceeaa:10617 Uncaught TypeError: targetNode.dispatchEvent is not a function at triggerMouseEvent... Check out my scri ...

Exploring IP geolocation integration within Rails 3

I am looking to add a dynamic feature to my homepage that will display the location object closest to the reader's physical location. Currently, I have a Location model with longitude and latitude fields. My goal is to retrieve the location model obj ...

Transferring information from the main layout to subpages within Nextjs

I'm attempting to implement the following scenario; I have a file named /components/master_layout.js with the contents below: import useUser from "../data/use-user"; function MasterLayout({ children }) { const { data, error, mutate } ...

Managing JavaScript localized dates in C#

My application, with the back-end in C# and front-end in Angular Materials, features a search screen that allows users to specify date periods using datepickers. However, I have encountered an issue where some users are not in the UK, causing discrepancies ...

The art of creating an asynchronous function: A comprehensive guide

My goal is to download files from a Firebase bucket and then store them in a database. I need the download process to be asynchronous, ensuring that each file is fully downloaded and added to an array before moving on to the next one. However, my current ...

Creating a foolproof image polling platform: A step-by-step guide

I'm in the process of creating a webpage on my site that allows users to view a collection of images. The goal is for each registered user to choose one picture as their favorite, increasing that picture's score by one. The image with the highest ...

What is the process for packaging my JavaScript application?

Based on my research, I'm curious to know what is the most effective method for distributing a Javascript application. Is it considered best practice to distribute applications using npm packages? Or is npm primarily used for distributing frameworks? ...