Return to Answer

These days you can paste the SVG markup into the HTML area in a Stack Snippet and it will render in the question or answer in most browsers.

<svg width="100%" height="150">
  <circle id = "middle" cx="50%" cy="50" r="25" fill="red">
  <animate id="a" begin="click" attributeName="fill" to="green" dur="2s"/>
  <set begin="a.end" dur="2s" attributeName="fill" to="green" dur="1s"/>
</circle>
</svg>
<div style="text-align:center">
<button onclick="document.getElementById('a').beginElement();">Click on the circle or click on me!</button>
</div>

If you upload the SVG as a file and reference it as an image (via the html <img> tag or as a CSS background-image etc) and the SVG contains javascript then the script won't run as SVG in an image context disables scripting.

Neither can you trigger animation via clicking e.g via begin="click" as I've done above as that SVG capability is also disabled when it's used as an image.

So despite the need to click Run to display the SVG you may need to do it this way instead.

These days you can paste the SVG markup into the HTML area in a Stack Snippet and it will render in the question or answer in most browsers.

<svg width="100%" height="150">
  <circle id = "middle" cx="50%" cy="50" r="25" fill="red">
  <animate id="a" begin="click" attributeName="fill" to="green" dur="2s"/>
  <set begin="a.end" dur="2s" attributeName="fill" to="green" dur="1s"/>
</circle>
</svg>
<div style="text-align:center">
<button onclick="document.getElementById('a').beginElement();">Click on the circle or click on me!</button>
</div>

If you upload the SVG as a file and reference it as an image (via the html <img> tag or as a CSS background-image etc) and the SVG contains javascript then the script won't run as SVG in an image context disables scripting.

Neither can you trigger animation via clicking e.g via begin="click" as I've done above as that SVG capability is also disabled when it's used as an image.

So despite the need to click Run to display the SVG you may need to do it this way instead.

These days you can paste the SVG markup into the HTML area in a Stack Snippet and it will render in the question or answer in most browsers.

If you upload the SVG as a file and reference it as an <img> and the SVG contains javascript then the script won't run as SVG in an image context (as an <img> or CSS background image etc) is not interactive. So despite the need to click Run to display the SVG you may wish to do it this way instead.

These days you can paste the SVG markup into the HTML area in a Stack Snippet and it will render in the question or answer in most browsers.

<svg width="100%" height="150">
  <circle id = "middle" cx="50%" cy="50" r="25" fill="red">
  <animate id="a" begin="click" attributeName="fill" to="green" dur="2s"/>
  <set begin="a.end" dur="2s" attributeName="fill" to="green" dur="1s"/>
</circle>
</svg>
<div style="text-align:center">
<button onclick="document.getElementById('a').beginElement();">Click on the circle or click on me!</button>
</div>

If you upload the SVG as a file and reference it as an image (via the html <img> tag or as a CSS background-image etc) and the SVG contains javascript then the script won't run as SVG in an image context disables scripting.

Neither can you trigger animation via clicking e.g via begin="click" as I've done above as that SVG capability is also disabled when it's used as an image. 

So despite the need to click Run to display the SVG you may need to do it this way instead.

These days you can paste the SVG markup into the HTML area in a Stack Snippet and it will render in the question or answer in most browsers.

These days you can paste the SVG markup into the HTML area in a Stack Snippet and it will render in the question or answer in most browsers.

If you upload the SVG as a file and reference it as an <img> and the SVG contains javascript then the script won't run as SVG in an image context (as an <img> or CSS background image etc) is not interactive. So despite the need to click Run to display the SVG you may wish to do it this way instead.