Skip to content

Conversation

@jogibear9988
Copy link
Contributor

fixes: #237216

@mjbvz mjbvz added this to the January 2025 milestone Jan 13, 2025
@mjbvz mjbvz enabled auto-merge January 13, 2025 17:16
@mjbvz mjbvz merged commit 2064073 into microsoft:main Jan 13, 2025
7 checks passed
@jogibear9988 jogibear9988 deleted the svg-preview branch January 13, 2025 18:13
@wendelloliveiradev
Copy link

Have you disable the ability of editing the SVG code straight in the editor? Or is there a toggle, where I can change between edit and preview mode?

To clarify: sometimes I like to edit svg images straight in the svg code, changing things like, color, stroke and etc. It's much easier then having to leave the VSCode for an image editor. And I know that I can use some extension for this, but I like the native way.

@Tyriar
Copy link
Member

Tyriar commented Feb 11, 2025

@wendelloliveiradev you need to run the reopen editor with text editor command to get it back:

image

You can set the default with this setting:

  "workbench.editorAssociations": {
    "*.svg": "default",
  }

@aminomancer
Copy link

The preview feature is nice, but this setting is not very discoverable, and potentially pretty disruptive. It's in the command palette, but I don't know how anyone would guess what to search for. I had to look through the release notes to find this, since there was nothing in the UI to change back to text editor. A button in the status bar or the top right corner of the editor would be nice. Or a context menu item, or an item in the View menu.

Without an easy way for users to find the option to switch back to text editor, I'm afraid this will cause frustration. Lots of users are probably used to using e.g. jock.svg to preview SVGs while editing them as text. Right now, when you open an SVG it just shows as an image without explanation or any visual cue for how to open it as a text file. I feel like the "Select Language Mode" status bar button should show in image preview mode, and allow switching between editor modes, since that was my first instinct to look for.

@Tyriar
Copy link
Member

Tyriar commented Feb 13, 2025

FYI @mjbvz

@jogibear9988
Copy link
Contributor Author

Could we add the same custom editor twice too the package.json? So we add it again for svg with a different priority

@laknoll
Copy link

laknoll commented Feb 14, 2025

Wasted an hour trying to figure out how to get a regular text editor back for the SVG.

At the very least a right-click option should be available to switch to the text editor. As it is, it’s a big regression in productivity for me. Installing one of the SVG editing extensions won’t help neither, it still shows the dumb preview by default.

Or why not do the sensible thing and show a text editor with a preview of the SVG in some corner of the screen.

@MHillier98
Copy link

I'd love the functionality to be more similar to https://github.com/lishu/vscode-svg2 where I can have the svg text on one side and the preview on the other

@wezz
Copy link

wezz commented Feb 17, 2025

I just ran into an issue with this and finally found the root cause.
Displaying an SVG as an image should (in my opinion) be done by choice.
Ex. adding an extension; Or by adding an option in the contextual menu (right click); Or just done in your OS (Windows PowerTools event adds SVG preview in the file Explorer).

VS Code is a code-first IDE and displaying images when you want the source XML of the SVG is very inefficient.

I just can't begin to imagine how many hours will be wasted due to this behavioral change.

With that said, I appreciate the effort put into VS Code by the community.
I just think this wasn't implemented in the right way.

@vs-code-engineering vs-code-engineering bot locked and limited conversation to collaborators Feb 27, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Image preview does not work for SVGs

8 participants