Problems with my inline SVG and embeded SVG

Question

I have a simple SVG map like this :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg>
  /*The opening svg tag is longer, thanks to attributes, but for the sake of simplicity, 
    i cut it short like this....*/
  <script xlink:href="/resources/helper_functions.js"    type="text/ecmascript"/>
  <script xlink:href="/resources/mapApp.js" type="text/ecmascript"/>
  <script xlink:href="/resources/snap.svg-min.js" type="text/ecmascript"/>

 //it is almost 1 Mb filesize, so shortened it, for simplicity..
</svg>

It works fine as it is, as you can see it here

Now, because of the rather lengthy loading time, i would like to add some simple loading animation to it. I've been digging here and there, and i know some simple tricks, however they are only work for html format file, not on svg format file. So i've put my map in separated html file, one for inline svg, the other for embeded svg (svg file inside <embed> tag of a <html> document.

And thus, the problems :

Embeded svg : Here it is. The file is quite simple as you can imagine, i merely embed the svg file inside html file. Problem is : you can't visit external link from it, try hover onto the MENU to bring out the popup menu, and and click anywhere, i linked all of them to google. You can never reach google if you click it. Try compare it to the normal svg file above, where the links work just fine.
Inline svg : you can see it here. I copy the content of the svg file, paste it into a standard html file, nothing more. Here is where the problem getting worse : I cannot bring out the popup MENU when i hover onto the plat, and the locations don't blink when i hover it. Try test this by comparing to the original svg file above. Wich is quite annoying; i changed nothing when i pasted the file, yet problem arise. Now, i've been working quite some time with this file to recognize this particular symptom : this happens because the 2 beginning external scripts cannot be detected :
```
<script xlink:href="/resources/helper_functions.js" type="text/ecmascript"/>
<script xlink:href="/resources/mapApp.js" type="text/ecmascript"/>
```
Wich begs the question : WHY? I merely copy-paste it, it works fine in the normal svg, it also okay in the embeded svg (despite of the other problem).

(FYI these 2 .js files are used to translate Window client coordinate into svg viewbox coordinate)

Any help please?

Oh, and this is still desktop version, no mobile version yet...

I'm not so sure packing all this interactivity into the SVG itself is a good idea, the script files can take valuable time to load too. — SeinopSys, Dec 07 '15 at 20:01
Right now, i'm focusing my effort to make the page works properly, after that, i'll optimize the code. BTW @DJDavid98, what is the correct syntax to link an external ECMAScipt file into an SVG file? Sometimes, i forget these simple things.... — Rickard, Dec 08 '15 at 01:55

score 0 · Answer 1 · answered Dec 07 '15 at 15:23

Put a loader gif in a div and put it at the top of the body. Position as needed. This will load first, before the rest of the DOM (it wont hide until the SVG is loaded as well as the rest of the page)

In a jQuery ready function, add a method that hides the loader div on page load. Anything in the ready function will not load until the DOM load is completed.

$( document ).ready(function() {
  $('#loader).hide();
});

Another method, if you want to apply a loader to individual images, you could try a lazy load library like this one. http://www.appelsiini.net/projects/lazyload

I've already know this method @Danny, this is not my question. My problem is that my svg files behave strangely when embed-ed or inline-ed into `` format file. — Rickard, Dec 09 '15 at 03:12

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

I can give you one tip to speed up the loading of the SVG: Right now, its full of duplicated embedded PNG images. For example, this hut is base64-encoded five times inside your SVG:

Instead of embedding those images, let the SVG link to external image files, and you may find that your SVG loads fast enough!

Some info on the difference between embedding and linking under "Which is which?" here: http://libregraphicsworld.org/blog/entry/inkscape-embedding-or-linking

Edit - Why the inline version doesn't work:

The external scripts aren't loaded because the <script> tags aren't closed properly.
Self-closing tags aren't valid in html5, so in your three script tags you need to change .../> to ...></script>.
It looks like the scripts also need some changes now that the SVG is no longer the root document, but the last details should be easy to fix. If you aren't already, look at the error messages in your browser's developer console.

edited May 23 '17 at 11:54

Community

1
1

answered Dec 07 '15 at 19:49

Sphinxxx

12,484
4
54
84

Thank you for the useful tips people, however none answer my original question : why my svg file behaves strangely inside `` format file? – Rickard Dec 09 '15 at 03:21
I'll try to narrow down my question : in my `.svg` file, i use two external script `` and ``. These two lines behaves correctly inside `.svg` format file (meaning : my `.svg` file can detect and use the external script), however, it seems like like when i put my `.svg` file into inline `` format file, these resources cannot be read...can anybody point out why? – Rickard Dec 09 '15 at 03:30
@Rickard - I have edited my answer and suggested a fix that at least works in Chrome. – Sphinxxx Dec 09 '15 at 20:14
i'm afraid the closing tags are not the case since i've already closed mine properly with `.../>`, please see my original question above. Beside, i am using 3 external `.js` sources : `helper_function.js` and `mapApp.js` (for translating window coordinate to viewbox coordinate) and also `snap.svg-min.js`, the snap script. The external snap script _can be detected_ just fine by my scipt, while the previous two, can not. BTW, i've tested it on chrome, it didn't work, just try it if you will : http://pristineparadise.com/desktop/districts/sumba/eastSumba/eastSumbaInline.html. – Rickard Dec 10 '15 at 14:50
@Rickard - As I said, `.../>` is NOT the proper way to close your script tags. You need `...>`. Then it DOES work (at least in Chrome). – Sphinxxx Dec 11 '15 at 02:24
i embarassed myself by mis-reading your post, however, change the closing tag to `` seems doesn't change anything at all...check it http://www.pristineparadise.com/desktop/districts/sumba/eastSumba/eastSumbaInline.html – Rickard Dec 11 '15 at 14:33
Well, now the map gets rendered at least. If you open your browser's developer console (see the second bullet point in my edited answer), you'll see a bunch of error messages coming from your scripts. If you start at the top and fix those errors, the map should work again. – Sphinxxx Dec 11 '15 at 20:17

Problems with my inline SVG and embeded SVG

2 Answers2

Linked