svg

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

Features

SVG Full Auto Completion.

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

Document Symbol tree.

SVG Live Preview and Export PNG

MDN Reference for fast learn

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

Fast Color Picker

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.6 - 2021-05-02

• Change activation event for speed up startup of VSCode.
• Fixed Preview All SVG UI not scrollbar.

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!