SVG Scripting

SVG + JavaScript

SVG can be used together with JavaScript to modify and animate SVG elements.

SVG Simple Script

In this example, we create a red circle with a radius of 25. Click the button to change the radius to 50:

Here is the SVG code:

Code explanation:

• Add an id attribute to the <circle> element
• Create a script within <script> tags
• Get a reference to the SVG element with the getElementById() function
• Change the r attribute using the setAttribute() function
• Add an <input type="button"> element to run the JavaScript when clicked

SVG Change CSS

In this example, we create a red circle. Click the button to change the fill color to green:

Here is the SVG code:

Code explanation:

• Add an id attribute to the <circle> element
• Create a script within <script> tags
• Get a reference to the SVG element with the getElementById() function
• Set a new fill color with style.fill
• Add an <input type="button"> element to run the JavaScript when clicked

SVG Change Attribute Values and CSS

In this example, we create a red circle. Click the button to change the radius, the x position, fill color, and add a stroke color:

Here is the SVG code:

SVG Script for Animation

In this example, we create a red circle. Click the two buttons to start and stop the animation:

Here is the SVG code:

Code explanation:

• The start() and stop() functions start and stop the animation
• The animation starts by setting up a timer (t) which calls the animate() function every 20 milliseconds with the setInterval() function
• The animation is stopped by clearing the t timer
• The animation is performed inside the animate() function
• Get a reference to the <circle> element with the getElementById() function
• Get the value of the cx attribute with the getAttribute() function
• Convert the value of the cx attribute to a number with parseInt(). Then add 2 to the cx value
• Test if the newCX value is larger than 600 (which is the width of the SVG "window"), then reset it to 50 (which is the original start position)
• Put the newCX value into the cx attribute of the <circle> element with the setAttribute() function. This moves the circle to the new cx-position