<href> in SVG | Parallel Transport

The solution is to add an XML namespace for the xlink prefix.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
 <symbol id="circ"><circle cx="100" cy="100" r="100"/></symbol>
 <use xlink:href="#circ"/>
</svg>

Source: <href> in SVG | Parallel Transport

in SVG by Kartik PrabhuKartik Prabhu (kartikprabhu.com)
While creating an animated SVG logo for indietech.rocks we ran into a strange problem where the SVG would display in some browsers and not in others. The issue is the different ways browsers handle XML — yes SVG is XML! So here is the problem and its solution.

Leave a Reply

Your email address will not be published. Required fields are marked *

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)