Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>SVGNew to Visual Studio Code? Get it now.

SVG

jock

|
205,892 installs
| (8) | Free
SVG Coding, Minify, Pretty, Preview All-In-One
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Version

svg

A Powerful SVG Language Support Extension. Almost all the features you need to handle SVG.

Features

SVG Full Auto Completion.

feature 1

Tip: All Completion list is context, will only show enable items.

Document Symbol tree.

feature 2

SVG Live Preview and Export PNG

feature 3

MDN Reference for fast learn

feature 4

Tip: Configure Trusted Domains add MDN to it get more fast action.

Fast Color Picker

feature 4

Rename Tag Name or Id Reference.

Cursor in Tag Name or Id Attribute or url(#id) Hit F2(Windows) Key, Rename it!

In Id Reference Click Goto id="" element.

Hot Ctrl Key and Move mouse to a url(#id), That it!

SVG Format Support

~~Formatting support using SVGO, which can prettify SVGs and sort tag attributes. SVGO works as a group of plugins that can be activated or desactivated (which is default for most in this extension). Information on the plugins can be found here.~~

Formatting support now is replace to HTML Language Serivce for compatible with complex svg content

Minify SVG with SVGO

Open the Command Palette (⇧⌘P on Mac and Ctrl+Shift+P on Win/Linux) and run Minify SVG. This will reduce the filesize significantly by removing all unnecessary code from the image.

Contributors

  • Laurent Tréguier for sharing SVG formatting features
  • Björn Ganslandt for sharing Minify SVG features
  • Amelia Bellamy-Royds for Add the xmlns and xmlns:xlink attributes
  • Evan Demaris
  • Trevor Burnham
  • Philipp Kief

Known Issues

SVG Version 2.0 is not included.

Changelog

1.4.5 - 2021-01-21

  • Add preview Toolbar Size option.

1.4.4 - 2021-01-18

  • Preview add Dark Transparent Background option.

1.4.3 - 2020-12-26

  • Preview now support css file change auto update (after css file saved).

1.4.2 - 2020-12-11

  • Fix HTML Custom Data for html document addition data;

1.4.1 - 2020-11-02

  • Fix IntelliSense enum options not correct after last complete rewrite.
  • Add vector-effect attribute to Presentation category.

MORE

Donations

Support me in paypal.


For more information

  • MDN SVG Reference

Enjoy!

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2019 Microsoft