SVG in widgets - any roadmap?

Moderators: LCMark, LCfraser

pthirkell
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 85
Joined: Tue Nov 17, 2009 6:47 pm
Location: Wellington, New Zealand

Re: SVG in widgets - any roadmap?

Post by pthirkell » Thu May 25, 2017 12:24 pm

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!

frans
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5
Joined: Tue Oct 17, 2006 1:22 pm
Location: Germany
Contact:

Re: SVG in widgets - any roadmap?

Post by frans » Mon May 29, 2017 11:29 pm

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
Software development and Project Management. Audio for Apps

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2588
Joined: Mon Jan 22, 2007 7:36 am
Location: Berkeley, CA, US
Contact:

Re: SVG in widgets - any roadmap?

Post by mwieder » Mon May 29, 2017 11:54 pm

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.
Attachments
Widget_Color_version_0.90.lcb.zip
.lcb source
(131.15 KiB) Downloaded 45 times

LCMark
Livecode Staff Member
Livecode Staff Member
Posts: 949
Joined: Thu Apr 11, 2013 11:27 am

Re: SVG in widgets - any roadmap?

Post by LCMark » Tue May 30, 2017 6:30 pm

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."
Indeed that has always been my hope too...

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!

LCMark
Livecode Staff Member
Livecode Staff Member
Posts: 949
Joined: Thu Apr 11, 2013 11:27 am

Re: SVG in widgets - any roadmap?

Post by LCMark » Tue May 30, 2017 7:08 pm

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.

pthirkell
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 85
Joined: Tue Nov 17, 2009 6:47 pm
Location: Wellington, New Zealand

Re: SVG in widgets - any roadmap?

Post by pthirkell » Wed May 31, 2017 12:10 am

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.
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!

Time I think to add your name to the widget authors :D

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.
CityScape SVG example.jpg
Last edited by pthirkell on Wed May 31, 2017 12:51 pm, edited 1 time in total.

pthirkell
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 85
Joined: Tue Nov 17, 2009 6:47 pm
Location: Wellington, New Zealand

Re: SVG in widgets - any roadmap?

Post by pthirkell » Wed May 31, 2017 12:33 am

LCMark 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
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 occasions :?
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...
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!

capellan
Posts: 409
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: SVG in widgets - any roadmap?

Post by capellan » Thu Jun 01, 2017 4:12 am

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
SVGL_plus_Gradients_ALPHA1_Inkscape_SVG.livecode.zip
Compressed stack
(36.13 KiB) Downloaded 40 times

LCMark
Livecode Staff Member
Livecode Staff Member
Posts: 949
Joined: Thu Apr 11, 2013 11:27 am

Re: SVG in widgets - any roadmap?

Post by LCMark » Thu Jun 01, 2017 11:18 am

@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).

capellan
Posts: 409
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: SVG in widgets - any roadmap?

Post by capellan » Thu Jun 01, 2017 3:16 pm

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.

LCMark
Livecode Staff Member
Livecode Staff Member
Posts: 949
Joined: Thu Apr 11, 2013 11:27 am

Re: SVG in widgets - any roadmap?

Post by LCMark » Thu Jun 01, 2017 4:36 pm

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.
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!).

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.

capellan
Posts: 409
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: SVG in widgets - any roadmap?

Post by capellan » Fri Jun 02, 2017 3:58 am

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
SVGL_2015_rev02.zip
Compressed Folder
(98.69 KiB) Downloaded 34 times

Post Reply

Return to “LiveCode Builder”