SVG in widgets - any roadmap?
-
- VIP Livecode Opensource Backer
- Posts: 93
- Joined: Tue Nov 17, 2009 6:47 pm
- Location: Wellington, New Zealand
Re: SVG in widgets - any roadmap?
I sympathise Frans with the challenges of figuring out the various SVG code formats. I went through a similar process but settled on Affinity Designer because it seems to be able to open a variety of SVG source files and then export them out using clean, predictable code. I wouldn’t recommend writing a translation stack unless you really know what you are doing. That may become a pathway to simply more frustration given all the variations in SVG code.
Why not download a demo version of Affinity Designer (Windows or Mac), use it to open an Illustrator produced SVG file, re-export it without change, and then see whether that SVG code can be understood by the color icon widget.
I do understand your point about the challenges facing Livecode when building SVG into the engine. I’ve no idea how that will get sorted, but the development team can work magic so here’s hoping that it will eventually “just work.”
I agree that my widget has a reasonably short half life. It does provide a working solution for now however, and when used with Affinity Designer SVG output seems to perform pretty consistently. I would like to build gradients into the parsing routine as well, but for the moment time doesn’t allow.
All the best!
Why not download a demo version of Affinity Designer (Windows or Mac), use it to open an Illustrator produced SVG file, re-export it without change, and then see whether that SVG code can be understood by the color icon widget.
I do understand your point about the challenges facing Livecode when building SVG into the engine. I’ve no idea how that will get sorted, but the development team can work magic so here’s hoping that it will eventually “just work.”
I agree that my widget has a reasonably short half life. It does provide a working solution for now however, and when used with Affinity Designer SVG output seems to perform pretty consistently. I would like to build gradients into the parsing routine as well, but for the moment time doesn’t allow.
All the best!
-
- VIP Livecode Opensource Backer
- Posts: 5
- Joined: Tue Oct 17, 2006 1:22 pm
- Location: Germany
- Contact:
Re: SVG in widgets - any roadmap?
thanks Peter, I will give Affinity a go although I was not fond of another product of them , can' t recall the name.
Writing a translation stack as a library stack may actually be what the team are doing to deal with the same problem of diversity;-) Their "advantage" being that they know what B format they're aiming for. I have written extensive dictionary parsers back in my linguistic studies in Utrecht , so that sort of comes " natural" , I'll see if I can find some more info on which Rome we would we writing various roadmaps for , excuse the pun.
Cheers
frans
Writing a translation stack as a library stack may actually be what the team are doing to deal with the same problem of diversity;-) Their "advantage" being that they know what B format they're aiming for. I have written extensive dictionary parsers back in my linguistic studies in Utrecht , so that sort of comes " natural" , I'll see if I can find some more info on which Rome we would we writing various roadmaps for , excuse the pun.
Cheers
frans
Software development and Project Management. Audio for Apps
-
- VIP Livecode Opensource Backer
- Posts: 3581
- Joined: Mon Jan 22, 2007 7:36 am
- Location: Berkeley, CA, US
- Contact:
Re: SVG in widgets - any roadmap?
I've been working on this for the last couple of days (and in the process getting my share of LCB frustration and learning a lot of un- or under- documented things. So here's what I've got to date... it does a better job of parsing more formats (hopefully will get frans farther along).
Peter- I took some liberties with refactoring the code to make it easier to read and maintain. Hope that's ok with you. I'm finding the lack of a debugger for LCB to be a real pain.
Peter- I took some liberties with refactoring the code to make it easier to read and maintain. Hope that's ok with you. I'm finding the lack of a debugger for LCB to be a real pain.
- Attachments
-
- Widget_Color_version_0.90.lcb.zip
- .lcb source
- (131.15 KiB) Downloaded 438 times
PowerDebug http://powerdebug.ahsoftware.net
PowerTools http://www.ahsoftware.net/PowerTools/PowerTools.irev
PowerTools http://www.ahsoftware.net/PowerTools/PowerTools.irev
Re: SVG in widgets - any roadmap?
Indeed that has always been my hope too...I do understand your point about the challenges facing Livecode when building SVG into the engine. I’ve no idea how that will get sorted, but the development team can work magic so here’s hoping that it will eventually “just work."
I've been observing this thread for a while, as well as the approach taken with great interest; that together with the languishing SVG widget PR I wrote a long time ago (its dependence on nanosvg being a significant problem for various reasons) have led me to come up with a potential 'other' solution which might be a good way forward (in general) [ to give you a hint, it exploits the approach used by the SVGL stack on LiveCodeShare - 'LiveCode' Ian's first project when he joined the company ].
I spent Bank Holiday Monday here in Scotland working on the code for it, and I intend to present it as two sessions in LiveCode Global (LCG). Don't worry though, I'll be pushing the code up as a PR well before those talks (it will become a part of LiveCode Community) - so even if you don't see me talk about it at LCG you'll all still be able to grab the code and take a look.
I should say that I hope none of you think that the effort here is wasted just because 'HQ' is finally getting round to doing something - indeed, without having seen this work and thread I probably wouldn't have had the idea I have had... Also one of great things about widgets is that they are all nice and independent blobs which can all co-exist, there are many ways to skin a cat - I'll just be adding my approach to the mix!
Re: SVG in widgets - any roadmap?
Actually one thing I have been thinking that we need is a repository of example SVG files which we can use to test SVG display / parsing and such against... If I setup a public repo on github for such a thing, would any of you who have files that can be shared under a CC (creative commons) type license mind contributing? The more SVGs we have from different sources, the easier it will be to get LiveCode's SVG support (however it is done, and whatever widget or libraries it uses) as good as it can be.
-
- VIP Livecode Opensource Backer
- Posts: 93
- Joined: Tue Nov 17, 2009 6:47 pm
- Location: Wellington, New Zealand
Re: SVG in widgets - any roadmap?
Thanks Mark and I feel flattered that you have taken my efforts and kicked the parsing routine into much better shape with your experienced eye. I will enjoy going back through the code and learning from how you have reorganised some aspects. I might also have a go at gradients now that the flow is easier to follow. I'd like to have at least a rudimentary gradient capability for creating backgrounds which scale perfectly. Exciting!mwieder wrote:I've been working on this for the last couple of days (and in the process getting my share of LCB frustration and learning a lot of un- or under- documented things. So here's what I've got to date... it does a better job of parsing more formats (hopefully will get frans farther along)...
Peter- I took some liberties with refactoring the code to make it easier to read and maintain. Hope that's ok with you. I'm finding the lack of a debugger for LCB to be a real pain.
Time I think to add your name to the widget authors
PS I have been thinking about your idea of a blog to describe why I wanted the widget, and how I went about it as a means of learning and understanding LCB. There were a few "aha" moments which I'd be happy to share. Maybe when a wet "Bank holiday" rolls around I might just give it a go. My hunch is that the Livecode community hasn't yet fully grasped the value of SVG-based widgets for a whole range of uses.
To give a simple example, I opened this cityscape SVG image in Affinity Designer, exported it out and loaded it without change into the color widget. With a few lines of LCS code in the card script (and fixed aspect ratio turned off) you have a background that adjusts perfectly to any card size.
Last edited by pthirkell on Wed May 31, 2017 12:51 pm, edited 1 time in total.
-
- VIP Livecode Opensource Backer
- Posts: 93
- Joined: Tue Nov 17, 2009 6:47 pm
- Location: Wellington, New Zealand
Re: SVG in widgets - any roadmap?
Thank you Mark for chiming in at this stage and personally I don't feel that the effort has been wasted at all, for a variety of reasons. I do admit however to have been waiting (a little impatiently) for SVG capabilities in Livecode to be enhanced - and so delighted to hear that you are again working on it, together with planned sessions at LC Global. I will certainly be tuning in (albeit in the middle of the night on occasionsLCMark wrote: I intend to present it as two sessions in LiveCode Global (LCG) ... I should say that I hope none of you think that the effort here is wasted ... without having seen this work and thread I probably wouldn't have had the idea I have had
This is a great idea and one that I would value. I just grabbed SVG files from here and there to test, including in particular from flat-icon ... but it would help a lot to see the types of files that people are using and for what purposes (design of controls, logos, backgrounds, smart shapes etc). Apart from broadening the code base used for testing, it would help to provide inspiration for how SVG can dramatically enhance the quality and flexibility of Livecode interface designs. So yes count me in!LCMark wrote: one thing I have been thinking that we need is a repository of example SVG files which we can use to test SVG display / parsing and such against...
Re: SVG in widgets - any roadmap?
Hi All,
You could download SVG examples from this forum thread:
http://forums.livecode.com/viewtopic.php?f=10&t=25612
and check the scripts of this attached stack that imports two Inkscape SVG files with gradients,
included inside the compressed folder.
By the way, a script that "flattens" all SVG transforms (including gradient transforms) would be really useful for all designers in general, not only LiveCode users.
https://stackoverflow.com/questions/407 ... mmatically
Remember that SVG Tiny "does not support gradients, transparency, clipping, masks, symbols,
patterns, underline text, strike through text, vertical text, or SVG filter effects, but SVG Tiny 1.2
may include animation" as explains a webpage from Library of Congress website.
SVG Basic have limited support for some of these features:
https://www.w3.org/TR/2001/WD-SVGMobile-20011030
Al
You could download SVG examples from this forum thread:
http://forums.livecode.com/viewtopic.php?f=10&t=25612
and check the scripts of this attached stack that imports two Inkscape SVG files with gradients,
included inside the compressed folder.
By the way, a script that "flattens" all SVG transforms (including gradient transforms) would be really useful for all designers in general, not only LiveCode users.
https://stackoverflow.com/questions/407 ... mmatically
Remember that SVG Tiny "does not support gradients, transparency, clipping, masks, symbols,
patterns, underline text, strike through text, vertical text, or SVG filter effects, but SVG Tiny 1.2
may include animation" as explains a webpage from Library of Congress website.
SVG Basic have limited support for some of these features:
https://www.w3.org/TR/2001/WD-SVGMobile-20011030
Al
Re: SVG in widgets - any roadmap?
@capellan: Thanks for the links - I'll start off the repo with some files from there (as long as I can determine license ). I'll try and get it setup next week.
In terms of flattening SVG transforms, then that should be possible - you can do the same thing with styles/attributes too - essentially that is what SVGL does, although it targets the SVGL mini-language rather than SVG. Indeed, one way to structure the process is to first flatten the SVG as XML (so that the SVG has a very strict structure suitable for translation to SVGL), then convert the flattened SVG to SVGL. I shall have a think.
In terms of SVG Tiny - then I think the first thing to make sure is supported 100% is the SVG Tiny 1.2 (which has some gradients and transparency) -
https://www.w3.org/TR/SVGTiny12/.
However, due to the way SVG works, we can add to that quite easily - up to the limit of what the engine's 'canvas' module / libgraphics library can do at least. Then its a case of expanding support as our graphics library is extended to support the rest of the SVG features. Right now we could do (at the very least) SVG Tiny 1.2 + patterns + more general transparency options + blend modes + radial gradient + maybe some clipping (I'm not sure libgraphics has 'clip to path' quite yet, but that is something we could add).
In terms of flattening SVG transforms, then that should be possible - you can do the same thing with styles/attributes too - essentially that is what SVGL does, although it targets the SVGL mini-language rather than SVG. Indeed, one way to structure the process is to first flatten the SVG as XML (so that the SVG has a very strict structure suitable for translation to SVGL), then convert the flattened SVG to SVGL. I shall have a think.
In terms of SVG Tiny - then I think the first thing to make sure is supported 100% is the SVG Tiny 1.2 (which has some gradients and transparency) -
https://www.w3.org/TR/SVGTiny12/.
However, due to the way SVG works, we can add to that quite easily - up to the limit of what the engine's 'canvas' module / libgraphics library can do at least. Then its a case of expanding support as our graphics library is extended to support the rest of the SVG features. Right now we could do (at the very least) SVG Tiny 1.2 + patterns + more general transparency options + blend modes + radial gradient + maybe some clipping (I'm not sure libgraphics has 'clip to path' quite yet, but that is something we could add).
Re: SVG in widgets - any roadmap?
Implementing Clip to Path is essential because designers use this feature very often. Actually, we could use structural blends to provide a similar effect within LiveCode but it's more intuitive if a lcs or lcb script recreate this effect while importing clipped graphics from svg. Adding Blur filter and other SVG filters could be very useful for designers too. https://www.smashingmagazine.com/2015/0 ... s-awesome/
By the way, in the same way that Livecode imports text, bitmaps, video, audio but does not provide built-in editors to modify them, this platform could import svg graphics but does not need to provide a built-in editor for svg graphics.
By the way, in the same way that Livecode imports text, bitmaps, video, audio but does not provide built-in editors to modify them, this platform could import svg graphics but does not need to provide a built-in editor for svg graphics.
Re: SVG in widgets - any roadmap?
Yes - I very much agree. The main use-case we need to address first is that of using SVG files as 'icons' - as replacement for PNGs (which whilst great, are less great in the hi-dpi world we live in!).By the way, in the same way that Livecode imports text, bitmaps, video, audio but does not provide built-in editors to modify them, this platform could import svg graphics but does not need to provide a built-in editor for svg graphics.
Of course, a SVGEditor object which allows you to dynamically manipulate the SVG DOM and all the nodes within it (creating / destroying) etc. with interactive editing would be great, but not what is 'most' needed in the first instance.
Re: SVG in widgets - any roadmap?
Now that I remember, some years ago I posted an updated version of Ian's stack to a forum thread: SVGL_2015_rev02.zip
Details of changes included in this version:
1) scientific notation numbers inside paths are converted to
floating-points numbers using LiveCode function: format("%f",tNumber)
2) A resizestack script was included for both stacks: Import and SVGL.
3) Original SVG drawing "Tiger.svg" is included again inside field "commands" of stack SVGL.
Just click the button Draw! to draw this impressive artwork.
Mark, if you are going to update Ian's stack, check first the small changes that I made in this version 02. These small changes were possible after printing on big type all 25 pages of these scripts.
Although I keep these printed pages around my working desk, I stopped working on this after I found no way to import vector patterns, masks, clipping paths and fractional line sizes like 0.25 or 1.72, because Livecode only displays line sizes using integers like 1, 2, 3, 4, 5, etc...
Al
Details of changes included in this version:
1) scientific notation numbers inside paths are converted to
floating-points numbers using LiveCode function: format("%f",tNumber)
2) A resizestack script was included for both stacks: Import and SVGL.
3) Original SVG drawing "Tiger.svg" is included again inside field "commands" of stack SVGL.
Just click the button Draw! to draw this impressive artwork.
Mark, if you are going to update Ian's stack, check first the small changes that I made in this version 02. These small changes were possible after printing on big type all 25 pages of these scripts.
Although I keep these printed pages around my working desk, I stopped working on this after I found no way to import vector patterns, masks, clipping paths and fractional line sizes like 0.25 or 1.72, because Livecode only displays line sizes using integers like 1, 2, 3, 4, 5, etc...
Al
Re: SVG in widgets - any roadmap?
Has anyone put this color svg package together with a relevant set of files, ie,
manifest.xml
module.lcm
api.lcdoc
I know you can copy the ones from others but, particularly with the manifest, it will be missing several parameters that would be essential. A complete package would be just useful for anyone wanting to just start using it.
Pi
manifest.xml
module.lcm
api.lcdoc
I know you can copy the ones from others but, particularly with the manifest, it will be missing several parameters that would be essential. A complete package would be just useful for anyone wanting to just start using it.
Pi
-
- VIP Livecode Opensource Backer
- Posts: 4027
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: SVG in widgets - any roadmap?
Hi Pi,
But you can use the .lcb file, put it into a folder. Then open that -lcb file from the Extension Builder and press button "Test Extension" (from the tooltip). If it compiles (and it works I just tried using LC 9.5.0) then you can install the widget. If you do not want to install it you will find all the files in the folder you have put the .lcb file into.
Kind regards
Bernd
I tried to compress the whole thing but it is too large to upload.A complete package would be just useful for anyone wanting to just start using it.
But you can use the .lcb file, put it into a folder. Then open that -lcb file from the Extension Builder and press button "Test Extension" (from the tooltip). If it compiles (and it works I just tried using LC 9.5.0) then you can install the widget. If you do not want to install it you will find all the files in the folder you have put the .lcb file into.
Kind regards
Bernd
Re: SVG in widgets - any roadmap?
That worked. Thank you Bernd