Home/ Questions/Q 8264505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T04:28:54+00:00

I wanted to write a logo in svg, but surprisingly found that I could

  • 0

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:

  1. 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>

  2. 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:)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0