Correct way to insert favicon link tag in SVG [duplicate]

Asked 21/1, 2014 at 11:1 Answered 28/1, 2014 at 16:2

What is the correct way to insert a link tag that points to favicon? I've tried the following but the W3C Validator reports element "xhtml:link" undefined.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <title>De mægtige vikinger</title>
  <defs>
    <xhtml:link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </defs>
</svg>

Ram answered 21/1, 2014 at 11:1 Comment(2)

@RobertLongson I'm not convinced that the W3C Validator is wrong and the answer you link to doesn't answer my question. But thanks – Ram 21/1, 2014 at 11:33

See this GitHub issue in SVG working group specifications. – Pensive 6/11, 2021 at 9:41

The validator isn't wrong per se, because what you have isn't pure svg, it's svg plus some xhtml and the validator has no such configuration. The way I see it you have two options:

accept that this is how it is in browsers right now, and create a new validation profile / custom DTD for this use-case.
pass the svg off as html5 instead, by changing the markup and removing the xml header and setting <!DOCTYPE html>. Then you can put the link as usual in the head section. Note that this may mean you won't be able to reference the file as an svg (since it's then html), so be sure to test in all browsers you target.

Nob answered 21/1, 2014 at 12:7 Comment(1)

I see no way to fix this. But I want to address your two suggestions. 1) xmlns:xhtml is suppose to be the correct XML namespace for link tag. 2) Might be an option but pure SVG sites has other nice attributes than HTML(5). – Ram 23/1, 2014 at 21:15

From the An XHTML + MathML + SVG Profile Specification

Only MathML and XLink namespace declarations are allowed on MathML elements, and XHTML or SVG namespaces cannot be declared.

So in essence, @ErikDahlström is right about a new validation profile. However, one in the public domain already exist. http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd It is missing the XLINK definition through, but we can easily add it.

The solution is rather wordy but that's the nature of XML.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg 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"[
<!ENTITY % XLINK.xmlns "http://www.w3.org/1999/xlink" >
<!ENTITY % SVG.prefixed "IGNORE" >
<!ENTITY % XHTML.prefixed "INCLUDE" >
<!ENTITY % XHTML.prefix "xhtml" >
<!ENTITY % MATHML.module "IGNORE" >
]>
<svg version="1.1" id="denmark" viewBox="0 0 1280 800" preserveAspectRatio="xMidYMid slice"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <title>De mægtige vikinger</title>
  <switch>
    <foreignObject width="0" height="0">
      <xhtml:link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
     </foreignObject>
  </switch>
  <script type="application/ecmascript" xlink:href="js/lib/svg.js"></script>
</svg>

The above will validate in W3C Validator. FINAL UPDATE: The W3C Validator will actually not validate the above since it says the xmlns attribute doesn't exist. No browser will render the SVG if this is not set, so it's clearly a bug in the W3C Validator.

Notes

Since I couldn't find a DTD without MathML, and I don't need it, I simply opted for ignoring it. Hence: <!ENTITY % MATHML.module "IGNORE" >

The dtd I found with xhtml + math + svg doesn't have XLink (which we need to be able to add scripts), so it's included with: <!ENTITY % XLINK.xmlns "http://www.w3.org/1999/xlink" >

The favicon is working when using Firefox, Safari. It never worked in IE but I suspect that the graphic designer used pngs and not bitmaps. On Chrome and Safari this only works when not served locally.

~~Here is the temporary example:http://www.demægtigevikinger.dk/prototype/v0.5/~~ - site is no longer online

Ram answered 28/1, 2014 at 16:2 Comment(1)

Oops. I just stumbled upon w3.org/blog/systeam/2008/02/08/w3c_s_excessive_dtd_traffic which says the W3C is getting bombarded with requests for DTDs. This might be a bad solution. – Ram 28/1, 2014 at 16:21

The validator isn't wrong per se, because what you have isn't pure svg, it's svg plus some xhtml and the validator has no such configuration. The way I see it you have two options:

accept that this is how it is in browsers right now, and create a new validation profile / custom DTD for this use-case.
pass the svg off as html5 instead, by changing the markup and removing the xml header and setting <!DOCTYPE html>. Then you can put the link as usual in the head section. Note that this may mean you won't be able to reference the file as an svg (since it's then html), so be sure to test in all browsers you target.

Nob answered 21/1, 2014 at 12:7 Comment(1)

Notes

Recommended topics

Hot tags