[css][html] SVG language support

microsoft / vscode

Visual Studio Code

https://code.visualstudio.com

MIT License

162.16k stars 28.54k forks source link

[css][html] SVG language support #66053

Open octref opened 5 years ago

octref commented 5 years ago

Currently, we have no SVG support:

In HTML, SVG tags don't receive auto completion
In CSS, SVG attributes don't receive auto completion
Syntax highlighting are problematic for both SVG tags/attributes in HTML/CSS
Emmet do not get SVG completions

However, with custom tag/property support in HTML/CSS, we should be able to trivially write a SVG package that describes the set of tags/attributes for SVG, and let HTML/CSS language services do the support work.

chpxu commented 5 years ago

Since SVG is an XML variant, would support for XML be included? Or would that have to be a request under Atom's XML package?

octref commented 5 years ago

This issue only concerns SVG. VS Code has some support for XML, and there are extensions for XML too: https://marketplace.visualstudio.com/search?term=xml&target=VSCode&category=All%20categories&sortBy=Relevance

hinell commented 5 years ago

Would be nice to have standard emmet abbreviation completion.

felixfbecker commented 4 years ago

<style> tags inside SVG files also have no CSS syntax highlighting or autocompletion, but do in HTML files.

tjx666 commented 3 years ago

any progress? It would be great to support emmet syntax in svg. By using following setting, I can get emmet suggestion, but can't get svg specific tag suggestion

"emmet.includeLanguages": {
        "svg": "html"
 },

screenshot_2020-09-20_00-53-39 screenshot_2020-09-20_00-54-01

ghost commented 3 years ago

I am not sure how much of this is implemented in jock's brilliant SVG extension, but at a cursory glance I noticed a huge number of the features you've all requested. We need to start comparing and figure out what features are missing.

ghost commented 3 years ago

Related: #124901 (SVG previewing)

hinell commented 3 years ago

@4086606 I think we all could collaborate and create better separate extension for that. Thanks anyway.

ghost commented 3 years ago

The SCM textual diff view for SVGs is nigh useless unless you're minifying a SVG.

E.g. https://github.com/PKief/vscode-material-icon-theme/pull/1139/commits/cda3339

The text view is meaningless here while the rich diff preview is much much more useful

starball5 commented 11 months ago

Note: Related on Stack Overflow: How can I get IntelliSense for SVG in HTML, CSS, and JS in VS Code?

MasterInQuestion commented 7 months ago

= Syntax highlighting for SVG =

Technically SVG is also valid HTML. But the HTML linter in current case doesn't work well enough.

Sample file: https://github.com/MasterInQuestion/Markup/blob/main/Junkyard%20Tornado.svg?short_path=1