Image resolution

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Tue Oct 04, 2022 5:42 pm

I spent half of yesterday trying to convert a PNG to SVG using several different online converters, and could not get a good result. The image had gradients, transparency, and shadows and SVG doesn't do those very well. It's better for line drawings and simpler shapes. That's why I asked to see a sample image, since some are better than others for SVG conversion.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 2637
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Image resolution

Post by stam » Tue Oct 04, 2022 6:25 pm

jacque wrote:
Tue Oct 04, 2022 5:42 pm
I spent half of yesterday trying to convert a PNG to SVG using several different online converters

If you’re on a Mac, give Vectornator a go. It’s free. I auto-traced a photo of a sunset with it (ie converted from JPEG to SVG) and the result was pretty good, given how many shades of orange and blue were in the image.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Tue Oct 04, 2022 8:01 pm

stam wrote:
Tue Oct 04, 2022 6:25 pm
If you’re on a Mac, give Vectornator a go.
Thanks, I'd never heard of it. It did create a pretty impressive SVG, but when imported into LC it became a blank, empty rectangle. Of course, I don't know what I'm doing.

The image is a title for my card game Casey's Solitaire which I'm using as a test stack for web deployment. The PNG doesn't display on a web build so I thought maybe an SVG would. If anyone wants to see if you can get it to display in LC (not necessarily on web, just in the IDE) I'll enclose the image here. Note that not only the background is transparent, but also the white insides of the letters.
Attachments
CaseysSolitaireHiRes556x256.png
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3990
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Image resolution

Post by bn » Tue Oct 04, 2022 8:46 pm

jacque wrote:
Tue Oct 04, 2022 8:01 pm
The image is a title for my card game Casey's Solitaire which I'm using as a test stack for web deployment. The PNG doesn't display on a web build so I thought maybe an SVG would. If anyone wants to see if you can get it to display in LC (not necessarily on web, just in the IDE) I'll enclose the image here. Note that not only the background is transparent, but also the white insides of the letters.
Jacque,
I tested the PNG image you posted and loaded it as control and referenced into a one card stack with just the images and a text field to check transparencies. It the image was visible in the stack as intended (with transparencies). Then I deleted the referenced image and tried to build for web local.
Using LC 9.6.9 rc1 it worked and opened in Safari displaying the image with transparencies but there was an error in the message box
transparentPNG-Test - err #2
exit(9481576) implicitly called by end of main(), but noExitRuntime, so not exiting the runtime (you can use emscripten_force_exit, if you want to force a true shutdown)
Using LC 10.0.0 dp4 it displayed the image (including transparencies) in Safari and no error in the message box.

Kind regards
Bernd

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Tue Oct 04, 2022 9:22 pm

Thanks Bernd, I see that it does display on Safari. I guess I never tried that, I've been testing in Firefox. So it's a browser-specific error after all.

I'm using LC 10.0.0 dp 4 and I didn't get an error. Thank you for pointing me at Safari and for taking the time to look at the image.

BTW, I do see the PNG in the IDE but I was wondering if anyone could convert it to SVG and see it into the IDE. Not you necessarily. :) Maybe someone who has Vectornator...

Edit: I reloaded the stack in Safari and the image didn't display again, same as Firefox. It shows up as a plain white box.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 2637
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Image resolution

Post by stam » Wed Oct 05, 2022 12:07 am

jacque wrote:
Tue Oct 04, 2022 8:01 pm
Thanks, I'd never heard of it. It did create a pretty impressive SVG, but when imported into LC it became a blank, empty rectangle. Of course, I don't know what I'm doing.
Well i thought i'd test this - but the image is not well suited for SVG, which is essentially line art.
There are too many gradients of same/similar grey colour which means trying to replicate this creates a very messy SVG.
Truly too awful to even show here.

One way around this is to auto-trace this as a sketch with high complexity & low contrast. I only tinkered with it for a few minutes and came up with this using 60% contrast:
logo contrast 60.jpeg

with 75% contrast:
logo contrast 75.jpeg

Having said that it just isn't as good looking as the bitmap; however you could just create the text is an vector graphics app, save as svg, import to LC and apply effects in LC, which gives you an infinitely resizeable text graphic (the image below shows the graphic on the right resized and with drop shadow applied):
svg text.jpg

As such i'd guess the best way to 'convert it to SVG' is to actually create it as SVG to start with with a vector graphics app - or if you want have pretty gradients i guess PNG or similar is the way to go...

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Wed Oct 05, 2022 2:41 am

Thank you stam, those first two are actually better than the ones I got from the online converters yesterday. You should have seen those. Truly awful.

I like your text SVG very much, it's a nice effect. I may try that. Since the game hasn't been updated in 10 years it's probably time for a new look. Did you make the text in Vectornator?
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 2637
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Image resolution

Post by stam » Wed Oct 05, 2022 4:27 am

jacque wrote:
Wed Oct 05, 2022 2:41 am
I like your text SVG very much, it's a nice effect. I may try that. Since the game hasn't been updated in 10 years it's probably time for a new look. Did you make the text in Vectornator?
Thanks Jacque.
Surprisingly Affinity Designer, a paid product, doesn't do auto-tracing which Vectornator - a free app - does! (the auto-traces above were with Vectornator).I made the logo you like in Affinity Designer - but replicated it pretty exactly in Vectornator (which is fast becoming my favourite vector app...)

The font is Hobo Std (115 pt in Vectornator) and i reduced the tracking to -6 in the text settings (brings the letters closer together).
I then clicked the 'Create outlines from text" button to create the vectors, removed fill and added stroke 4 pt. You'll probably want to tinker with these settings.

The other thing to note is that while the image is infinitely scaleable, the you will likely need to change the dropShadow size and other effects in LC with big changes in image size as the effects are fixed and don't scale with image size (although you can probably do this programmatically).

Feel free to use the attached vectornator file - i included both the text version and the vector image of the logo for comparison.
(you'll need the font Hobo Std to replicate my vector image)

HTH
Stam
Attachments
Casey's Solitaire Logo.zip
(52.29 KiB) Downloaded 40 times

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Image resolution

Post by richmond62 » Wed Oct 05, 2022 9:36 am

Converting things from anything other than plain black and white in Inkscape is largely rubbish:
-
MMsvg.jpg
-
Ok: from Left to Right:

1. Original JPG from the internet.

2. Inkscape Trace Black and White.

3. Inkscape Colour #1

4. Inkscape Colour - the best I could manage.

And let's not go down the screamingly naive path I went this morning with a favourite painting
of mine by Camille Corot:
-
Camille-Corot.-Moellen.-ca.-1835-40-Inv.nr_.-286-WH.-Fotograf-Anders-Sune-Berg.jpg
-
Corot-Inkscaped.jpg
-
Although, to be honest, that looks a bit better than what it did with Minnie Mouse. 8)

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3990
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Image resolution

Post by bn » Wed Oct 05, 2022 8:26 pm

Just to add to the mix:

here is Corot made of 24 graphics all done in LC. Extracted from the Corot image Richmond posted.

Although reducing Corot to 24 colors is missing the point of Corot: it is all about subtle color differences...

Corot.png

As for the stack: you can pull apart the graphics in edit mode and see how it works. But do not change their size. Button "rearrangeGraphics" will restore the stacked graphics location.
For some effects see the buttons and option menu.

Kind regards
Bernd

CorotToGrcs.livecode.zip
(197.39 KiB) Downloaded 47 times

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Thu Oct 06, 2022 9:45 pm

stam wrote:
Wed Oct 05, 2022 4:27 am
Feel free to use the attached vectornator file - i included both the text version and the vector image of the logo for comparison.
(you'll need the font Hobo Std to replicate my vector image)
Thanks very much! I will experiment with it. I'd also like to try it myself but I couldn't find how to trace a font. I'm not very good with graphic apps, like I said, I don't know what I'm doing.

Edit: I understand now after re-reading your original instructions. I'm on my way. Thank you.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Thu Oct 06, 2022 11:57 pm

bn wrote:
Wed Oct 05, 2022 8:26 pm
here is Corot made of 24 graphics all done in LC.
That's amazing.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”