[css][html] SVG language support

[octref]

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.

• Web Components support in HTML files #62976
• Custom Properties contribution for CSS #64164

[chpxu]

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]

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]

Would be nice to have standard emmet abbreviation completion.

[felixfbecker]

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

[tjx666]

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"
 },

[ghost]

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]

Related: #124901 (SVG previewing)

[hinell]

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

[ghost]

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

E.g. material-extensions/vscode-material-icon-theme@cda3339

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

[starball5]

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

[MasterInQuestion]

= 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

    Related:
    https://www.google.com/search?hl=en&gl=ca&num=100&filter=0&q=site:github.com/microsoft/vscode/issues+intitle:SVG+intitle:syntax|intitle:language
    https://github.com/microsoft/vscode/issues?q=in:title+SVG+syntax
    https://github.com/microsoft/vscode/issues?q=in:title+SVG+language