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?

Recommended Answers

All 6 Replies

Member Avatar for LastMitch

@Alba Ra

The <img> or <embed> syntax doesn't work either.

Did you <embed> tags correctly:

<embed src="circle.svg" type="image/svg+xml" /> 

You can read more here:

http://www.w3schools.com/svg/svg_inhtml.asp

Hello, Mitch,

thanks for responding but unfortunately I believe my code was/is as stated in your link.

My actual code is:

<embed type="image/svg+xml" width="500" src="http://i.rosebrossut.fr/svg/chromosome_de.svg" title="Chromosom" />

I think that Ample SDK requires some <svg> element that might reference an external SVG file but so far my search for how to do that has been fruitless.

Now I have tried to embed the SVG file within the <svg> element.

<svg width="60%" height="60%" viewBox="0 0 700 750" version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
            <image x="0" y="0" width="700" height="750" xlink:href="http://i.rosebrossut.fr/svg/chromosome_de.svg" />
        </svg>

And at least Firefox is able again to display the image. But the Internet Explorer 8 still does not display the image. So this is not solution.

I tried to post on Ample SDK's Google Group but apparently Google Groups has again some issues - meaning I wrote my question, I can see that I've posted to the group but I can't see the post in the group.

Your first link basically says that SVG 1.1 are not supported by IE8 but Ample SDK will make them work - which is exactly what I'm going for - that's eaxctly one of the major reasons the Ample SDK was created for.

As for your second link I'm at a loss why you offered me this link. My SVG file comes from Wikipedia and so I think would have been created with maximum browser compatibility in mind. I think you did include it for the same reason as you did with your first link.

SVG is not natively supported by any IE up until IE9 and many functions have limited support in other browser as well.

Ample SDK runs in every modern web-browser. When running it fills in functionality missing from the browser, giving web developers a standards-based API that allows them to stop worrying about browser quirks and start efficiently writing cross-browser application code.

…and…

Ample SDK runs in: Microsoft Internet Explorer 5.5+, Mozilla FireFox 1.0, Opera 9.1+, Safari 3.0+, Konqueror 3.5+, Mozilla 1.6+, Google Chrome 0.1+

And that's exactly what I'm trying to do - make it run using IE8 to fill the missing SVG functionality of that (and other) browser(s).

Please don't get me wrong, I appreciate your time spent on trying to help - but don't assume that I have not made my homework before posting this question.

Member Avatar for LastMitch

Ample SDK

It's kinda like a package similiar to JQuery. I think the images you created is not being read correctly on Ample SDK. That's the only thing I could think of.

And that's exactly what I'm trying to do - make it run using IE8 to fill the missing SVG functionality of that (and other) browser(s).

Did you read this Browser compatibility table for IE 8:

http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility

and this:

http://voormedia.com/blog/2012/10/displaying-and-detecting-support-for-svg-images

Hey I mean you can try. I don't know how else to assisted you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.