Steps for adding SVGs to a <div> element

While there are numerous solutions on Stack Overflow detailing how to append an SVG in a div, none of them have proven successful for me. This could be due to my lack of experience with SVGs.

Therefore, I am generating an SVG on my node server and then constructing a JSON object that includes the SVG along with some other data.

svgFiles.push({
   'file': svgDump, //This contains the well-created SVG
   'vp': JSON.stringify(viewport),
   'page': pageNum
});

I am then sending this object back as a response to my AngularJS code.

$http({ ... }).then(function callback(resp) { // request to node server
  var svg = resp.data.file;
  var container = document.createElement('div');
  var oldContent = container.innerHTML; // There will be an array of objects with SVG data, so I need the 'APPEND' functionality
  // Currently assuming only 1 object for demo purposes
  container.innerHTML = oldContent + svg;
})

Having saved my SVGs in a variable, I expected that appending it to any DIV would suffice.

However, when I attempted this, the result appeared as plain text, including elements like @font-face and src.

I suspect there is something crucial that I am overlooking or not executing correctly. How can I accomplish this task?

javascriptangularjsjsonsvg

Answer №1

After collaborating with a friend, I finally discovered the solution to my problem.

Here is all I had to do:

$http({ ... }).then(function callback(resp) { // sending request to node server
  var svg = resp.data.file;
  var container = document.createElement('div');
  var parser = new DOMParser();
  var doc = parser.parseFromString(svg, "image/svg+xml");
  container.appendChild(doc.documentElement);
});

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

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

javascriptjqueryhtmlcss

Using functions as properties in React.js

I am facing an issue while trying to pass a function as a prop. Although I have done this successfully in the past, now I am getting an error (this.props.functionName is not a function). I have a child component called Navbar and a parent component named ...

javascriptreactjswebmaterial-ui

Encountered a server error while trying to export from Content

I'm attempting to retrieve data from a specific space in Contentful by utilizing the https://github.com/contentful/contentful-export npm package. However, when I execute my code following the example provided on the GitHub page, I encounter the follow ...

javascriptnode.jsnpmexportcontentful

What is the method to conceal an element after detecting and locating a specific class using jQuery?

Can someone please assist me today with the following task: Step 1: <div id="htmlData"> <div class="col-md-12"> <div class="pull-left"> <h3>Report: <strong>Travel </strong></h3> ...

javascriptphpjqueryhtmlcss

Encountering the "TypeError: document.getElementById(...) is null" error message while utilizing react.js in conjunction with chart.js

I am encountering an issue while using react and chart.js together to create a bar chart. The problem lies in the fact that chart.js requires the use of canvas tags, and we need to locate this tag and insert the bar chart within it using the traditional do ...

javascriptjqueryreactjschart.js

Java is a powerful programming language that allows developers to generate personalized JSON strings by utilizing instantiated

There exists a defined class as shown below: @Data // lombok public class MyData { @Required // my custom annotation String testValue1; Integer testValue2; } An instance of myData is created like this: MyData myData = new MyData(); myData.setT ...

javajson

Tips for defining a variable beyond the confines of the controller in AngularJS

I need to create a variable that can be accessed by two different controllers. One controller is responsible for posting values while the other retrieves values from a database. To achieve this, I have implemented a factory method that returns a timestamp. ...

angularjs

Developing a Vue.js application with a universal variable

In the previous version of Vue.js, 0.12, passing a variable from the root component to its children was as simple as using inherit: true on any component that needed access to the parent's data. However, in Vue.js 1.0, the inherit: true feature was r ...

javascriptvue.js

Set up specific vue.config.js configurations for unique environments in Vue

I am working on a multi-page app where I want certain pages to only show up in my development environment. Here's how my vue.config.js looks: module.exports = { productionSourceMap: false, pages: { index: "src/main.js", admin: { ...

javascriptvue.js

Objects within an array are not sorted based on their properties

I'm currently struggling with sorting an array of objects based on a specific property. Despite my efforts, I can't seem to figure out what's causing the issue as it remains unsorted. Would appreciate some assistance. You can take a look at ...

javascriptreactjssorting

Formik's handleSubmit function seems to be being overlooked and not executed as

I've encountered an issue while trying to validate a form before submission using formik and yup validation. The form is divided into two parts, where the first part needs to be validated before moving on to the second part. I set a state handleShow(t ...

javascriptreactjsnext.js

How can we implement intricate looping mechanisms in hogan js?

Currently, I am in the process of familiarizing myself with expressjs. In my journey to learn this technology, I have encountered a controller that performs queries on a database and returns a JSON object with certain key-value pairs. An example of such an ...

javascriptjsonnode.jsexpresshogan.js

Instead of uploading multiple files at once, allow users to upload individual files by clicking on the table row

In my dynamic table, there are 4 columns. The first 3 columns in each row have an input type='file' where users can choose a file to upload, and the 4th column has a submit button aligned with the rows. While submitting files in the first row wor ...

javascriptphpjqueryajax

The data in my JSON string is not fully received through the HTTP GET request

Whenever I send my array to the PHP file, it receives incomplete data. The content of my 'arr' variable is as follows: [["╪▒┘à┘╛┘╪د","67126881188552864","Empty,Empty,Empty,Empty,8644,-360,-4,8691,-3.48,-313,1015,4.334 M,1392/12/2 ...

javascriptphpjson

removing a specific element from a JsonArray

Is there a way to remove a specific value from this jsonArray? {"category_ids":[0,1,2,3,4,5],"keyword":""} For instance, let's say I want to delete the value 0 from the category_ids jsonArray. If anyone could assist me with this, I would really app ...

androidjson

Removing the Shadow from Material UI's Dialog Box

I am currently struggling with the Material UI dialog component that displays information about a location marker. My issue is with disabling the unattractive box shadow that surrounds the component. Despite setting box-shadow: none and trying different so ...

javascriptcssreactjsmaterial-ui

Testing the ControllerAs syntax when dealing with forms in AngularJS

I am currently facing a situation with Angular that has left me quite puzzled. Controller function Controller () { // form used in template this.form ... } Template containing a form and utilizing the above controller Template <div ng-contr ...

javascriptangularjsformsunit-testingcontrolleras

"Although all error messages are functional in Postman, they are not appearing correctly on the frontend client

I am currently developing a website using React and Node. While testing my register and login functionality in Postman, I encountered an issue where the error message for login (e.g., user doesn't exist, username or password incorrect) is not displayi ...

javascriptnode.jsreactjspostman

Using the function to show content by calling its assigned ID

<script type="text/javascript"> function selectRow(id){ $.get("http://inactive/test.php?id=" + id, function(data,status){ return data; }); } </script> <script type="text/javascript"> $("tr").click(function() { window.l ...

javascriptjqueryhtmlajax

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

I'm in the process of upgrading a table, and while most of it is working fine, there is one function that's giving me trouble. I want this function to return an input with an inline onClick event. The actual return value is displaying correctly, ...

javascriptjqueryhtmldatatables