Convert SVG to JSON & JSON to SVG javascript

JavaScript
1

I am working on a cordova ionic project. I am working on an editor. How I can convert the below svg content into JSON array & JSON array to svg content. Please help.

			    <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
			    <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
			    <g>
			     <title>background</title>
			     <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
			     <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
			      <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
			     </g>
			    </g>
			    <g>
			     <title>Layer 1</title>
			     <rect total-price="129720" data-price="10" id="svg_2" height="69" width="188" y="47" x="63.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
			     <line total-price="121164.47292" height="75.36667" width="151.66666" data-price="10.6" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_3" y2="124" x2="470.5" y1="50" x1="319.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
			     <ellipse total-price="190708.875" height="91.5" width="198.5" data-price="10.5" ry="45" rx="98.5" id="svg_4" cy="323" cx="159" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
			    </g>
			   </svg>
2

Hi,

Are you looking for a tool or a representation ?

3

I’m looking for code… What can be the way so that I can generate json from it according to the way I need to send in web service request & visa versa?

4

I would start by parsing the HTML tags and attributes into a nested object.

as a rough example maybe something like

{'svg': {
  'attrs': {
    'width': 580,
    'height': 400,
    'xmlns': 'http://www.w3.org/2000/svg'
  },
  'g': {
    'title': 'background', 
    'rect': {
      'attrs': {
        'id': 'canvas_background',
        'height': 402,
        'width': 582', 
        'y': -1,
        'x': -1 
      }
    },
    'g': {
      'attrs': {
 ⋮

It won’t be easy, but it is doable.

5

This would be lengthy process if there are so many things on the canvas, can’t do this… any other solution?

6

Why don’t you send the fully svg-text to your web service ?

7

its requirement… cant send svg

9

This is an online converter. I need code example

10

check the js code.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.