Log in / Register

Forum › How do I...?

SVG <symbol> and <use>

abernier
Hi,

Is 
<use xlink:href="#mysymbol"/>
supported?

For example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="mysymbol" viewBox="214.7 0 182.6 792">
      <!-- <path>s and whatever other shapes in here -->  
    </symbol>
  </svg>

  <p>
    <use xlink:href="#mysymbol"/>
  <p>

</body>
</html>


Thank you

Edited by abernier

mikeday
No, you can only use <use> within an SVG image to refer to content defined in that same image.
JBR
Is this likely to be changed, to reflect what browsers are doing — allowing <use> to `xlink` from one inline <svg> to another inline <svg>?

Reference: http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
mikeday
Yes, this is supported in latest build 20160301, available for Windows and MacOS X; builds for other platforms will follow shortly.