The only thing that will give you SVG interactivity without adding ZIM interactivity is in a Tag. And for that, you just pass the tag an svg tag like you would use in HTML as the parameter of the tag.add(svghere) method. Where svghere is the <svg> or a reference to the <svg>.
I think i am confused. I want to use tempSVG = new Tag(650,350).center().add(mySVG), where mySVG is an mySVG.svg file. But, I need to load mySVG.svg in ZIM first. In older ZIM version, i use mySVG = frame.asset('mySVG.svg') ; zog(mySVG). And it works. Now, in ZIM latest version (since ZIM cat 04), mySVG = frame.asset('mySVG.svg') does not work anymore. So, how can i load a plain svg file in ZIM just like before, before using it with ZIM Tag?
If you want to load it through ZIM... you don't need to - you can pass in zid("idofSVG") - then I think you could preload it if it is a separate file, and then use new SVG("file").svg in the new Tag()
So far i am confused on how to preload or load the svg file. Before i was able to load with const mySVG = frame.asset('svgfile.svg'), when i zog(mySVG), it gives me an xml object. With the latest of ZIM, zog(mySVG) gives me container. Using new SVG gives me a bitmap. If i force new SVG with bitmap:false, it gives me an error. Can you give me an example in ZIM on how to load a text file?
Just testing and the SVG is not loading. Something has changed somewhere... I tried back to 014 - and no luck not sure... the code was working. But now, the onload is not being called in chrome and firefox - so not just a chrome change. Will try and look into it this afternoon.
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
img.onload = function() {
var bitmap = new zim.Bitmap(img, width, height);
callback(bitmap, params);
DOMURL.revokeObjectURL(obu);
};
var obu;
if (document && document.Blob) obu = DOMURL.createObjectURL(new document.Blob([svgString], {type: "image/svg+xml"}));
else obu = DOMURL.createObjectURL(new Blob([svgString], {type: "image/svg+xml"}));
img.src = obu;
Thank you to take a look at this issue. I sent 2 zip file, one containg the svg file and the other containing a working html with ZIM script older version (ZIM_9.3.0.js) and jquery. It works like a charm. As it has been mentionned in the ZIM docs, after ZIM cat 04, SVG will be automatically converted to image. And from ZIM new SVG, the characteristics of SVG itself are not accessible. If we can access to SVG characteristics, we can then fully use ZIM new SVG. Thanks again for the support.
Not sure what is going on. I have to go out. It must be something simple. Will work on it tomorrow.
Just testing more - and it does work fine - if loading from a server. So it seems local loading of SVG is not - and never did for svgToBitmap() - even our early examples at ZIM SVG was the same.
https://zimjs.com/svg/test.html - with Tag
https://zimjs.com/svg/test2.html - with SVG
Does this work for you?
const t = new Tag(500,500)
.center()
.add("<img width=500 height=500 src=lady.svg>")
I was also having a problem, and still am, where when I load svg to the server it is not working... it is getting corrupt or something. The old svg that was already on there before is working but as soon as I overwrite it with the same file, it no longer works. I tried VSCode and Filezilla - both caused a problem... so that was making testing difficult as you would imagine.
Ah... found it. xmlns:rdf="http://www.w3.org was being replaced maybe automatically with xmlns:rdf="https://www.w3.org - with the s for secure. It does not work with the s for secure. That is, as far as I can tell, a bug in the spec. It caused three.js to break in the browser as well. I told them, and I think they did something about it.
1 Like
Yes, this works on my environent.
Oh! It is at the consortium level. All we have to do is to wait for their fix. As usual, you are amazing Dr. Abstract. And i have been following you for more then 5 years just for that. Thank You.
1 Like
Thanks. I will stick with ZIM load instead of using javascript fetch.
1 Like