Hello,

I want to include SVG into a webpage and to increase its support on older browsers I decided to use 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?

Dani AI

Generated

Short answer: the <object>/<embed>/<img> approaches create separate resource documents or image contexts that the Ample runtime in the host page will not automatically patch, so the most reliable path is to fetch the external SVG and insert its SVG markup into the host DOM (or ensure the external SVG itself runs the Ample runtime). This avoids the “separate document” and cross-origin/image limitations. (w3.org)

Quick checklist (fast things to verify)

  • Confirm the SVG URL returns HTTP 200 and the server sends the correct MIME type (image/svg+xml). (w3.org)
  • If you fetch the SVG from another domain, ensure CORS headers allow an XHR/fetch request (Access‑Control‑Allow‑Origin). Without that, programmatic inlining will fail. (developer.mozilla.org)
  • Check browser console/network for load or parse errors (IE often hides useful hints unless DevTools opened).

Recommended, reliable fix (works across modern browsers and polyfills)

  1. Fetch the SVG text via fetch/XHR.
  2. Parse it with DOMParser as SVG/XML.
  3. importNode the parsed root into the page so it becomes real DOM (so Ample or any page-level polyfill sees it as part of the document).

Example (modern browsers — adjust for XHR fallbacks and sanitize untrusted SVGs):

fetch('path/to/graphic.svg')
  .then(r => r.text())
  .then(svgText => {
    const doc = new DOMParser().parseFromString(svgText, 'image/svg+xml');
    const svg = doc.documentElement;
    document.getElementById('svgHolder').appendChild(document.importNode(svg, true));
  })
  .catch(console.error);

DOMParser + importNode preserves namespaces and is widely used for this pattern. Sanitize if SVGs are untrusted. (developer.mozilla.org)

If you must keep <object>: either host the SVG on the same origin or include the Ample runtime inside the external SVG document (so the runtime runs inside that nested document), and remember you can access an object’s document with contentDocument / getSVGDocument only when same-origin. (w3.org)

Notes tying back to earlier replies: was right that embed/object are standard options, but those tags bring the separate‑document and mime/CORS pitfalls mentioned above; in practice inlining via Ajax/DOMParser is the simplest way to make Ample see and polyfill an externally stored SVG.

Recommended Answers

All 6 Replies

Member Avatar for Member #949455

@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:

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="" 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="" />
        </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.

Member Avatar for Member #949455

But the Internet Explorer 8 still does not display the image. So this is not solution.

I feel you didn't read this chart from asmplsdk:

http://www.amplesdk.com/about/compatibility/

and also read this too:

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 Member #949455

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:

and this:

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.