Widget for importing SVG images in LC ?

[ValiantCuriosity]

I use SVG images in the app that I'm trying to re-write in LC. These sorts of vector images seem important for responsive design in iOS. The .png images become pixelated when they are increased in size.

It appears as though there is no simple way to import color SVG images into LC. I notice a lot of forum discussions that go back to 2016 related to the issue of SVG images but I can't see any way to import them.

Am I missing some obvious way to import my SVG images/logos in LC?

TIA
-Rachel

[richmond62]

No, I don't think you are missing anything: there has been an ongoing discussion and a lot of "tooth sucking".

I worked out a very, very primitive stack to import monochrome SVG images made in Inkscape,
but that is not much good.

For instance, I wanted a 3 colour svg image, so had to import each colour as a separate
monochrome SVG image, layer the things, and then colourise each layer internally.

The "man" in this respect is, however, not myself, but Alejandro El Tejada . . .
so look for his postings and uploads.

[bogs]

I myself don't use svg, when I recently had need to convert some I shelled out to image magick, however, as well as what Richmond said, there are other links to look at -
BYU Lc svg
Brian's icon tool
ClipArtGuy's icon(s) tool

Funny, I thought all this was what that svg widget was for, and it is, kinda I guess. All of the above are, as far as I know, the top existing solutions aside from Greg Miller (pink) and Alejandro.

[ValiantCuriosity]

Well...dang!

SVG seems so important now. Maybe LC creators will come up with something out of their magic Hats.

-Rachel

[richmond62]

Maybe LC creators will come up with something out of their magic Hats.

Yeah, well, maybe when they consider the 'promises' they made during a Kickstarter thing a while ago.

[bogs]

Good morning Richmond! (Afternoon where you are).

[richmond62]

Good "moaning" bogs!

[jacque]

Am I missing some obvious way to import my SVG images/logos in LC?

I just open the SVG in BBEdit (any text editor should work) and copy the path to the clipboard. The part you copy must start with the first Move instruction. In LC, change the path of an existing SVG by pasting what you copied. Complex paths may not be supported but most work fine.

[ValiantCuriosity]

@Jackie,
Wow! I will give this a try and see. Thank you. The work around would sure open up some much better options for development. As it stands now, when trying to use responsive design, I end up with image pixelation. That is especially true of background objects. Not sure about "paths" since I need these to be compiled with the iOS app, but I will definitely try this option out.

As I'm sure you are aware, responsive design can be a nightmare. I'd love to create for Android, but have found it so confusing with sizes, resolutions, video, etc that I gave up. I hope that LC developers will continue to work on the responsive design piece of the LC environment. I've tried all of the various code options:

Code: Select all

set the fullscreenmode of me to "exactFit" 

Each of them have definite drawbacks. Users do NOT want the letterbox these days. "exactFit" seems best for now. It would work much better when combined with an easy way to import SVG graphics.

However, I can only imagine the nightmare that LC coders have had trying to keep this project alive for so many years and update it successfully to today's standards. It is truly a work of genius that they have done so well.

Thank you, thank you, thank you for your help

What a great forum.
-Rachel

[bogs]

but have found it so confusing with sizes, resolutions, video, etc that I gave up.

Jacque and Richard and a bunch of others will be able to tell you better (cause I don't do mobile), but you can write your own routines to scale whatever part of the interface you want to whatever size you need, even if you don't know the size in advance, and it isn't terribly difficult to do.

One way to do that is in the livecode lessons (not necessarily the best way, but not the worst either )

[jacque]

As I'm sure you are aware, responsive design can be a nightmare. I'd love to create for Android, but have found it so confusing with sizes, resolutions, video, etc that I gave up. I hope that LC developers will continue to work on the responsive design piece of the LC environment. I've tried all of the various code options:

Code: Select all

set the fullscreenmode of me to "exactFit" 

Each of them have definite drawbacks. Users do NOT want the letterbox these days. "exactFit" seems best for now. It would work much better when combined with an easy way to import SVG graphics.

Actually, "exactFit" will stretch your layout to fit the current screen and is usually a poor choice for mobile because controls won't scale proportionally. Things onscreen will appear stretched or distorted. I mostly use "showAll" or "noBorder", both of which scale proportionally. If you plan ahead for where the empty side bars will appear, they will be unnoticeable for the most part. This generally means providing backgrounds that extend beyond the card dimensions, or providing a backgroundColor or backgroundPattern on the card which will fill in the empty areas so there are no black bars.

I find fullscreenMode to be the easiest way to scale for different screen sizes (remember that Apple has also introduced a non-standard size with the last iPhone) and it automatically works with all the different Android screen dimensions. But the other way to manage it, which we all used before fullscreenMode was available, is to script the position and size of all the screen elements based on their relative placement to the actual screen size. This takes longer to write but can be more accurate and doesn't require including a background fill and outsized horizontal backgrounds behind navigation and tool bars.

Below is an example of an extended Android header bar. There will be no empty areas at the sides no matter how wide the screen is. The card color is set to white, so those areas will fill in white at the edges.

[ValiantCuriosity]

Thanks again Jackie.

I think that some of the materials that I've been reading and then applying in code, were written before these additions were available. Either that, or they weren't mentioned in the docs that I'm studying. I appreciate the "heads up". I'll give your solutions a try today.

Progressing slowly, but surely. LC is an amazing piece of work, but there is a LOT to learn... If it can make a coder out of me, that is almost a miracle.

OH, and Bogs,
Just you wait. I have about a thousand questions reserved for you. Problem is, that I haven't gotten far enough in the learning process to understand any of the answers.

Smiles,
-Rachel

[jacque]

There's a critical mass of info you need, and once that kicks in everything else falls into place and you get that eureka moment. It usually only takes a few weeks so you're right on schedule.

A lot of the materials you're reading are probably old, but the basics haven't changed in forever so it isn't wasted time.

[bogs]

OH, and Bogs,
Just you wait. I have about a thousand questions reserved for you. Problem is, that I haven't gotten far enough in the learning process to understand any of the answers.

Oh I dunno about that, anything I could answer with authority would probably be in the 'baby steps' category anyway

There's a critical mass of info you need, and once that kicks in everything else falls into place and you get that eureka moment. It usually only takes a few weeks so you're right on schedule.

In a week or two, you will FAR surpass where I am after nearly 7 years

[richmond62]

At the risk of being accused of being repetitive . . .