How to generate an SVG which can be loaded into Draw.io as a result of SVG rather than an image

Question

I can export SVG from draw.io and import the exported SVG back to draw.io. All the drawing are there and no change.

When I created SVG using my application, and import to draw.io as SVG, the result in draw.io is a image.

So my question what requirements or specification are for the SVG data file?

The draw.io created and exported SVG code is

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="411px" height="61px" viewBox="-0.5 -0.5 411 61" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2022-08-22T02:59:40.981Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36&quot; etag=&quot;pmg8Z2ktDU24ZLY4ORp9&quot; version=&quot;20.0.4&quot; type=&quot;google&quot;&gt;&lt;diagram id=&quot;FAU_EnfAKAzyiIyvcy6L&quot; name=&quot;Page-1&quot;&gt;jZJNb8MgDIZ/DcdJCVSlvSb92GE9ZdLOKHgBiYSU0ibZrx9ZnC9VlSZxsB8bY7+YsLRsz07U6mIlGEIj2RJ2IJTGG0pJfyLZDYTvEBROS0yaQaZ/AGGE9K4l3FaJ3lrjdb2Gua0qyP2KCedss077tmb9ai0KeAJZLswz/dLSK6Txdj8H3kEXCp/eUT4ESjEm4yQ3JaRtFogdCUudtX6wyjYF04s36jLcO72ITo05qPx/LnzuDzwp2aXh59P1wRJ7/eBvm6HKQ5g7DozN+m5UoFHaQ1aLvPeb8MuEJcqXJnhxMLEAOA/ty87iad6wKGBL8K4LKXiBMpQId4Rx9JtZ8c24EGoh9haZwE8uptKzDsFAKUZ3lvwvtlhcdvwF&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="0" y="0" width="410" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g></svg>

My SVG code is and it's image when imported into draw.io as SVG.

<svg viewBox="0 0 5000 3000" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2022-08-22T02:59:40.981Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36&quot; etag=&quot;pmg8Z2ktDU24ZLY4ORp9&quot; version=&quot;20.0.4&quot; type=&quot;google&quot;&gt;&lt;diagram id=&quot;FAU_EnfAKAzyiIyvcy6L&quot; name=&quot;Page-1&quot;&gt;jZJNb8MgDIZ/DcdJCVSlvSb92GE9ZdLOKHgBiYSU0ibZrx9ZnC9VlSZxsB8bY7+YsLRsz07U6mIlGEIj2RJ2IJTGG0pJfyLZDYTvEBROS0yaQaZ/AGGE9K4l3FaJ3lrjdb2Gua0qyP2KCedss077tmb9ai0KeAJZLswz/dLSK6Txdj8H3kEXCp/eUT4ESjEm4yQ3JaRtFogdCUudtX6wyjYF04s36jLcO72ITo05qPx/LnzuDzwp2aXh59P1wRJ7/eBvm6HKQ5g7DozN+m5UoFHaQ1aLvPeb8MuEJcqXJnhxMLEAOA/ty87iad6wKGBL8K4LKXiBMpQId4Rx9JtZ8c24EGoh9haZwE8uptKzDsFAKUZ3lvwvtlhcdvwF&lt;/diagram&gt;&lt;/mxfile&gt;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" transform="scale(1,-1)" tabindex="0"><g><rect class="rectStyle" x="0" y="45" width="45" height="2360"><title>x: 0; y: 0; width: 45; height:2360</title></rect><rect class="rectStyle" x="1955" y="45" width="45" height="2360"><title>x: 1955; y: 1955; width: 45; height:2360</title></rect><rect class="rectStyle" x="355" y="45" width="45" height="2360"><title>x: 355; y: 355; width: 45; height:2360</title></rect><rect class="rectStyle" x="710" y="45" width="45" height="2360"><title>x: 710; y: 710; width: 45; height:2360</title></rect><rect class="rectStyle" x="1065" y="45" width="45" height="2360"><title>x: 1065; y: 1065; width: 45; height:2360</title></rect><rect class="rectStyle" x="1420" y="45" width="45" height="2360"><title>x: 1420; y: 1420; width: 45; height:2360</title></rect><rect class="rectStyle" x="1775" y="45" width="45" height="2360"><title>x: 1775; y: 1775; width: 45; height:2360</title></rect><rect class="rectStyle" x="45" y="845" width="310" height="45"><title>x: 45; y: 45; width: 310; height:45</title></rect><rect class="rectStyle" x="45" y="1645" width="310" height="45"><title>x: 45; y: 45; width: 310; height:45</title></rect><rect class="rectStyle" x="400" y="845" width="310" height="45"><title>x: 400; y: 400; width: 310; height:45</title></rect><rect class="rectStyle" x="400" y="1645" width="310" height="45"><title>x: 400; y: 400; width: 310; height:45</title></rect><rect class="rectStyle" x="755" y="845" width="310" height="45"><title>x: 755; y: 755; width: 310; height:45</title></rect><rect class="rectStyle" x="755" y="1645" width="310" height="45"><title>x: 755; y: 755; width: 310; height:45</title></rect><rect class="rectStyle" x="1110" y="845" width="310" height="45"><title>x: 1110; y: 1110; width: 310; height:45</title></rect><rect class="rectStyle" x="1110" y="1645" width="310" height="45"><title>x: 1110; y: 1110; width: 310; height:45</title></rect><rect class="rectStyle" x="1465" y="845" width="310" height="45"><title>x: 1465; y: 1465; width: 310; height:45</title></rect><rect class="rectStyle" x="1465" y="1645" width="310" height="45"><title>x: 1465; y: 1465; width: 310; height:45</title></rect><rect class="rectStyle" x="1820" y="845" width="135" height="45"><title>x: 1820; y: 1820; width: 135; height:45</title></rect><rect class="rectStyle" x="1820" y="1645" width="135" height="45"><title>x: 1820; y: 1820; width: 135; height:45</title></rect><rect class="rectStyle" x="0" y="2405" width="2000" height="45"><title>x: 0; y: 0; width: 2000; height:45</title></rect><rect class="rectStyle" x="0" y="0" width="2000" height="45"><title>x: 0; y: 0; width: 2000; height:45</title></rect></g><g id="line"></g><line x1="3150.09375" y1="2450" x2="3250.09375" y2="2450" stroke="red" stroke-width="5"></line></svg>

score 2 · Answer 1 · answered Aug 22 '22 at 06:13

2

The SVG+XML format has the full drawio data model embedded within it. The SVG isn't used to load the diagram back up.

answered Aug 22 '22 at 06:13

Frodo Baggins

8,290
6
45
55

Is it a standard or draw.io customized format? – cdhit Aug 22 '22 at 06:53
It's a standard. The XML is used to save the structure of the diagram like position, size, links, etc. You can see more details of draw.io supported formats [here](https://drawio-app.com/choose-export-diagram-format/) or SVG+XML documentation [here](https://www.w3.org/TR/SVG2/). – ZapSys Aug 22 '22 at 07:49
@ZapSys Could you help to clarifity which part is XML and which part is SVG node in draw.io exported file? Thank you – cdhit Aug 22 '22 at 20:26
I shared a draw.io diagram that I created [here](https://svgshare.com/i/m2h.svg). If you open it in a text editor you'll see the `` declaration in the first line and a ` – ZapSys Aug 22 '22 at 22:22
@ZapSys The link is not accessible. https://svgshare.com/i/m2h.svg This application is temporarily over its serving quota. Please try again later. – cdhit Aug 23 '22 at 03:44
Sorry to hear that, but some problem occurred with the svgshare.com server. I tested right now and the file it's accessible. – ZapSys Aug 23 '22 at 07:52

How to generate an SVG which can be loaded into Draw.io as a result of SVG rather than an image

1 Answers1