Load and use SVG file as a string(plain text) file

Whit the latest version of ZIM, is there an example showing how to use svg file as a plain text file?
In previous ZIM version (ZIM_9.3.0.js), i was able to use svg in ZIM environment with ease and it worked. This is how i did:

const assets = ["mysvg.svg"]; let frame = new Frame("fit", 1024, 768, lighter, dark, assets); var mySVG = frame.asset("mysvg.svg"); // will convert data of SVGElement Object to string var svgStringData = $(mySVG).html() var textSVG = "
" + svgStringData + "
"; var tagSVG = new Tag(650, 350).center().add(textSVG);

I tried with const mysvg = new SVG("mysvg.svg").center(); But it is converted by default as an image. I have tried to change the attributes but it does not work. I will try to do more testing.

@kaviphimmasone - did you try setting the bitmap parameter to false? Are you wanting Blob and Squiggle, etc. versions of the SVG?

Yes, i did use bitmap:false. It is an svg map. It contains style to define interactivity. I will try to take out the style in the svg. It would be good to turn the path or group of paths to blobs and squiggle. I will work with the different parameters of ZIM SVG(). Let's see what results i can get. But again, with ZIM older version, it worked. But i need to upgrade and use the latest version of ZIM.

In the older version we had SVGContainer() and we still do... I do not think it changed. The bitmap:false directs it to the SVGContainer - but you could try it directly.

Thank you! i will give a try.

No, It does not work. The only way to make and svg fully work is using ZIM tag.
My question is: Is there a way to load an svg file as just a text with ZIM?
ZIM_9.3.0.js just does that with:
var mySVG = frame.asset("Blue_World_Map01.svg");
With ZIM the latest var mySVG = frame.asset("Blue_World_Map01.svg") gives a container.

Can you send us the SVG and we can do some testing. Loading into a container should not matter. Yes... as far as I know, all the same ways of loading SVG are still available. So not sure what the problem is until we test. The SVG() is just a wrapper for the same code as before but adds into a container.

Blue_World_Map01.zip (221.5 KB)
From a container which has svg, how can i access to the svg outterHTML? If i can access, i can make it work.

I think in both cases of bitmap and non-bitmap (blob, squiggle, etc) once the SVG is parsed, accessing the SVG in any way is not going to affect the canvas version. So probably the outerHTML will not affect it. Note, that we do not provide a tag property as there is no longer a connection.

Ah... just looked at the zip - yes... almost 7000 lines with rollovers. Did the rollovers work with the older version of ZIM? If so... then maybe I am wrong. Or was it just the initial shapes the worked?

you can also save svg files hidden on https://gist.github.com/ to test svg code with the RAW link.


Yes, the rollovers work with older version of ZIM. Even, when i uses styles such as applying colorgradient to a color inside the SVG.

Are you sure you did not use tag on your old one? Do you have a link to it?

I uses the ZIM Tag() on the old version. The problem is at during the load process where the ZIM old version loads the svg file as a plain svg and where the new version loads it as a container. This is the script:
<!doctype html>


zip file. Very samll, very simple.
Zim_Example_Handling_Pure_SVG - 04Small.zip (786 Bytes)

Yes... that is the SVG in a Tag - which would do the CSS and the rollovers. The ZIM SVG converts it to a bitmap or a blob/squiggle/shape - so no rollovers. The bitmap will probably handle the CSS but not the blob/squiggle/shape.

For the Tag, you do not have to load the SVG through ZIM. Just keep it HTML.

I do not know how to use https://gist.github.com. But i have provided a zip file of the svg and a zip file of the html which contains the ZIM script.

I still cannot use the svg file. Instead of loading an svg file i can load as an xml file or txt file. Is there an example on how to load a file of tpye xml or txt in ZIM?

This dog svg saved on gist.github
Used in this zapp

Yes it works, but the svg got converted to an image. I want as a plain svg. Within the svg, there is interactivity. So i cannot use ZIM SVG. So i can rename the mySVG.svg to mySVG.xml or mySVG.txt. Once loaded in ZIM, i can use a ZIM Tag to contain it. But, i do not know how to properly load and consume the mySVG.xml or mySVG.txt in ZIM.