Bug with inline SVG and use tag referring to fragments identifiers in the same document

Open N-X-N opened this issue 2 years ago • 1 comments

With <use href="#some-id"/>, you can refer to any SVG fragment identifier inside of the same document, and not only inside of the same <svg> tag.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>Test SVG use tag</title>
<style>
html, body {
  font: 16px Arial;
}
.svg-inl {
  height: 2rem;
  width: 2rem;
  vertical-align: -.5rem;
}
</style>
</head>
<body>

<p>
    An inline SVG:
    <svg class="svg-inl" viewBox="0 0 32 32">
      <symbol viewBox="0 0 32 32" id="s-circle">
        <circle cx="16" cy="16" r="12" fill="none" stroke="red" stroke-width="2" />
      </symbol>
      <symbol viewBox="0 0 32 32" id="s-square">
        <path d="M8 8 H24 V24 H8 Z"  fill="none" stroke="blue" stroke-width="2" />
      </symbol>
      <use href="#s-square"/><use href="#s-circle"/>
    </svg>
  :done.
</p>

<p>
  SVG reference to inline elements:
  <svg class="svg-inl"><use href="#s-square"/><use href="#s-circle"/></svg>
  :done.
</p>

</body>
</html>

Output in browser (FF, works with Chrome and Edge too): svg_use_with_FF

Output with WeasyPrint 59: svg_use_with_WP

WeasyPrint apparently searches the href only inside of the same svg tag, and not the other ones in the same document.

Same issue if I move the content of the first SVG into a file (adding version and xmlns) and use it. For example, with href="i.svg#s-square" (browsers display it correctly).

Jul 15 '23 13:07 N-X-N

That’s true, SVG images are currently managed independently, they don’t share anything.

Jul 15 '23 13:07 liZe