Cocktail and SVG

[Tom]

Hi!

There are any method to use SVGs in img tags with Cocktail (from Silex Lab)?
If the answer is yes, then how?
How can be extended Cocktail to handle the SVG files?

Thanks for any idea!

[Yannick Dominguez]

Hi,

I'm one of Cocktail's maintainer at Silex Labs.

Cocktail currently doesn't support SVG. It can be implemented but it's not trivial.

Basically you need to create an SVG DOM, similar to the one implemented for HTML:
https://github.com/silexlabs/Cocktail/tree/master/cocktail/core/html

Then you'll need to actually render the SVG elements to the screen using a graphic library (most likely NME/OpenFL),

like it's done for the HTML elements here:
https://github.com/silexlabs/Cocktail/tree/master/cocktail/core/renderer

Let me know if you want more info.

Cheers,

Yannick

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
---
You received this message because you are subscribed to the Google Groups "Haxe" group.
For more options, visit https://groups.google.com/d/optout.

[Tom]

Hi Yannick!

Thanks for your answer. One more question: can be embed a haxe script rendered Shape, MovieClip into a cocktail rendered html?

[Yannick Dominguez]

Yes you can,

actually it's simpler the other way around. You can embed a Cocktail view inside your flash app, like you would a webview in an iOS or Android app.

Check out this tutorial:
http://www.silexlabs.org/haxe/cocktail/tutorials/embedding-cocktail-in-a-flash-or-nme-app/

Best,

Yannick

[Tom]

Hi Yannick!

I solved it with your advice. Maybe not so elegant, but works, with some limitations - import format.SVG is needed.
I modified the cocktail.port.platform.flash_player.ImageResource.hx to load the image into ByteArray first with a _bin_loader:URLLoader.

        cast(_bin_loader.data, ByteArray).position = 0; // to the first byte - maybe this is not needed here
        if (cast(_bin_loader.data, ByteArray).readUTFBytes(5) == "<?xml") // SVG loaded
        {
            cast(_bin_loader.data, ByteArray).position = 0; // to the first byte
            var svg:SVG = new SVG( cast(_bin_loader.data, ByteArray).readUTFBytes(_bin_loader.data.length) );
            var sh = new Shape();
            svg.render(sh.graphics, 0, 0);
            // create a transparent bitmap
            nativeResource = new BitmapData(Math.ceil(sh.getBounds(sh).right), Math.ceil(sh.getBounds(sh).bottom), true, 0);
            nativeResource.draw(sh);
           
            setSVGIntrinsicDimensions(nativeResource.width, nativeResource.height);
           
            onLoadComplete();
        }
        else // This is not SVG, so this is a normal image.
        {
            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onNativeLoadComplete);
            _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onNativeLoadIOError);
            _loader.loadBytes(_bin_loader.data); // load the bytes
        }

The first limitation of this solution, that we need to convert the vector SVG into BitmapData.
The second one is that if the SVG is wrong positioned, and some graphics extends over the left, or top, that will be cropped.

That's all!

Thanks again your help, I'm appreciate it!
Cheers!Cheers!
Tom

[Yannick Dominguez]

Glad you found a solution, it's a nice trick !

Yannick

[Tom]

One more thing. I see, that cocktial render the html into a Bitmap, so if I zoom in, the pixels will be visible.
So, if I need to scale the whole view - eg. for UHD display - I need more tricks, or I missed something?