I would like to create an SVG file that, on it's own, has a little animation, controlled by Javascript. Let's assume that I must use Javascript, not the fancy-pants SVG animation tools. That works just fine; a black circle moves around the top left corner of my window:
<svg
xmlns=""
xmlns:xlink=""
width="400px" height="400px"
>
<circle id="c" cx="50px" cy="50px" r="20px" />
<script>
var c = document.getElementById('c');
function f() {
c.setAttribute('cx', 50 + 30 * Math.random());
c.setAttribute('cy', 50 + 30 * Math.random());
}
setInterval(f, 1000);
</script>
</svg>
Now, I would like add that SVG to a few web pages. Let's try:
<html>
<head>
<title>Test a scripted SVG in an <img> tag
</head>
<body>
<img src="test.svg" />
</body>
</html>
The result is a black circle that does not move around.
What am I doing wrong? or Where does it say that I cannot do this?
I would like to create an SVG file that, on it's own, has a little animation, controlled by Javascript. Let's assume that I must use Javascript, not the fancy-pants SVG animation tools. That works just fine; a black circle moves around the top left corner of my window:
<svg
xmlns="http://www.w3/2000/svg"
xmlns:xlink="http://www.w3/1999/xlink"
width="400px" height="400px"
>
<circle id="c" cx="50px" cy="50px" r="20px" />
<script>
var c = document.getElementById('c');
function f() {
c.setAttribute('cx', 50 + 30 * Math.random());
c.setAttribute('cy', 50 + 30 * Math.random());
}
setInterval(f, 1000);
</script>
</svg>
Now, I would like add that SVG to a few web pages. Let's try:
<html>
<head>
<title>Test a scripted SVG in an <img> tag
</head>
<body>
<img src="test.svg" />
</body>
</html>
The result is a black circle that does not move around.
What am I doing wrong? or Where does it say that I cannot do this?
Share Improve this question asked May 22, 2014 at 23:27 Jacob MarbleJacob Marble 30.2k25 gold badges69 silver badges79 bronze badges3 Answers
Reset to default 13<script> elements do work in SVG files but not when the SVG file is displayed as an image whether that is via the <img> element or as a CSS background-image. If you want scripts to work then replace the <img> with an <iframe> or <object> element.
Basically, SVG when used in an image context emulates raster images. Raster images aren't scriptable so neither is SVG when it is used in that way.
I've done this and it worked for me.
But I think there should be the mysterious //<!\[CDATA\[ stuff:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.1//EN"
"http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200"
height="200"
zoomAndPan="disable"
xmlns="http://www.w3/2000/svg"
xmlns:xlink="http://www.w3/1999/xlink"
xml:space="preserve">
<!-- Script linked from the outside-->
<script xlink:href="linked_script.js" />
<script>
//<![CDATA[
alert("ble");
]]>
</script>
</svg>
This is the file I embed it in (and it alerts as expected):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.">
<title>Svg embeding test</title>
</head>
<body>
<embed src="test.svg" type="image/svg+xml" />
</body>
</html>
Following Robert Longson answer:
In my case I had to <embed> the .svg because my CMS (joomla) didn't allow me to put a src attribute into the object tag and also worked.
Also you have to be sure that MIME type image/svg+xml is allowed on your server.