Hello,
I want to include SVG into a webpage and to increase its support on older browsers I decided to use Ample SDK to render the images.
Unfortunately, Ample SDK does not provide a straightforward guide for people who have not extensive knowledge in some of its features.
Its tutorial and example pages jump from stupid (I'm sorry but it appears to be obvious that you need a browser in order to test your webpage) to very complex in one step.
What I would have appreciated is a step by step beginners guide. But that's not my point.
I rather have very basic problem:
How to display a SVG stored in a separate file?
The basic code seems to be...
<html>
<head>
<title>SVG Test</title>
</head>
<script type="text/javascript" src="http://your.webpage.com/ample/runtime.js"></script>
<script type="text/javascript" src="http://your.webpage.com/ample/languages/svg/svg.js"></script>
<body>
<h1>SVG Test</h1>
<script type="text/javascript">
ample.open();
</script>
<svg ...></svg>
<script type="text/javascript">
ample.close()
</script>
</body>
</html>
As you can see the SVG is stored inside the actual HTML file.
What I wanted is to display an SVG using an <object> or <img> tag. Apparently the <object> tag is better supported.
So the code would appear like this:
<script type="text/javascript">
ample.open();
</script>
<object type="image/svg+xml" width="500" data="http://your.webpage.com/svg/chromosome_fr.svg" title="chromosome"></object>
<script type="text/javascript">
ample.close()
</script>
But it does not work. Okay, without any of this I have some broken images. With this I have simply no images, broken or otherwise. The <img> or <embed> syntax doesn't work either.
Anyone having any idea how to solve this problem?