export SVG/PNG/JPEG but showing deleted shapes

[freeifly]

I draw some custom shapes on draw.io desktop. But when I exported them to SVG or PNG or JPEG, and open the SVG file on Google Chrome, it shows some "deleted shapes". Very bizzare. As you can see, left is Chrome, right is draw.io desktop.

[alderg]

Can this be reproduced with a specific diagram file?

[freeifly]

yes alderg, I copied one green shape(the upper one with an angle) to a new file and it reproduced the problem. and after I "Edit Shape", reset the strokewidth, that shape resumes correct on SVG. It seems that the "cache" need to be cleaned on draw.io.

[freeifly]

but I don't know if I can find which diagram causes the "deleted shape" appears..

[davidjgraph]

Without the diagram to recreate this we're not able to assist, unfortunately.

[freeifly]

dear david, I have found that there are two "custom shapes," and when these two custom shapes appear simultaneously, an "ghost shape" appears when exporting to SVG. When only either one of these shapes is present, there is no problem. I suspect other "ghost shapes" are similar. However, I still don't understand the nature of this problem. Is there any way to find the reason? or can I send you the simplified draw.io file?

[alderg]

Please attach the draw.io file (zipped or as a link via Export as URL).

[freeifly]

https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1&title=untitled.drawio#RrVbZsqo4FP0aq7ofrgWJqDwyCIKKAirKyy2GMCgzEdSvv8HDme4Zqm93V0GxWWvvnZBkrWIAhfQqV04RrXIfJQNA%2BdcBFAcA0IAC5NEhtycE0tT4CQmr2O%2BzXgEzvqMepHr0EvuofpeI8zzBcfEe9PIsQx5%2BhzlVlbfv04I8eT9q4YToA2B6TvIRtWIfRz3KAuqVmKM4jPDLJ%2FdM6jxn90AdOX7evoHgbACFKs%2FxU5ReBZR0y%2Fe8ME910hfsy8wqlOF%2FUvCTNXIx%2B5leuflyZ4iGrP6AP0C%2FQY2TXPpP7meLb89rQCZedGGNUebFyV8T2%2Fbd0SqUFJuMJrpIPgHaX078ywDw11rD1s1UoujsBw3UR%2BO0NNh6BU8HR16uUVcRCWtPUyqnEuiRaiznabETa34vlaw2udW4nFybk1K0lS44O5sbH4pk5iloD1SoSIBJ3Ft4XeilTdEqO1dyMmgd7qJAMLGfArMRtpBZocnGDxHKRFATng1mJeUEQbFXOIFduozAHc88Tio%2BCGXLlhIRzIVx6aAJmV7s2unJUKeXu5v65F2%2FHAFoRSyTRop3vPsKs93NPNOy%2FdmiuCWQays%2Bve2ODbc8U6c5KQm37WoDQjvK2wMfBxGB5DTzwKG0Fuw48I2LblPXsEJcbS40HY58TnHpTTU9SiCAGknfePfl%2BoLMBUjXZBN5926e8JZlC21Oq9o8C%2FbavfShZ2a%2BwegkId2dTkZmnM%2BHS3jGja84J94ufaZyJZadZtU21D3LsprTOZ%2BrXnrvli2T7vy16w7yZcs9jiYU%2Fx5Avo1ijMzC8bptb4m0CRbhNCFvNAmDOEmEPMmrx%2FmA43EQsA7BizzO8ENwDE8uchwFajiddo%2BXmyEVQk%2FSnzNDAL%2BtHMLJN8UM8474jBxORl%2Fw029qH9yQ%2BZadfpgVuSDvxxUxpzjPyNpkedUZA%2F9Rvr2iG1RhdH0D9XKWUZ4iXN1ISs%2ByI2bY22nvrz%2FoyXjyhLRv7AqyT1j0xqnGvS05vUOGL%2B1fPYQEvY38iaXAf2Epe8MVayWcia3WUJS0OfIWGTzQ16Ymm8rJ5E4sg47C3gHXUguKHDjb8r6eimt%2Bpi8sVpYVpq3QRVCW%2FFyms7kUae2Mk7XN%2FshvTPEojbiWS63dnVtEeD1fc1kZGr6Am8Y%2F2odgfV9otGY48aJT%2BUww6SPZLCBdnKmqxiadsp0oy%2FwWjo2xCvRZrceYH9VhuEiL7RGFMutJlnyLOZJWOyVZRSm3ZHdjLg0eUouSZrlVizBuVrBS21khcRsOr6imsZlWJUPmUIKjyru6PFBNQCMZLVtIjeL1ZU2zdO6Sfmp41NcFCazORE83f9XZL7ccrdqlQB%2F0lZymmnsnzRZKe97tQrP%2Bb3IOkriYP%2BeQeE9i6rfT3KIaf6H8L2X%2FpYgeHMt%2BSj6ENaThN%2BTnXekvuj6E%2BT%2BIcEyxv0uQgh8kOB110%2Ftdg%2FT0jzVIXl9%2FGR7cm18vOPsF

[freeifly]

Dear alderg and david, following up the problem. I tried to open the "damaged" exported SVG on Sketch, and found there are so many "Groups" in my SVG, which combines some "ghost path" and real path together. I don't know exactly why it happens, because on my Draw.io main page, I did not group those shapes. I can only remember I clicked "Merge" button everytime draw.io told me to save the changes, is it the probable reason cause the problem?

[alderg]

The shapes have invalid stencil XML. The extra element is caused by this shape:

The XML for this shape is:

<shape name="stencilName" h="13.4" w="35.5" aspect="variable" strokewidth="inherit">
  <background>
    <fillstroke />
    <strokecolor color="#B3B3B3" />
    <path>
      <move x="0" y="0" />
      <line x="4.5" y="13.4" />
      <line x="35.5" y="13.4" />
      <line x="35.5" y="0" />
      <close />
    </path>
  </background>
  <foreground>
    <fillstroke />
    <strokewidth width="0.5" />
    <path>
      <move x="0" y="0" />
      <line x="4.5" y="13.4" />
      <line x="35.5" y="13.4" />
      <line x="35.5" y="0" />
    </path>
    <stroke />
  </foreground>
</shape>

The correct XML is:

<shape name="stencilName" h="13.4" w="35.5" aspect="variable" strokewidth="inherit">
  <background>
    <strokecolor color="#B3B3B3" />
    <path>
      <move x="0" y="0" />
      <line x="4.5" y="13.4" />
      <line x="35.5" y="13.4" />
      <line x="35.5" y="0" />
      <close />
    </path>
  </background>
  <foreground>
    <fillstroke />
  </foreground>
</shape>

Ie. no initial <fillstroke /> in the <background> section and most of the <foreground> section does not seem to be used.