Viewer does not support full SVG 1.1 #51

MagicLegend · 2020-05-20T14:21:52Z

Hi,

When I create a new fresh .svg file (I have the extra option to edit .svg files directly in my vscode config); it adds this warning Viewer does not support full SVG 1.1; which also happens to get rendered into my LaTeX document. Why is this happening?

Diagram:

Generated XML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" height="61px" viewBox="-0.5 -0.5 121 61" content="&lt;mxfile host=&quot;localhost&quot; modified=&quot;2020-05-20T14:15:43.802Z&quot; agent=&quot;5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.45.0 Chrome/78.0.3904.130 Electron/7.2.4 Safari/537.36&quot; etag=&quot;2dj9NAsXAYmHP5eUvH9k&quot; version=&quot;13.0.9&quot;&gt;&lt;diagram id=&quot;6hGFLwfOUW9BJ-s0fimq&quot; name=&quot;Page-1&quot;&gt;jZI9b8QgDIZ/DXsSpFy7Nr32lk4ZbkbBBSQSR5zTJP31JQXy0dNJXZD92Ab7xYxX7fTuRK8/UIJlRSYnxl9ZUZQ88+cC5gCeTnkAyhkZ0A7U5hsijHVqMBJuh0RCtGT6I2yw66ChAxPO4XhM+0R7fLUXCu5A3Qh7T69Gko5TFKeNX8AonV7Oy+cQaUVKjpPctJA47hA/M145RApWO1VgF+2SLqHu7UF0bcxBR/8pKELBl7BDnO3q2wmt0ZzmdTh0EpaSjPGXURuCuhfNEh39B3umqbXey70ZbwRHMD3sKl9n9TsC2AK52afEAp4WZP7jj5vaeZJQ75QuIxPxg9V69aaBN6IMyd3k/o3tdpaffwA=&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="0" y="0" width="120" height="60" fill="#ffffff" stroke="#000000" 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: 118px; height: 1px; padding-top: 30px; margin-left: 1px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Wow
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Wow
                </text>
            </switch>
        </g>
    </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>

LaTeX:

\usepackage{svg}
(...)
\includesvg{./figures/network.svg}

(Inkscape is installed via apt, v0.92.3 (2405546, 2018-03-11))

PDF output:

Of course I can manually remove the warning; but that should not be the solution :-) Info:

Version: 1.45.0
Commit: d69a79b73808559a91206d73d7717ff5f798f23c
Date: 2020-05-07T16:10:24.511Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.3.0-51-generic

(Yes, I am a minor version of VSCode behind)

The text was updated successfully, but these errors were encountered:

hediet · 2020-05-20T14:47:42Z

    <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>

This is a switch generated by Draw.io. Viewers that cannot render the first g will render the second element and thus display the message. It seems like includesvg cannot render the first element.

I guess you just cannot use the Draw.io element that uses this feature if you include the svg like that in LaTeX. This sucks.

This is a problem of includesvg though and only a usability problem of this extension, so I will close this issue.

Please share your ideas how I can improve that (or how you can help improving this extension).
I still think that it is not so easy to bring Draw.io's pdf export feature to VS Code. It would be cool if someone could research this.

Can you try to use Inkscape to export the svg to pdf manually and send a screenshoft of the pdf?

MagicLegend · 2020-05-20T15:35:55Z

This is a switch generated by Draw.io. Viewers that cannot render the first g will render the second element and thus display the message. It seems like includesvg cannot render the first element.

Okay, fair enough. Makes sense. Can I force drawio to output svg 1.0? The difference according to wikipedia is The SVG 1.1 specification is modularized in order to allow subsets to be defined as profiles. Apart from this, there is very little difference between SVG 1.1 and SVG 1.0.. Doesn't sound important for my drawio drawings :D Or is this the exact feature that makes drawio work..?

I guess you just cannot use the Draw.io element that uses this feature if you include the svg like that in LaTeX. This sucks.

Oh well, once the .png functionality gets rolled out all of this is not an issue anymore. Simply use the .png files and not care :-)

Please share your ideas how I can improve that

Well, can I force the extension to output svg 1.0?

Can you try to use Inkscape to export the svg to pdf manually and send a screenshoft of the pdf?

Ehh, I am not familiar with svg's at all; and it returns a warning (but it does work):

$ inkscape -z -D --export-latex  --file="network.svg" --export-pdf="network_svg-tex.pdf"
WARNING: unknown type: svg:foreignObject

(Command from here)

And it outputted the following files:

network_svg-tex.pdf_tex:

%% Creator: Inkscape inkscape 0.92.3, www.inkscape.org
%% PDF/EPS/PS + LaTeX output extension by Johan Engelen, 2010
%% Accompanies image file 'network_svg-tex.pdf' (pdf, eps, ps)
%%
%% To include the image in your LaTeX document, write
%%   \input{<filename>.pdf_tex}
%%  instead of
%%   \includegraphics{<filename>.pdf}
%% To scale the image, write
%%   \def\svgwidth{<desired width>}
%%   \input{<filename>.pdf_tex}
%%  instead of
%%   \includegraphics[width=<desired width>]{<filename>.pdf}
%%
%% Images with a different path to the parent latex file can
%% be accessed with the `import' package (which may need to be
%% installed) using
%%   \usepackage{import}
%% in the preamble, and then including the image with
%%   \import{<path to file>}{<filename>.pdf_tex}
%% Alternatively, one can specify
%%   \graphicspath{{<path to file>/}}
%% 
%% For more information, please see info/svg-inkscape on CTAN:
%%   http://tug.ctan.org/tex-archive/info/svg-inkscape
%%
\begingroup%
  \makeatletter%
  \providecommand\color[2][]{%
    \errmessage{(Inkscape) Color is used for the text in Inkscape, but the package 'color.sty' is not loaded}%
    \renewcommand\color[2][]{}%
  }%
  \providecommand\transparent[1]{%
    \errmessage{(Inkscape) Transparency is used (non-zero) for the text in Inkscape, but the package 'transparent.sty' is not loaded}%
    \renewcommand\transparent[1]{}%
  }%
  \providecommand\rotatebox[2]{#2}%
  \newcommand*\fsize{\dimexpr\f@size pt\relax}%
  \newcommand*\lineheight[1]{\fontsize{\fsize}{#1\fsize}\selectfont}%
  \ifx\svgwidth\undefined%
    \setlength{\unitlength}{126.10488281bp}%
    \ifx\svgscale\undefined%
      \relax%
    \else%
      \setlength{\unitlength}{\unitlength * \real{\svgscale}}%
    \fi%
  \else%
    \setlength{\unitlength}{\svgwidth}%
  \fi%
  \global\let\svgwidth\undefined%
  \global\let\svgscale\undefined%
  \makeatother%
  \begin{picture}(1,0.36279325)%
    \lineheight{1}%
    \setlength\tabcolsep{0pt}%
    \put(0,0){\includegraphics[width=\unitlength,page=1]{network_svg-tex.pdf}}%
    \put(0.50051343,0.16058062){\color[rgb]{0,0,0}\makebox(0,0)[t]{\lineheight{1.25}\smash{\begin{tabular}[t]{c}Wow\end{tabular}}}}%
    \put(0.50646086,0.02676344){\makebox(0,0)[t]{\lineheight{1.25}\smash{\begin{tabular}[t]{c}Viewer does not support full SVG 1.1\end{tabular}}}}%
  \end{picture}%
\endgroup%

network_svg-tex.pdf:

The empty rectangle makes sense; since it lets LaTeX render the text.

And without exporting to LaTeX:

$ inkscape -z -D --file="network.svg" --export-pdf="network_svg-pdf.pdf"
WARNING: unknown type: svg:foreignObject

It seems like something unsupported in inkscape? Or is that an invalid assumption to make?

MagicLegend · 2020-05-20T15:37:30Z

On another note; can I get the .png functionality myself? I looked through the code of this repo; but I don't see any references to it. I am totally okay with installing vscode insiders for that to work; since it would save me this headache :D

hediet · 2020-05-20T15:48:25Z

Oh well, once the .png functionality gets rolled out all of this is not an issue anymore. Simply use the .png files and not care :-)

Yeah. Svg would be better though :D

Or is this the exact feature that makes drawio work..?

I don't know. It does not seem to be entirely unimportant.

Well, can I force the extension to output svg 1.0?

No, unfortunately not. But you could try to not use svg 1.0 features.

Or is that an invalid assumption to make?

I think this is a valid assumption to make.

On another note; can I get the .png functionality myself?

Yes. Install the insiders, clone this repository, set enableProposedApi to true in package.json, install node & yarn and run yarn install & yarn build. Then you get a vsix that you can install.
I tried to upload the vsix for you, but github does not let me do that.

hediet · 2020-05-20T16:14:44Z

https://desk.draw.io/support/solutions/articles/16000042487-why-does-the-text-of-svg-export-sometimes-not-display-correctly-in-ie-and-some-svg-editors-

or disable formatted text and word wrapping for all labels in the diagram before exporting as SVG as follows:

Select all elements of the diagram (right click, Select All) and uncheck the Formatted Text option.
Select all vertices of the diagram (right click, Select Vertices) and uncheck the Word Wrap option.
Note that with formatting disabled, it is still possible to apply formatting to the label, just not to parts of the label.

MagicLegend · 2020-05-20T16:19:50Z

Yeah. Svg would be better though :D

Agreed :)

I don't know. It does not seem to be entirely unimportant.

Hmm, I see. I notice that they specifically mention inkscape as incompatible as well

No, unfortunately not. But you could try to not use svg 1.0 features.

Sad, I guess I'll just have to manually remove the message with the text editor when I'm done creating the drawing.

Yes. Install the insiders, clone this repository, set enableProposedApi to true in package.json, install node & yarn and run yarn install & yarn build. Then you get a vsix that you can install.
I tried to upload the vsix for you, but github does not let me do that.

For others reading; you missed the yarn package step (note that this needs npm install -g vsce). Anyhow; I got it figured out, but not working. It's showing the same behavior as with the published version; an infinite loading bar thingie, and nothing happening. The logging of the extension also stays completely empty, whereas with the .drawio.svg example file it logs information. Is something broken with the current insiders?

Version: 1.46.0-insider
Commit: da3bf754c3c0eabda1dc80ed9d627679ee560697
Date: 2020-05-19T10:04:43.228Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.3.0-51-generic

Just like you I can't attach the generated extension because it's too big. Shame. If to use to you; for the next 12 hours (sorry future people) you can find what I generated here: https://dro.pm/u

Could you upload a known-working version of the extension to that site so I can try it with what you built?

hediet · 2020-05-20T16:24:21Z

https://1drv.ms/u/s!AtUKtiyX0w6nkM0yCbHI-X53oD__wQ?e=dk1xSl

MagicLegend · 2020-05-20T16:32:19Z

Select all elements of the diagram (right click, Select All) and uncheck the Formatted Text option.
Select all vertices of the diagram (right click, Select Vertices) and uncheck the Word Wrap option.
Note that with formatting disabled, it is still possible to apply formatting to the label, just not to parts of the label.

I tried this; and this indeed removes the warning. Shame that wordwrapping needs to be sacrificed for that :-) I would still for sure see this as a valid workaround. Let me test your extension real quick!

MagicLegend · 2020-05-20T16:42:11Z

Hmm, your version refuses to even install... It has been spinning for a couple of minutes now; where my previous version would install in 5 seconds according to the logging. I packaged another version of my changes, same behavior. Where can I find more logging as to what vscode is doing?

Repackaged:

[2020-05-20 18:38:42.148] [sharedprocess] [info] Installing the extension: hediet.vscode-drawio

First packaged (but I didn't update the version number, did vscode be lazy and pull the published 0.4.0 extension?):

[2020-05-20 18:34:54.402] [sharedprocess] [info] Installing the extension: hediet.vscode-drawio
[2020-05-20 18:34:59.084] [sharedprocess] [info] Extracted extension to /home/magiclegend/.vscode-insiders/extensions/.hediet.vscode-drawio-0.4.0: hediet.vscode-drawio
[2020-05-20 18:34:59.084] [sharedprocess] [info] Renamed to /home/magiclegend/.vscode-insiders/extensions/hediet.vscode-drawio-0.4.0
[2020-05-20 18:34:59.085] [sharedprocess] [info] Installation completed. hediet.vscode-drawio
[2020-05-20 18:34:59.089] [sharedprocess] [info] Successfully installed the extension: hediet.vscode-drawio

Thanks for taking the time for this!

MagicLegend · 2020-05-20T20:15:13Z

Okay, restarting vscode helped or smth (not just reloading the window; like I had been doing between installs of the plugin). Now it correctly installed your version (you labeled it 0.5.0). However; it still keeps spinning forever:

I've let this go for about 5 minutes; but nothing happens. I can't see anything significant in cpu/memory usages either. Any clue? Started vscode with code-insiders --enable-proposed-api.

hediet · 2020-05-21T06:15:38Z

Did you turn on the enable proposed api flag in package.json?

MagicLegend · 2020-05-21T08:33:40Z

Did you turn on the enable proposed api flag in package.json?

Yes! The gif is actually with the .vsix that you sent; so I assume that you turned it on too :) VSCode-insiders is started with the --enable-proposed-api flag; in case that matters too.

hediet · 2020-05-21T08:35:40Z

Ah, I think you have to start it with "--enable-proposed-api hediet.vscode-drawio"

hediet · 2020-05-21T08:36:24Z

VS Code just really does not want people to use their proposed APIs except for debugging new stuff.

MagicLegend · 2020-05-21T08:55:44Z

Ah, I think you have to start it with "--enable-proposed-api hediet.vscode-drawio"

Yes! That did it! My bad, the man-page made me think that not providing an argument would enable it globally for all extensions :) Let's hope the next vscode update has the API in it! Thank you! This is gonna ease the overhead that drawings always had by a ton (no need to export them or load them back to the site when I have to edit them...)! Can't wait to work with this extension. Thank you for building it, and thank you for your support!

hediet · 2020-05-21T09:08:19Z

Thank you ;)

MagicLegend · 2020-05-21T09:30:41Z

Uh oh, tiny issue... Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing. I confirmed that the svg's were present in the drawio source folder; but the logos are refusing to show up. Any idea?

It's not just these, the Docker image is also missing (which is part of a MS Azure pack according to the source code). Is the drawio master just broken, or is there something I can do?

hediet · 2020-05-21T09:33:29Z

#53

hediet · 2020-05-21T09:34:30Z

Since you already checked out the source, I would be very happy if you could investigate this ;) Maybe I just need exclude these icons from the ignore list of the vsix package.

hediet added this to Triage in Backlog May 20, 2020

hediet closed this as completed May 20, 2020

hediet mentioned this issue May 21, 2020

Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing #53

Closed

MagicLegend mentioned this issue May 24, 2020

Ask Insider Users Whether The Build is Usable #59

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Viewer does not support full SVG 1.1 #51

Viewer does not support full SVG 1.1 #51

MagicLegend commented May 20, 2020

hediet commented May 20, 2020 •

edited

MagicLegend commented May 20, 2020 •

edited

MagicLegend commented May 20, 2020

hediet commented May 20, 2020

hediet commented May 20, 2020 •

edited

MagicLegend commented May 20, 2020

hediet commented May 20, 2020

MagicLegend commented May 20, 2020

MagicLegend commented May 20, 2020

MagicLegend commented May 20, 2020 •

edited

hediet commented May 21, 2020

MagicLegend commented May 21, 2020

hediet commented May 21, 2020

hediet commented May 21, 2020

MagicLegend commented May 21, 2020

hediet commented May 21, 2020

MagicLegend commented May 21, 2020

hediet commented May 21, 2020

hediet commented May 21, 2020

Viewer does not support full SVG 1.1 #51

Viewer does not support full SVG 1.1 #51

Comments

MagicLegend commented May 20, 2020

hediet commented May 20, 2020 • edited

MagicLegend commented May 20, 2020 • edited

MagicLegend commented May 20, 2020

hediet commented May 20, 2020

hediet commented May 20, 2020 • edited

MagicLegend commented May 20, 2020

hediet commented May 20, 2020

MagicLegend commented May 20, 2020

MagicLegend commented May 20, 2020

MagicLegend commented May 20, 2020 • edited

hediet commented May 21, 2020

MagicLegend commented May 21, 2020

hediet commented May 21, 2020

hediet commented May 21, 2020

MagicLegend commented May 21, 2020

hediet commented May 21, 2020

MagicLegend commented May 21, 2020

hediet commented May 21, 2020

hediet commented May 21, 2020

hediet commented May 20, 2020 •

edited

MagicLegend commented May 20, 2020 •

edited

hediet commented May 20, 2020 •

edited

MagicLegend commented May 20, 2020 •

edited