3

I want to get the inline SVG string in the form of text

Expected output:

const fetchedText = 
"<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>"

I have tried with DOMParser but somehow this is not working here. Any suggestion for this error please. What i am doing wrong here ?

InlineSvg.js

import React from 'react';
export default () =>
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

App.js

export function getSvg() {
  const text = JSON.stringify(InlineSvg());
  const oParser = new DOMParser();
  const oDOM = oParser.parseFromString(text, "image/svg+xml");
  const root = oDOM.documentElement;
  console.log(root.firstChild.innerHTML)
}

Console.log

"{"type":"svg","key":null,"ref":null,"props":{"width":"100","height":"100","xmlns":"http://www.w3.org/2000/svg","children":{"type":"circle","key":null,"ref":null,"props":{"cx":"50","cy":"50","r":"40","stroke":"green","stroke-width":"4","fill":"yellow"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}"

Without Json.stringyfy() enter image description here

Output

"<parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Document is empty
</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>"
Tammy
  • 1,122
  • 5
  • 19
  • 50
  • Try using DOMParser, as explained here: https://stackoverflow.com/a/3104237/8886593 – Wojciech K Mar 24 '21 at 15:58
  • @WojciechK thank you for your time. Do you mind to give me a example workable . Is it possible. – Tammy Mar 24 '21 at 16:31
  • @WojciechK I have tried with the example you provided but this not working. is something wrong i did here ? – Tammy Mar 24 '21 at 17:03
  • your fragment has no namespace (xmlns attribute). You'd either need to provide that or parse it as html. – Robert Longson Mar 25 '21 at 07:06
  • @RobertLongson thank you for your time. My bad . This is just an example code. Updated though. – Tammy Mar 25 '21 at 07:08
  • what does the debugger say that the value of text is? – Robert Longson Mar 25 '21 at 07:13
  • It is `"{"type":"svg","key":null,"ref":null,"props":{"width":"100","height":"100","xmlns":"http://www.w3.org/2000/svg","children":{"type":"circle","key":null,"ref":null,"props":{"cx":"50","cy":"50","r":"40","stroke":"green","stroke-width":"4","fill":"yellow"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}"` – Tammy Mar 25 '21 at 07:15
  • So, not the string you think you're parsing but json instead. What happens if you remove the JSON.stringify call and just pass the result of InlineSvg() directly to the parser. – Robert Longson Mar 25 '21 at 07:21
  • Updated my code. – Tammy Mar 25 '21 at 07:27
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230353/discussion-between-tammy-and-robert-longson). – Tammy Mar 25 '21 at 07:34

0 Answers0