Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG exported images contain 'Viewer does not support full SVG 1.1' #774

Closed
2 tasks done
samuelhward opened this issue Feb 21, 2020 · 36 comments
Closed
2 tasks done
Labels
completed Label to filter out completed tasks

Comments

@samuelhward
Copy link

samuelhward commented Feb 21, 2020

Preflight Checklist

  • I agree to follow the Code of Conduct that this project adheres to.
  • I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Describe the bug
'Viewer does not support full SVG 1.1' embedded in raw SVG source. For me this is rendered in projects such as overleaf:

image

or causes other issues which are known. The rest of the image has text which is rendered fine for me (well, there are the unwanted ellipses) - is there any way to automate removal of this error message?

draw.io version (In the Help->About menu of the draw.io editor):

12.7.2 on Windows, Chrome Version 78.0.3904.97 (Official Build) (32-bit)

Additional context

Raw SVG:

<?xml version="1.0" encoding="UTF-8"?>
<!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="653px" height="280px" viewBox="-0.5 -0.5 653 280" content="&lt;mxfile host=&quot;www.draw.io&quot; modified=&quot;2020-02-21T13:00:57.529Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36&quot; etag=&quot;U0GCkWB8_BOROAy63qRQ&quot; version=&quot;12.7.2&quot; type=&quot;google&quot;&gt;&lt;diagram id=&quot;gHLz0bTmB7ngMACIc7-4&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="331" y="98" width="60" height="60" fill="#c2185b" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 346 98 L 346 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 361 98 L 361 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 376 98 L 376 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 331 113 L 391 113" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 331 128 L 391 128" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 331 143 L 391 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="341" y="108" width="60" height="60" fill="#03a9f4" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 356 108 L 356 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 371 108 L 371 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 386 108 L 386 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 341 123 L 401 123" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 341 138 L 401 138" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 341 153 L 401 153" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="351" y="118" width="60" height="60" fill="#fbc02d" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 366 118 L 366 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 381 118 L 381 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 396 118 L 396 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 351 133 L 411 133" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 351 148 L 411 148" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 351 163 L 411 163" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="361" y="128" width="60" height="60" fill="#8bc34a" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 376 128 L 376 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 391 128 L 391 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 406 128 L 406 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 361 143 L 421 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 361 158 L 421 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 361 173 L 421 173" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="391" y="228" width="220" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 253px; margin-left: 392px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font color="#212121" face="Tahoma">data processed in blocks of threads</font></div></div></div></foreignObject><text x="501" y="257" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">data processed in blocks of threads</text></switch></g><rect x="173" y="180.5" width="128" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 126px; height: 1px; padding-top: 206px; margin-left: 174px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font face="Tahoma" color="#212121" style="font-size: 12px">continual non-blocking sum-reduction to CPU</font></div></div></div></foreignObject><text x="237" y="209" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">continual non-blockin...</text></switch></g><rect x="103" y="1" width="268" height="24" rx="3.6" ry="3.6" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 266px; height: 1px; padding-top: 13px; margin-left: 104px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font face="Tahoma" color="#212121" style="font-size: 10px">start / stop / data transfer to GPUs</font></div></div></div></foreignObject><text x="237" y="16" fill="#333333" font-family="Helvetica" font-size="10px" text-anchor="middle">start / stop / data transfer to GPUs</text></switch></g><rect x="441" y="217.5" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><rect x="463" y="218" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><rect x="431" y="207.5" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><rect x="451" y="208" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><rect x="401" y="217.5" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><rect x="421" y="217.5" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><rect x="441" y="217.5" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><path d="M 451 168 L 481.03 168 L 481.03 218 L 411.03 218 L 411 198" fill="none" stroke="#616161" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 471 193 L 471.03 178 L 471.03 207.03 L 421.03 207.03 L 421 198" fill="none" stroke="#616161" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 461 168 L 491.03 168 L 491.03 228 L 401.03 228 L 401 198" fill="none" stroke="#616161" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><rect x="550.5" y="218" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="581" y="98" width="60" height="60" fill="#bdbdbd" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 596 98 L 596 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 611 98 L 611 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 626 98 L 626 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 581 113 L 641 113" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 581 128 L 641 128" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 581 143 L 641 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1 163 L 21 162.9" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1 173 L 21 172.9" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1 143.1 L 21 143" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1 153.1 L 21 153" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1 123 L 21 122.9" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1 133 L 21 132.9" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1 113.1 L 21 113" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="428" y="88" width="80" height="80" rx="12" ry="12" fill="#c2185b" stroke="#616161" stroke-width="5" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 128px; margin-left: 429px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font face="Tahoma" color="#212121" style="font-size: 22px">GPU</font></div></div></div></foreignObject><text x="468" y="132" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">GPU</text></switch></g><rect x="438" y="98" width="80" height="80" rx="12" ry="12" fill="#03a9f4" stroke="#616161" stroke-width="5" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 138px; margin-left: 439px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font face="Tahoma" color="#212121" style="font-size: 22px">GPU</font></div></div></div></foreignObject><text x="478" y="142" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">GPU</text></switch></g><rect x="448" y="108" width="80" height="80" rx="12" ry="12" fill="#fbc02d" stroke="#616161" stroke-width="5" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 148px; margin-left: 449px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font face="Tahoma" color="#212121" style="font-size: 22px">GPU</font></div></div></div></foreignObject><text x="488" y="152" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">GPU</text></switch></g><rect x="571" y="108" width="60" height="60" fill="#bdbdbd" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 586 108 L 586 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 601 108 L 601 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 616 108 L 616 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 571 123 L 631 123" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 571 138 L 631 138" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 571 153 L 631 153" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="561" y="118" width="60" height="60" fill="#bdbdbd" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 576 118 L 576 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 591 118 L 591 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 606 118 L 606 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 561 133 L 621 133" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 561 148 L 621 148" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 561 163 L 621 163" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="551" y="128" width="60" height="60" fill="#bdbdbd" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 566 128 L 566 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 581 128 L 581 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 596 128 L 596 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 551 143 L 611 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 551 158 L 611 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 551 173 L 611 173" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="521" y="208" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="541" y="208" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="560.5" y="208" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><path d="M 551 198 L 551.03 208 L 531.03 208 L 531.03 178 L 500.5 178" fill="none" stroke="#616161" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><rect x="571" y="178" width="10" height="10" fill="#ffffff" stroke="#ffffff" stroke-width="3" pointer-events="all"/><rect x="549.5" y="176.5" width="13" height="13" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="549.5" y="168" width="13" height="13" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="558" y="176.5" width="13" height="13" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="551" y="169.5" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="571" y="178" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="559.5" y="181" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="511" y="218" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="531" y="218" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><rect x="551" y="218" width="10" height="10" fill="#bdbdbd" stroke="none" pointer-events="all"/><path d="M 561 198 L 561.03 218 L 521.03 218 L 521.03 178 L 491 178" fill="none" stroke="#616161" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 571 198 L 571.03 228 L 511.03 228 L 511.03 188 L 481.25 188" fill="none" stroke="#616161" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><rect x="458" y="118" width="80" height="80" rx="12" ry="12" fill="#8bc34a" stroke="#616161" stroke-width="5" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 158px; margin-left: 459px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font face="Tahoma" color="#212121" style="font-size: 22px">GPU</font></div></div></div></foreignObject><text x="498" y="162" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">GPU</text></switch></g><rect x="411" y="169.5" width="10" height="10" fill="#ffffff" stroke="#ffffff" stroke-width="3" pointer-events="all"/><rect x="401" y="176.5" width="13" height="13" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="409.5" y="176.5" width="13" height="13" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="411" y="169.5" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><rect x="404" y="181" width="10" height="10" fill="#8bc34a" stroke="none" pointer-events="all"/><path d="M 31 203 L 31 183" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 41 203 L 41 183" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 51 203 L 51 183" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 61 203 L 61 183" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 70.91 203 L 70.91 183" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 80.91 203 L 80.91 183" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 90.91 203 L 90.91 183" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="21" y="103" width="80" height="80" rx="12" ry="12" fill="#f5f5f5" stroke="#bdbdbd" stroke-width="3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 143px; margin-left: 22px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font face="Tahoma" color="#212121" style="font-size: 22px">CPU</font></div></div></div></foreignObject><text x="61" y="147" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">CPU</text></switch></g><path d="M 461 238 L 444.35 238" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 439.35 238 L 444.35 235.5 L 444.35 240.5 Z" fill="#616161" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><path d="M 556 238 L 539.35 238" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 534.35 238 L 539.35 235.5 L 539.35 240.5 Z" fill="#616161" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><path d="M 141 24 L 324.65 24" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 329.65 24 L 324.65 26.5 L 324.65 21.5 Z" fill="#616161" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="511" y="58" width="140" height="30" rx="4.5" ry="4.5" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 73px; margin-left: 512px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font color="#212121" face="Tahoma">previous particle positions as grids of blocks </font></div></div></div></foreignObject><text x="581" y="77" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">previous particle posit...</text></switch></g><rect x="291" y="64" width="140" height="30" rx="4.5" ry="4.5" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 79px; margin-left: 292px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font color="#212121" face="Tahoma">next particle positions</font></div></div></div></foreignObject><text x="361" y="83" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">next particle positions</text></switch></g><rect x="131" y="98" width="155.72" height="60" fill="none" stroke="#616161" stroke-width="3" pointer-events="all"/><rect x="131" y="98" width="163.14" height="60" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="146" y="98" width="60" height="60" fill="#c2185b" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 161 98 L 161 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 176 98 L 176 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 191 98 L 191 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 146 113 L 206 113" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 146 128 L 206 128" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 146 143 L 206 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="211" y="98" width="60" height="60" fill="#c2185b" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 226 98 L 226 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241 98 L 241 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 256 98 L 256 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 211 113 L 271 113" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 211 128 L 271 128" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 211 143 L 271 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 145 127.86 L 119.35 127.97" fill="none" stroke="#c2185b" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 114.35 127.99 L 119.34 125.47 L 119.36 130.47 Z" fill="#c2185b" stroke="#c2185b" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="140.54" y="108" width="155.37" height="60" fill="none" stroke="#616161" stroke-width="3" pointer-events="all"/><rect x="140.54" y="108" width="162.76" height="60" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="156" y="108" width="60" height="60" fill="#03a9f4" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 171 108 L 171 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 186 108 L 186 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201 108 L 201 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 156 123 L 216 123" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 156 138 L 216 138" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 156 153 L 216 153" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="221" y="108" width="60" height="60" fill="#03a9f4" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 236 108 L 236 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 251 108 L 251 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 266 108 L 266 168" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 221 123 L 281 123" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 221 138 L 281 138" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 221 153 L 281 153" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 155 138 L 119.35 138" fill="none" stroke="#03a9f4" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 114.35 138 L 119.35 135.5 L 119.35 140.5 Z" fill="#03a9f4" stroke="#03a9f4" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="151" y="118" width="155.72" height="60" fill="none" stroke="#616161" stroke-width="3" pointer-events="all"/><rect x="151" y="118" width="163.14" height="60" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="166" y="118" width="60" height="60" fill="#fbc02d" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 181 118 L 181 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 196 118 L 196 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 211 118 L 211 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 166 133 L 226 133" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 166 148 L 226 148" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 166 163 L 226 163" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><rect x="231" y="118" width="60" height="60" fill="#fbc02d" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 246 118 L 246 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 261 118 L 261 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 276 118 L 276 178" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 231 133 L 291 133" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 231 148 L 291 148" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 231 163 L 291 163" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 165 148 L 119.35 148" fill="none" stroke="#fbc02d" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 114.35 148 L 119.35 145.5 L 119.35 150.5 Z" fill="#fbc02d" stroke="#fbc02d" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="161" y="128" width="156.56" height="60" fill="none" stroke="#616161" stroke-width="3" pointer-events="all"/><rect x="161" y="128" width="165" height="60" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="241" y="128" width="60" height="60" fill="#8bc34a" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 256 128 L 256 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 271 128 L 271 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 286 128 L 286 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241 143 L 301 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241 158 L 301 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241 173 L 301 173" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 176 158 L 119.35 158" fill="none" stroke="#8bc34a" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 114.35 158 L 119.35 155.5 L 119.35 160.5 Z" fill="#8bc34a" stroke="#8bc34a" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="176" y="128" width="60" height="60" fill="#8bc34a" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 191 128 L 191 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 206 128 L 206 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 221 128 L 221 188" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 176 143 L 236 143" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 176 158 L 236 158" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 176 173 L 236 173" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 498 115 L 498 33.03 L 61.03 33.03 L 61 100" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="498" cy="118" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 498 115 L 498 33.03 L 61.03 33.03 L 61 100" fill="none" stroke="#bdbdbd" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="498" cy="118" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/><path d="M 488 105 L 488 43.03 L 61.03 43.03 L 61 100" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="488" cy="108" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 488 105 L 488 43.03 L 61.03 43.03 L 61 100" fill="none" stroke="#bdbdbd" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="488" cy="108" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/><path d="M 478 95 L 478 53.03 L 61.03 53.03 L 61 100" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="478" cy="98" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 478 95 L 478 53.03 L 61.03 53.03 L 61 100" fill="none" stroke="#bdbdbd" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="478" cy="98" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/><path d="M 468 85 L 468 63.03 L 61.03 63.03 L 61 100" fill="none" stroke="#616161" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="468" cy="88" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#616161" stroke-width="3" pointer-events="all"/><path d="M 468 85 L 468 63.03 L 61.03 63.03 L 61 100" fill="none" stroke="#bdbdbd" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="468" cy="88" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/><ellipse cx="61" cy="103" rx="3" ry="3" fill="#616161" stroke="#bdbdbd" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
@davidjgraph
Copy link
Collaborator

The problem is, as suggested, that the viewer you are using to view the SVG does not support the full SVG 1.1 specification. This means it is unable to process as text formatting, including line breaks.

What is your preferred solution, to remove the warning and show all the text without line breaks?

@liampower
Copy link

liampower commented Feb 23, 2020

Hi, I was directed here from the draw.io feedback form.

What is your preferred solution, to remove the warning and show all the text without line breaks?

That would be my preferred solution, or even better to have this a user-editable option.

I'm also seeing my text getting replaced with ellipses if the container isn't large enough on svg export . This behavior seems to be new and I would like a way to disable it if possible, but I can make a separate issue for this if you'd like @davidjgraph

@davidjgraph
Copy link
Collaborator

You can disable it, but your viewer still doesn't support the parts of the SVG 1.1 specification that we use to render text. Are you saying it's better to render it wrongly and not warn the user?

@liampower
Copy link

@davidjgraph No. If the warning is left on by default, but with instructions on how to remove it from the SVG export then the user can decide for themselves to accept unformatted text and disable the warning, or to move to a different viewer

@davidjgraph
Copy link
Collaborator

OK, thanks, we'll look into that.

You can remove it by deleting the last element in the SVG and its contents.

@liampower
Copy link

👍 Thanks a lot, I have been doing that as a workaround yes.

@samuelhward
Copy link
Author

@davidjgraph No. If the warning is left on by default, but with instructions on how to remove it from the SVG export then the user can decide for themselves to accept unformatted text and disable the warning, or to move to a different viewer

I don't think this is the best solution yet but is a nice compromise - especially if an image might have a very very small unnoticeable error due to an invisible text box or something along those lines

@davidjgraph
Copy link
Collaborator

What is the best solution?

@samuelhward
Copy link
Author

What is the best solution?

I suppose as long as the error text is crop-out-able (and maybe includes information on how to remove the message?) then there is little to be done!

@jgraph jgraph deleted a comment from karthikgrama Mar 1, 2020
@jgraph jgraph deleted a comment from karthikgrama Mar 1, 2020
@SelimAydi
Copy link

The logical solution here would be to leave a warning on the dialog, when a user chooses to export the file as an SVG and not inside the SVG itself.

@liampower
Copy link

The logical solution here would be to leave a warning on the dialog, when a user chooses to export the file as an SVG and not inside the SVG itself.

Yes I agree, this is a good solution.

@dudeshino
Copy link

dudeshino commented Mar 18, 2020

I am not sure if this is the same issue or not. SVGs used to display a no support message in the place of formatted text and wrapped text. I prefer that to this approach where I have to manually identify the places where text is formatted and what not. The issue is not a big deal, but the issue lies in the lack of explanation. If the export window would at least trigger a message that this message means that former would save the effort and time of looking up the issue.

Edit: For context, I use the SVG format to document with MS Word. As such, I don't have the choice to move to a different viewer.

Edit 2: Found out it's the same issue. I just wish the message was clarified on export.

@MatthewScholefield
Copy link

For anyone who wants to remove it easily, you can use this sed command:

sed -i 's/<text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1<\/text>//gm' *.svg

@ItayZiv
Copy link

ItayZiv commented Apr 26, 2020

Is there any update on this?
Also would a non full SVG 1.1 viewer not display text at all or just have it be unformatted?
I'm confused since IE doesn't display text yet a conversion we do from svgs, to pdfs does display the text and the warning.

It would be nice to keep the warning in mind but have a way to remove it in general, since its quite a big project and it would be janky to have people manually delete that every time.

@joelburton
Copy link

We use draw.io as part of a document-production toolchain and it would be difficult for us to cleanly automate the removal here. Is it possible to have a CSS class on this SVG warning message, so we can hide it more easily via CSS? (or a command-line switch to not emit it).

@davidjgraph
Copy link
Collaborator

The logical solution here would be to leave a warning on the dialog, when a user chooses to export the file as an SVG and not inside the SVG itself.

What warning would be shown? At the point of export you don't know what kind of viewer will be used to view the SVG. Telling the user there might be a problem will confuse people, plus they might not know what kind of a viewer will be used.

The CSS class can be done. I'm a bit concerned about complicating the dialog considering all modern browsers will render this correctly.

@davidjgraph
Copy link
Collaborator

<switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch>

Removing this element will have the effect you want, also.

@joaoe
Copy link

joaoe commented Nov 23, 2020

The problem is, as suggested, that the viewer you are using to view the SVG does not support the full SVG 1.1 specification.

I'm more concerned in the features that draw.io is using that are not supported in other viewers.

draw.io uses foreignObjects with html inside to render text. That pretty much fails miserably in even non-web browser SVG viewer or editor, e.g., Inkscape, og embedding in MS Word.

Inkscape and other tools have dealt with this normally just using tspan to break up lines and apply styles. That is how text is supposed to be formatted in pure SVG.

Right now, I need to export SVG from draw.io, and run through a script to convert the html into tspans while removing the foreignObjects, and then open with Inkscape to fix positioning. Finally I can import into MS Word.

@alderg
Copy link
Contributor

alderg commented Nov 24, 2020

Did you try this? It requires manual line breaks, but uses tspan in the output. (Formatting is still available for the label as a whole.)

@alderg
Copy link
Contributor

alderg commented Nov 24, 2020

We'll add an URL parameter (svg-warning=0) to suppress the warning.

@alderg alderg closed this as completed Nov 25, 2020
Krutie added a commit to Krutie/nuxtjs.org that referenced this issue Jan 12, 2021
- Raw and SVG versions of Module diagram added and replaced at:
    - en
    - es
    - fr
    - ja
    - pt
- `.imgbotconfig` updated to prevent Github imgbot automatically reformatting SVG diagrams
- Plugins SVG diagram updated
- Fixed ‘Viewer does not support full SVG 1.1` warning message (jgraph/drawio#774)
debs-obrien pushed a commit to nuxt/website-v2 that referenced this issue Jan 13, 2021
* **Modules** and **Plugins** diagrams updates and fixes

- Raw and SVG versions of Module diagram added and replaced at:
    - en
    - es
    - fr
    - ja
    - pt
- `.imgbotconfig` updated to prevent Github imgbot automatically reformatting SVG diagrams
- Plugins SVG diagram updated
- Fixed ‘Viewer does not support full SVG 1.1` warning message (jgraph/drawio#774)

* few tiny typos fixed in modules SVG
@aunovis-fitting
Copy link

Hi, this solution only is a partly solution for the online version, not for the draw.io desktop export in general.

Diadvantages:

  1. the diagram supresses the warning but the user can configure features that will not display correctly in e.g. winword.
  2. Not avaiable in draw.io desktop as start or export parameter for SVG
  3. Hides the problems, does not prevent config errors.

I think because of winword/Office 365 has a very large user base (also integrating it in illustrator...), it should be a general default setting in the editor (SVG compatibility mode). So everyone is able to work with draw.io and embed e.g. architecture diagrams in e.g. winword without this warning or loss of information. For UML the diagrams can live without this extended features.

So why not disable word wrap and the formatted text when this new "switch" and other incompatible features -> limit the editor for compatibility reasons.

I tried this workaraound: https://www.diagrams.net/doc/faq/svg-export-text-problems and it can not be achieved through your proposal with multi selection: I have to select each field type and disable word wrap. Some kind of very cumbersome.
2021-01-16 (2)

@listout

This comment has been minimized.

@davidjgraph

This comment has been minimized.

@listout

This comment has been minimized.

@alderg
Copy link
Contributor

alderg commented Jan 27, 2021

We cannot make it default at this point. We will however change the text tab to include the word wrap option even if cells are selected that do not support word wrapping. This makes it easier to select all and uncheck word wrap and formatted text for all selected cells.

@PranavBhattarai

This comment has been minimized.

annda added a commit to cosmocode/dokuwiki-plugin-diagrams that referenced this issue Feb 25, 2021
diagrams.net usually saves in the exported file a warning about limited viewer capabilities (extended fomratting as per SVG 1.1) which gets printed in PDF output.

see jgraph/drawio#774
pi0 pushed a commit to nuxt/website-v2 that referenced this issue Jul 8, 2021
* **Modules** and **Plugins** diagrams updates and fixes

- Raw and SVG versions of Module diagram added and replaced at:
    - en
    - es
    - fr
    - ja
    - pt
- `.imgbotconfig` updated to prevent Github imgbot automatically reformatting SVG diagrams
- Plugins SVG diagram updated
- Fixed ‘Viewer does not support full SVG 1.1` warning message (jgraph/drawio#774)

* few tiny typos fixed in modules SVG
@theonlybrand
Copy link

<switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch>

Removing this element will have the effect you want, also.

can confirm this. Just remove the part between the and the tags

djennadhamza pushed a commit to djennadhamza/nuxtjs.org that referenced this issue Sep 23, 2021
* **Modules** and **Plugins** diagrams updates and fixes

- Raw and SVG versions of Module diagram added and replaced at:
    - en
    - es
    - fr
    - ja
    - pt
- `.imgbotconfig` updated to prevent Github imgbot automatically reformatting SVG diagrams
- Plugins SVG diagram updated
- Fixed ‘Viewer does not support full SVG 1.1` warning message (jgraph/drawio#774)

* few tiny typos fixed in modules SVG
@medmedin2014
Copy link

medmedin2014 commented Dec 31, 2021

This solution is the worst, DrawIO is basic tool to draw diagrams so the final result need always some kind of extra editing in SVG editors like Inkscape or Illustrator, and here I see that the exported SVG doesn't show formatted text because you wanted to use some HTML tags to make it easy for browsers but who shows SVGs on their websites ? None, what is the common workflow is to export it to SVG then embed it in PDF or print it, so the idea to support web rendering is not correct at all, the web is better with light png or jpeg formats.

@medmedin2014
Copy link

medmedin2014 commented Dec 31, 2021

@davidjgraph
Copy link
Collaborator

Please show us how to convert arbitary HTML (this isn't used only for word wrapping) in SVG in JavaScript.

@medmedin2014
Copy link

Please show us how to convert arbitary HTML (this isn't used only for word wrapping) in SVG in JavaScript.

Your intent is keep users enclosed in DrawIO work space which is impossible because some complex editing features are not available in your software, and you blame other viewers and editors for not supporting some weird tags that no one is using. Why not fix the root of the problem and ditch those HTML tags and be compatible with software standards.

@davidjgraph
Copy link
Collaborator

davidjgraph commented Dec 31, 2021

Please don't tell us what our intent is without asking us. I am happy to engage constructively, but please keep comments professional and within our code of conduct.

Export to SVG is not a core feature, we're not an SVG editing tool, we're a diagramming tool. There's no conspiracy here, it's simply not a case we considered in the original design of the underlying model.

We're not blaming anyone, we're simply saying that we use an optional part of the SVG 1.1 that many non-browsers do not implement. Yes, our design decision led to the position currently, but these things can happen without evil intent.

Why not fix the root of the problem and ditch those HTML tags

Imprecise suggestions are not constructive. You're effectively talking about a complete re-write of the label rendering with us building a full HTML rendering engine ourselves. That's just too much work, we'd be looking 1-2 person years, that's not realistic.

@davidjgraph
Copy link
Collaborator

I've added 1cddc59 to the README to indicate this is not an SVG editing app.

@davidjgraph davidjgraph reopened this Jan 1, 2022
@davidjgraph
Copy link
Collaborator

We've implemented a workaround in 16.2.4. The export to SVG dialog now has a text option dropdown:

Screenshot 2022-01-07 at 22 06 21

No change exports as it does currently.
Embed fonts does just that in case the viewer doesn't have the font installed.
Convert labels to SVG send transmits the diagram to our servers, generates a PDF, then pipes that through Inkscape and returns the output SVG.

Note with this last option:

  • You transmit the diagram to our servers. Yes, we understand how do security/monitoring/change management/data deletion/no PII logging on servers, we're in the process of SOC II Type 2.
  • The text is converted to a path. Screen readers can't read it and you can't select it.
  • The file size will be larger.

If you want this to use in Inkscape, you're better off just exporting to PDF and importing that to Inkscape.

I'll close this ticket now, if there are issues with this implementation, please open another ticket.

Will we implement native SVG text in the app and export that, no, never. If you need this beyond anything, fork the project and implement it.

@jahagirdar
Copy link

I am converting the diagram to svg in batchmode via a script

 cmd="drawio -x -f svg -o "+args['out']+"/"+pagecount+".svg  -p"+pagecount+" "+args['in'].replace(/(\s)/g,"\\$1");
                exec(cmd, (error, stdout, stderr) => {

Is the option to change text setting available on the commandline?

imgbot bot pushed a commit to nuxt/website-v2 that referenced this issue Jan 10, 2023
* **Modules** and **Plugins** diagrams updates and fixes

- Raw and SVG versions of Module diagram added and replaced at:
    - en
    - es
    - fr
    - ja
    - pt
- `.imgbotconfig` updated to prevent Github imgbot automatically reformatting SVG diagrams
- Plugins SVG diagram updated
- Fixed ‘Viewer does not support full SVG 1.1` warning message (jgraph/drawio#774)

* few tiny typos fixed in modules SVG
@jgraph jgraph locked as resolved and limited conversation to collaborators Mar 24, 2023
@davidjgraph
Copy link
Collaborator

23.0.2 now replaces the warning text with a high-res image of the label, if embed images and embed fonts are ticked in the SVG export dialog.

@davidjgraph davidjgraph added the completed Label to filter out completed tasks label Feb 28, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
completed Label to filter out completed tasks
Projects
None yet
Development

No branches or pull requests