Home/ Questions/Q 6665171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:41:41+00:00

What are the cons to using SVG in terms of validation, accessibility, and maintainability

  • 0

What are the cons to using SVG in terms of validation, accessibility, and maintainability for CMS-based websites?

In a project I need to make the Navigation fluid scalable without losing the quality of text and gradient. and it’s not possible with HTML, CSS only.

A button like this:

screenshot of desired button

So I found this example (although it’s not exactly like what I want).

but it’s not valid:

validator screenshot

This button was 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 arose because this website will be made using WordPress. What are the disadvantages to using SVG code over HTML, CSS, and JavaScript?

Edit: I found this article on Microsoft’s Website, which says SVG is better than Canvas to make UI Elements because of less UI code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The biggest problem you’ll have is browser compatibility. If you need to support older versions of IE (and most public web sites will need to) then you can’t use SVG without resorting to Javascript hacks because the browser doesn’t support it.

    In addition, SVG isn’t supported in the Android browser prior to version 3.0, which currently accounts for virtually all Android mobiles out there apart from a few tablets. If you need to support these, then again SVG isn’t the solution.

    If you’re okay with not supporting those browsers (or if you can work out a fall-back solution) then go for it.

    In terms of maintainability, I recommend creating your button using a vector graphic editor that can export to SVG. It will be a lot easier to maintain if you have a source file which you can edit in a graphical environment than if you are trying to edit the SVG markup directly.

    In terms of validation, the reason you’re getting errors is because of the way you’re embedding the SVG into your HTML. You shouldn’t be defining an XML header for the SVG when it’s embedded like this, be cause an XML header should only ever appear as the first line of an XML document.

    If the whole document is XML (ie xhtml) then you need to put the namespace definitions for both xhtml and SVG at the top of the document. If the document is non-XML (ie plain HTML), then you don’t need the XML declaration at all.

    The following will work in all 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 should solve your validation issues.

    If the SVG is to be loaded from an an external file, then it should include the XML declaraion.

    • 0