<svg>tags. In general, a script should be placed at the end of the document to avoid blocking and allow the script complete access to the DOM.
Most resources will tell you to set the script’s MIME type (i.e.
<[CDATA[when it is inside an SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <script>//<![CDATA[ …code… //]]> </script> </svg>
You can reference external scripts, but must use
xlink:to do so:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script xlink:href="external.js" /> </svg>
- SVG is XML, not HTML, so a few methods associated with the DOM, such as
innerHTML, don’t work in SVG (although there are workarounds).
<img src="getfunky.svg" alt="" >
Embed the SVG directly in the page, rather than referencing it as an image:
<html lang="en"> … <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <script>//<![CDATA[ …code… //]]> </script> </svg>
<html lang="en"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> … </svg> <script> … </script> </html>
- Alternatively, you can reference the SVG as an
<iframe>inside the HTML:
<object data="getfunky.svg" type="image/svg+xml"> <img src="fallback.jpg"> </object>
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.