How to remove Line Breaks from SVG String

1

Hello,

I have a svg stored as a string on serverside and looking to replace all these characters to get a usable format.

Any thoughts?

Below is current string

<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\" ?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"672\" height=\"685\" viewBox=\"0 0 672 685\" xml:space=\"preserve\">\n<desc>Created with Fabric.js 4.6.0</desc>\n<defs>\n</defs>\n<g transform=\"matrix(1 0 0 1 336.5 342.5)\" id=\"gridLine\"  >\n<line style=\"stroke: rgb(204,204,204); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 0;\"  x1=\"0\" y1=\"-342.5\" x2=\"0\" y2=\"342.5\" />\n</g>\n<g transform=\"matrix(0.44 0 0 0.44 224.19 230.69)\" id=\"_kodiak_id_1\"  >\n\t<image style=\"stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;\"  xlink:href=\"https://imagedelivery.net/ZFpmFfUMgrq3swZTSeGQxA/5b0df7c7-ea72-4e49-dd81-2595c7c8ff00/designer\" x=\"-400\" y=\"-320\" width=\"800\" height=\"640\"></image>\n</g>\n<g transform=\"matrix(1 0 0 1 310.62 455.76)\" style=\"\" id=\"_kodiak_id_2\"  >\n\t\t<text xml:space=\"preserve\" font-family=\"Times New Roman\" font-size=\"40\" font-style=\"normal\" font-weight=\"normal\" style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;\" ><tspan x=\"-72.22\" y=\"12.57\" >HAHAH</tspan></text>\n</g>\n</svg>

Below is what is needed to work correctly…

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="672" height="685" viewBox="0 0 672 685" xml:space="preserve">
<desc>Created with Fabric.js 4.6.0</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 336.5 342.5)" id="gridLine"  >
<line style="stroke: rgb(204,204,204); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 0;"  x1="0" y1="-342.5" x2="0" y2="342.5" />
</g>
<g transform="matrix(0.44 0 0 0.44 224.19 230.69)" id="_kodiak_id_1"  >
	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="https://imagedelivery.net/ZFpmFfUMgrq3swZTSeGQxA/5b0df7c7-ea72-4e49-dd81-2595c7c8ff00/designer" x="-400" y="-320" width="800" height="640"></image>
</g>
<g transform="matrix(1 0 0 1 310.62 455.76)" style="" id="_kodiak_id_2"  >
		<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-72.22" y="12.57" >HAHAH</tspan></text>
</g>
</svg>
2

Are you sure you got the example right? It doesn’t make sense in my head

From the original string, would you be able to write the string you’d like?

3

To start, you can use .replace('\\"', '"') on the incoming string

Then, you want to find the index of the string where <svg, and the index of the string where </svg>

In Javascript this is possible using the .indexOf() method, such as:

let input = "<svg>hello</svg>"
let start = input.indexOf("<svg") // intentionally not "<svg>"
let end = input.indexOf("</svg>")

And then you keep the relevant portions. I believe you have to use some “substring” method (there’s a formatter on Wappler). Javascript syntax:

let finalString = index.substr(start, end)

Syntax might be different for Wappler

Remember you can implement all of this in a custom formatter (doesn’t need to be a full-fledged module)