Convert SVG to JSON & JSON to SVG javascript

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>

Hi,

Are you looking for a tool or a representation ?

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?

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.

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

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

its requirement… cant send svg

This is an online converter. I need code example

check the js code.

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