Menu
I can see a rectangle and text on the screen, so the markup seems to be correct but in the editor, there's a blue squiggly and the message that the tags aren't recognized. It seem to be the case for all SVG-related elements.
<svg width="400" height="400">
<g transform="translate(0,0)">
<rect width="5" height="5"></rect>
<circle cx="40" cy="19" r="25"></circle>
<text x="37" y="9.5" dy=".35em">my text</text>
</g>
</svg>
Is there a way to fix it? I noticed that I didn't have intellisense for those elements, neither. Do I need to add a packages for that? This is what it looks like in my VS15.
406
Not a big fan of answering my own questions but the response was less than intense and I finally come up with something (to a substantial extent based on the comments, courtesy of @HansPassant).
Short version for the lazy effective coder. The problem is that the tag SVG isn't recognized as a valid element in a file with the extension HTML. I've found three ways to handle it, none of which is a real woohoo, frankly speaking.
Use the extension HTML as customary and render most, if not all, of the graphics using JavaScript. As it's very common to do so anyway, this is the approach I'll be using, until presented with a better option. DOwnside is that there's no intellisense support for the SVG specific tags in the markup.
Use the extension XHTML. That resolves the issue but the page doesn't render as a webpage at all. The browser recognizes it as a XML and renders it as such.
Use an external file (e.g. extension SVG) and embed it into the actual webpage. The downside of this approach is that we'll need to add yet another file (we've already got CSS, LESS, JS, partials as CSHTML etc.) to the pages flora. Also, it might prove inconvenient to manipulate the graphics from JavaScript.
Using this resource, I discovered a bunch of schemas to be added. That doesn't resolves the issue nor is necessarily required (but probably a good-to-know thing).
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
Further down in that article, there's a table on the different ways to use SVG graphics on a webpage.
There's also a different approach based on adding schema files to Visual Studio. It seems a bit hacky and definitely isn't something I'd like to do every time I use a new environment. Besides that, the colors of the screenshots suggest that it's a bit aged, so I've got cautious (also - a bit lazy).
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With