Reuse objects defined in ?

Question

I wanted to write a logo in svg, but surprisingly found that I could not re-use objects defined in <defs>...</defs>. I tried them on Chrome.

Please see examples:

test1.html doesn't work, no rect was drawn.

<!DOCTTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         width="480" height="360">
      <defs>
        <rect id="helo" x="0" y="0" height="20" width="20" />
      </defs>
      <use xlink:href="#helo" />
    </svg>
  </body>
</html>

BUT test2.svg works.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
              "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="480" height="360">
  <defs>
    <rect id="helo" x="0" y="0" height="20" width="20" />
  </defs>
  <use xlink:href="#helo" />
</svg>

What's needed to make the test1.html work? Many thanks:)

Also `DOCTYPE` is misspelled as `DOCTTYPE` in the non-working example. — Mechanical snail, Jul 23 '12 at 14:43

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

It seems that this is a bug in Webkit: Importing external SVG (with WebKit) https://bugs.webkit.org/show_bug.cgi?id=12499

If you're going to create an SVG icon, I would make it in a separate .svg file and then add it into the HTML with the object tag. That would be better anyway since if you make changes to the SVG file and it will change all instance on your website.

edited May 23 '17 at 10:34

Community

1
1

answered Jul 23 '12 at 14:34

Peter Collingridge

10,849
3
44
61

Thanks Peter. Nice links. I m still studying those weird testsuits. For now I decide to use canvas instead:) – gongzhitaao Jul 24 '12 at 13:37

score 0 · Answer 2 · answered Dec 30 '13 at 22:31

The bug seems to have been fixed now however there is one important caveat here that when you are trying to re-use objects in the defs tag in SVG on a HTML page the xmlns:xlink="http://www.w3.org/1999/xlink" is important and must be added to the SVG tag. Without that the href isn't resolved.

Reuse objects defined in ?

2 Answers2