Skip to content

Instantly share code, notes, and snippets.

@takahirohonda
Last active December 23, 2020 01:56
Show Gist options
  • Select an option

  • Save takahirohonda/9aeacda743f5722c8a10689299183ff9 to your computer and use it in GitHub Desktop.

Select an option

Save takahirohonda/9aeacda743f5722c8a10689299183ff9 to your computer and use it in GitHub Desktop.
web-skimmer-in-svg

Script can be added to the svg file. This has JS code, but it can be just pulled from somewhere as in the example above.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  <script type="text/javascript"><![CDATA[
    window.addEventListener('DOMContentLoaded', () => {
      console.log('JS in SVG file executed');
      document.documentElement.addEventListener('keydown',function(e){
        console.log('Logging key from svg!');
        console.log(e.keyCode);
      });
    })
  ]]></script>
</svg>

Then, inject it through an embed tag.

<embed src="img/web-skimmer/star.svg" alt="star" type="image/svg+xml" />

It doesn't work as CSS background, img tag or favicon link.

.load-js {
  background-image: url("../../js/web-skimmer/star.js"); 
}
<head>
  <link rel="icon" href="img/web-skimmer/favicon.svg">
</head>
<body>
  <img src="img/web-skimmer/star.svg" alt="star" type="image/svg+xml" />
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment