Do you know the cons to presenting SVG when it comes to validation, ease of access, and maintainability for Content management systems-based websites?

Inside a project I have to result in the Navigation fluid scalable without losing the standard of text and gradient. and it is difficult with HTML, CSS only.

A control button such as this:

screenshot of desired button

And So I found this example (although it isn't the same as things i want).

but it is not valid:

validator screenshot

This button is made by SVG code-- no HTML and CSS here.

SVG Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- vitual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>

My question came about as this website is going to be made using WordPress. Do you know the disadvantages to presenting SVG code over HTML, CSS, and JavaScript?

Edit: I discovered this article on Microsoft's Website, which states SVG is preferable to Canvas to create UI Elements due to less UI code.

The greatest problem you will have is browser compatibility. If you want to support older versions of IE (and many public internet sites will have to) then you definitely can't use SVG without turning to Javascript hacks since the browser does not support it.

Additionally, SVG is not supported within the Android browser just before version 3., which presently makes up about almost all Android mobiles available aside from a couple of pills. If you want to support these, on the other hand SVG is not the answer.

If you are okay without supporting individuals browsers (or if you're able to exercise an autumn-back solution) go for this.

When it comes to maintainability, I suggest creating your button utilizing a vector graphic editor that may export to SVG. It will likely be a great deal simpler to keep for those who have a resource file which you'll edit inside a graphical atmosphere than if you're attempting to edit the SVG markup directly.

When it comes to validation, the main reason you are getting errors is due to the way in which you are embedding the SVG to your HTML. You should not be determining an XML header for that SVG when it is embedded such as this, be cause an XML header should only ever appear because the first type of an XML document.

When the whole document is XML (ie xhtml) you will want to place the namespace definitions for xhtml and SVG towards the top of the document. When the document is non-XML (ie plain HTML), then you do not need the XML declaration whatsoever.

The next works in most browsers that support embedded SVG:

<html>
  <head>...</head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      ....svg content here....
    </svg>
  </body>
</html> 

This will solve your validation issues.

When the SVG will be loaded from an an exterior file, it will include the XML declaraion.