SVG for Alejandro

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

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

SVG for Alejandro

Post by richmond62 » Sat Oct 17, 2015 7:00 am

Here's mine. Made with Inkscape.

I had to ZIP the file as this Forum won't accept SVG files.
RichmondSVG.png
Attachments
Richmond.svg.zip
Here is the SVG file.
(1.32 KiB) Downloaded 375 times

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

Re: SVG for Alejandro

Post by capellan » Sat Oct 17, 2015 7:59 am

Hi Richmond,

Many Thanks for posting this SVG file
generated using Inkscape 0.48 :D
This file imported without any problem.
Look at the attached zipped stack.

By the way, my Inkscape version (0.91 in Ubuntu)
is acting really weird, so I must reinstall
it tomorrow... :(

Alejandro

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

Re: SVG for Alejandro

Post by richmond62 » Sat Oct 17, 2015 1:21 pm

Here's one I made using LibreOffice.
Attachments
RichmondLoffice.svg.zip
(147.43 KiB) Downloaded 359 times

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

Re: SVG for Alejandro

Post by richmond62 » Sat Oct 17, 2015 1:23 pm

I did NOT have Inkscape installed on my "Big Computer" [currently put back to Xubuntu 64-bit 14.04]; so I installed Inkscape
via the terminal and 0.48 is what I got.

I'll have a bash at installing a more up-to-date version right now.

I'm going to go for an unstable version:

ppa:inkscape.dev/trunk

the system then, helpfully, told me that my installed version (0.48) was the most up-to-date version.

So, trying for a stable version: ppa:inkscape.dev/stable
joyless.png
So; let's try to install the thing with Synaptic:

Ah: that seems to be working: AND, the lesson is: Don't trust your terminal.

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

Re: SVG for Alejandro

Post by richmond62 » Sat Oct 17, 2015 1:40 pm

Ok, at last, after a bit of a fiddle, here's something
made in Inkscape .91:
RInkscape91.png
Attachments
RichmondInkscape91.svg.zip
(1.31 KiB) Downloaded 348 times

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

Re: SVG for Alejandro

Post by richmond62 » Sat Oct 17, 2015 2:28 pm

Here's an SVG image I made using Adobe Illustrator CS2 on my G5 PPC Mac:
RillustratorCS2.png
Attachments
RillustratorCS2.svg.zip
(973 Bytes) Downloaded 389 times

jameshale
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 474
Joined: Thu Sep 04, 2008 6:23 am
Location: Melbourne Australia

Re: SVG for Alejandro

Post by jameshale » Sun Oct 18, 2015 5:31 am

You might need to be more specific re the SVG.

Should the rectangles be grouped?
Should they be made from compound paths?

Anyway, the following is...
rects_grouped.png
rects_grouped.png (27.6 KiB) Viewed 11696 times
from Graphics by Autodesk (formerly iDraw by Indeeo)
rects_grouped.svg.zip
(1.07 KiB) Downloaded 385 times
Last edited by jameshale on Sun Oct 18, 2015 5:36 am, edited 1 time in total.

jameshale
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 474
Joined: Thu Sep 04, 2008 6:23 am
Location: Melbourne Australia

Re: SVG for Alejandro

Post by jameshale » Sun Oct 18, 2015 5:34 am

same as above but ungrouped
rects_ungrouped.png
rects_ungrouped.png (26.68 KiB) Viewed 11696 times
rects_ungrouped.svg.zip
(1.08 KiB) Downloaded 381 times

jameshale
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 474
Joined: Thu Sep 04, 2008 6:23 am
Location: Melbourne Australia

Re: SVG for Alejandro

Post by jameshale » Sun Oct 18, 2015 5:40 am

here is almost the same with the bigger rect a compound path
rects_compound.png
rects_compound.png (27.37 KiB) Viewed 11695 times
rects_compound.svg.zip
(1.1 KiB) Downloaded 395 times

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

Re: SVG for Alejandro

Post by capellan » Sun Oct 18, 2015 7:21 am

Hi all,

Many Thanks for posting your SVG files. :D

After reading the source of all files posted,
I have reached a decision:

Before building a General Parser to import
every type of SVG available, I will complete
some very specific scripts to import SVG
from Inkscape and Ilustrator and any other
app that you could provide me with enough
sample files to study.

Richmond, please send me the same SVG
saved from Ilustrator, but this time use
color transparency like SVGs created
using Inkscape.

Thanks in advance!

Alejandro

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

Re: SVG for Alejandro

Post by richmond62 » Sun Oct 18, 2015 12:15 pm

"Unfortunately, in Illustrator you cannot create a gradient that goes from a color to transparent as you can in Photoshop."

Just spent an hour digging for that!

Possibly that came in later versions of Illustrator ????

PBH
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 129
Joined: Sun Feb 20, 2011 4:26 pm
Location: Vancouver Island, BC, Canada. ex.UK
Contact:

Re: SVG for Alejandro

Post by PBH » Sun Oct 18, 2015 5:23 pm

A test svg file is attached, it was created with Affinity Designer 1.3.5 on Mac.

@Richmond (Also posted to the Use List).
It’s not the same as Photoshop, but you can create a transparent gradient in older versions of Illustrator. You just need an opacity mask to make this work in Illustrator CS2, CS4 onward is much easier. I’m not too sure how this will relate to the SVG though.

Create a graphic shape and fill with the your desired colour, then on top of that create a second graphic (can be a square with the same outer dimensions as the first graphic).
Fill the second graphic with a black-to-white gradient fill (black will become the transparent part and white will be opaque).
Now select both objects, open the Transparency Palette, click on the twist arrow and choose "Make Opacity Mask”.
Your first graphic shape should now have a transparent gradient.

Have fun.

Paul
Attachments
test.svg.zip
Zipped SVG file.
(3.09 KiB) Downloaded 369 times

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

Re: SVG for Alejandro

Post by capellan » Sat Nov 07, 2015 4:09 am

Hi All,

Just an update. I am building and testing a new parser (or importer)
for SVG files based in SVGL and new scripts to import gradients
that I used in the attached livecode stack inside a zip file.

This new svg parser (not available yet) will be more flexible
about the expected SVG structure. After analizing and testing
many SVG files generated by different applications, I noticed
that a better strategy is to parse and validate whole tags,
before creating graphics in the stack:

<Start Tag>
... followed by unpredictable/correct/wrong
... content that needs validation...
</End Tag> or maybe just this closing mark />

I have included 4 small svg files with the stack
inside the Zip file. Import these small svg files
in first place.

Have a nice weekend!

Al

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

Re: SVG for Alejandro

Post by bn » Sat Nov 07, 2015 11:21 am

Hi Alejandro,

you did a great job. Hats off. Thank you.

Kind regards
Bernd

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

Re: SVG for Alejandro

Post by richmond62 » Sat Nov 07, 2015 5:39 pm

Fantastic. This is amazing work!

Of course I cannot help wondering what LiveCode's "problem" is with SVG import right now.

Post Reply

Return to “Multimedia”