Dev.to

How to Disable SVG Preview Mode

In this guide, you'll learn three quick ways to open SVG files in text mode by default instead of preview mode in Visual Studio Code. Method 1: Set Text Editor via File Context Menu 1. Choose an SVG file 2. Right-click the file and select "Open With..." 3. Click on "Configure default editor for '*.svg'..." 4. Click on "Text Editor" to set it as the default Method 2: Edit the settings.json file 2.1 Click the gear icon in the bottom-left corner to open Manage 2.2 Open Settings 2.3 Click the file icon in the top-right corner to open the settings.json file 2.4 Paste the following code snippet to set the text editor as the default: "workbench.editorAssociations": { "*.svg": "default" } Method 3: Set Association via GUI 3.1 Click the gear icon in the bottom-left corner to open Manage 3.2 Open Settings 3.3 Search for "Workbench.EditorAssociation" Workbench.EditorAssociation 3.4 Click on "Add Item" 3.5 Type "*.svg" in the Item box *.svg 3.6 Type "default" in the Value box default 3.7 Click "OK" to confirm and set the text editor as the default Contact GitHub: Vrauuss Softwares YouTube: Vrauuss Softwares TikTok: Vrauuss Softwares Articles Video from this article: How to Disable SVG Preview Mode Blog: coming soon... Medium: coming soon... DEV.to: coming soon... Upcoming Articles How to Change the Size of an SVG with CSS More SVG tips coming soon... References StackOverflow: How to disable SVG preview in VS Code

Apr 10, 2025 - 23:45
 0
How to Disable SVG Preview Mode

In this guide, you'll learn three quick ways to open SVG files in text mode by default instead of preview mode in Visual Studio Code.

Featured Image

Method 1: Set Text Editor via File Context Menu

1. Choose an SVG file

Selecting an SVG file in the file manager interface

2. Right-click the file and select "Open With..."

Right-clicking the SVG file to open the context menu

3. Click on "Configure default editor for '*.svg'..."

Accessing the option to configure the default editor for SVG files

4. Click on "Text Editor" to set it as the default

Selecting

Method 2: Edit the settings.json file

2.1 Click the gear icon in the bottom-left corner to open Manage

Opening the VSCode gear menu in the bottom-left corner

2.2 Open Settings

Clicking on the Settings option from the gear menu

2.3 Click the file icon in the top-right corner to open the settings.json file

Accessing settings.json via the file icon in the top-right corner

2.4 Paste the following code snippet to set the text editor as the default:

JSON snippet inserted to associate .svg with the default text editor

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

Method 3: Set Association via GUI

3.1 Click the gear icon in the bottom-left corner to open Manage

Opening the VSCode gear menu in the bottom-left corner

3.2 Open Settings

Clicking on Settings from the gear menu

3.3 Search for "Workbench.EditorAssociation"

Searching for Workbench.EditorAssociation in the Settings search bar

Workbench.EditorAssociation

3.4 Click on "Add Item"

Adding a new item to the editor associations list

3.5 Type "*.svg" in the Item box

Entering '.svg' in the item input field

*.svg

3.6 Type "default" in the Value box

Entering 'default' in the value input field

default

3.7 Click "OK" to confirm and set the text editor as the default

Confirming the new editor association by clicking OK

Contact

Articles

Upcoming Articles

  • How to Change the Size of an SVG with CSS

  • More SVG tips coming soon...

References

Read More

Tags:

Previous Article

My new coding language ( Faceone)

Next Article

وأخيراً، عرفنا معنى اسم الشركة الناشئة Palmos Lplex (بالموس لبليكس)

Related Posts

The Rise of Social Commerce: Key Trends and Statistics for 2025

The Rise of Social Commerce: Key Trends and Statistics ...

Apr 13, 2025  0

4 Reasons Why Cross-Age Face Recognition is Essential for Biometrics

4 Reasons Why Cross-Age Face Recognition is Essential f...

Apr 9, 2025  0

Installing Oracle Grid Infrastructure 19.25 on Oracle Linux 9.5 Using ASMLIB 3

Installing Oracle Grid Infrastructure 19.25 on Oracle L...

Mar 29, 2025  0