«
»

Validating xHTML 1.0 Strict and SVG

Yesterday I started with some inline svg in a xhtml webpage. And it proved to be a great challenge to make the damn thing valid. I tried multiple solutions and finally I found the following blogpost. There are 2 solutions according to :ism:


Live with the fact is does NOT validate.
The following will not validate when you put it to the test on the w3.org validator. But it’s usable and should be valid.

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang='en'>
  <head>
    <meta http-equiv="Content-Type"
      content="application/xhtml+xml;charset=utf-8"/>
    <title>SVG test</title>
    <link rel="copyright" type="text/html;charset=utf-8"
      href="http://creativecommons.org/licenses/by-nc-sa/3.0/" />
  </head>
  <body>
    <h2>Inline SVG test</h2>
    <p>
      <svg width="300" height="400"
        xmlns="http://www.w3.org/2000/svg">
        <rect x="1" y="1" width="298" height="398"
          style="fill: none; stroke: black; stroke-width: 2;"/>
      </svg>
    </p>
  </body>
</html>

Make it valid but deal with a mess.
As you can see in the following example, it is quite… bothersome to deal with the &lt;svg:*&gt; tags over and over. But it’s valid! 

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:svg="http://www.w3.org/2000/svg" xml:lang='en'>
  <head>
    <meta http-equiv="Content-Type"
      content="application/xhtml+xml;charset=utf-8"/>
    <title>SVG test</title>
    <link rel="copyright" type="text/html;charset=utf-8"
      href="http://creativecommons.org/licenses/by-nc-sa/3.0/" />
  </head>
  <body>
    <h2>Inline SVG test</h2>
    <p>
      <svg:svg width="300" height="400">
        <svg:rect x="1" y="1" width="298" height="398"
          style="fill: none; stroke: black; stroke-width: 2;"/>
      </svg:svg>
    </p>
  </body>
</html>

Although I’m kind of a must_be_valid freak, I decided to let this one pass and go with solution 1.

The problem is, I still want to validate my webpage once in a while without the 200+ errors because of a svg drawing being embedded. Since I’m using php (like most of us?), I just check for the validator and then don’t display the drawings…

if (!stristr($_SERVER["HTTP_USER_AGENT"], "W3C_Validator")) {
   include_once("svg/image_file.php");
}

You can easily wrap this in a function and use it several times throughout your page.

Before you think of using this nasty solution, consider not putting up a w3c-valid link on your web page since it is truly not nice of us to trick the validator in such way.

Tags: , , ,

This entry was posted on Thursday, April 3rd, 2008 at 09:51 and is filed under HTML, PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Validating xHTML 1.0 Strict and SVG”

  1. stelt Says:
    April 3rd, 2008 at 10:55

    You can also help the people working on the validator to be useful on multi-namespace content. That would we awesome. Many people, including me, need it as a debugger

    Reply

  2. dani Says:
    April 8th, 2009 at 15:48

    It’s a hardcode coding, I guess. But I’ll give it a try for a while to test my SVG page.

    Reply

Leave a Reply