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

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 21, 2015 9:28 pm

AND the BIG question is how LiveCode think we are going to import
vector images with this:
maybe like this
Bildschirmfoto 2015-11-21 um 21.20.24.png
Bildschirmfoto 2015-11-21 um 21.20.24.png (41.7 KiB) Viewed 11836 times
or this
Bildschirmfoto 2015-11-21 um 21.10.59.png
Bildschirmfoto 2015-11-21 um 21.10.59.png (43.52 KiB) Viewed 11836 times
Kind regards
Bernd

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

Re: SVG for Alejandro

Post by richmond62 » Sat Nov 21, 2015 11:01 pm

Your pictures are very attractive, but they don't explain how they were imported.

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 21, 2015 11:13 pm

open a svg export in a text editor, look for path
<path d="M345.714,950.934C345.714,997.483 304.78,1035.22 254.286,1035.22C203.791,1035.22 162.857,997.483 162.857,950.934C162.857,904.384 203.791,866.648 254.286,866.648C304.78,866.648 345.714,904.384 345.714,950.934Z"
take the part inside the quotes starting with "M", without the quotes and paste that into the properties inspector field "svgPath"
It can currently only display one path and only the fill, not the border. It takes a little experimentation which paths work well.

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

Re: SVG for Alejandro

Post by richmond62 » Sat Nov 21, 2015 11:32 pm

"open a svg export in a text editor, look for path

<path d="M345.714,950.934C345.714,997.483 304.78,1035.22 254.286,1035.22C203.791,1035.22 162.857,997.483 162.857,950.934C162.857,904.384 203.791,866.648 254.286,866.648C304.78,866.648 345.714,904.384 345.714,950.934Z"

take the part inside the quotes starting with "M", without the quotes and paste that into the properties inspector field "svgPath"
It can currently only display one path and only the fill, not the border. It takes a little experimentation which paths work well."

Just about as clunky as I imagined; and, for a rather large number of people effectively useless.

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 21, 2015 11:51 pm


[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: SVG for Alejandro

Post by [-hh] » Sun Nov 22, 2015 12:21 am

Hi Alejandro and all,

you are right, and Bernd's hint fortifies that, that it may be lost work to make a rather complete SVG library. What nevertheless should be done is to cut your work on a level (you are already on a higher level than LC 8) that is complete to your feeling.

Path importing and exporting, basic gradients too, is always useful. This could be "polished" for a plugin that is also usable in LC 6-7.

Of course *you* should decide yourself what goes into such a plugin from your stack. The "editing" parts are too valuable to go to trash, you should save them in a separate stack.
But now, first the plugin.
This is my suggestion: Cut your stack and we will come in for testing and making unnecessary remarks :-)

Kind regards, Hermann
shiftLock happens

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

Re: SVG for Alejandro

Post by capellan » Sun Nov 22, 2015 3:25 am

Hi Richmond,
richmond62 wrote:I'm not sure why, but I seem unable to
import an SVG file generated by Karbon
[ https://www.calligra.org/karbon/ ].
unsupported attribute: stroke-linejoin: miter
unsupported attribute: stroke-miterlimit: 2.00000000000
unsupported attribute: fill-rule: evenodd
unsupported attribute: stroke-linecap: square
Many Thanks for attaching this svg file.
The reason why this produces an error is because
there is a number written in scientific notation: 3.42294e-14

M 366.403 435.734
L 226.45 361.302
L 86.4961 435.734
L 113.225 278.084
L 0 166.436
L 156.473 143.435
L 226.45 3.42294e-14
L 296.426 143.435
L 452.899 166.436
L 339.674 278.084
Z

After I get well, I have to think how and when
to make the conversion to decimal.

Alejandro

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

Re: SVG for Alejandro

Post by capellan » Tue Nov 24, 2015 7:06 am

Hi All,

Attached to this message is a very small update of SVGL (Not SVGL + Gradients).
Please test this new updated version of SVGL 2015 rev 02, first importing
all 4 svg files included inside the folder. After this, import any other svg that
you download from OpenClipart.org or exported from your graphic application.

In this small update for version 02,
1) scientific notation numbers inside paths are converted to
floating-points numbers using this 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.

Again, many thanks for keeping alive your interest in this topic!
Have a nice day!

Alejandro
Last edited by capellan on Sat Dec 26, 2015 9:29 pm, edited 1 time in total.

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

Re: SVG for Alejandro

Post by richmond62 » Tue Nov 24, 2015 11:02 am

Here are the results as you requested (Xubuntu 64-bit 14.04 LC 7.1):
compare.png
I took screenshots of all the SVG files after they were imported and lined them up
with the thumbnails of the original SVG files so you can see what they are like.

Unfortunately with your "SVGL_plus_Gradients_ALPHA1_Inkscape_SVG.livecode"
the only SVG file that could be opened was "Smartphone.svg" and the results were
"artistic" - see the right-hand thumbnail:
probs.png

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

Re: SVG for Alejandro

Post by capellan » Tue Nov 24, 2015 7:57 pm

Hi Richmond,
Unfortunately with your "SVGL_plus_Gradients_ALPHA1_Inkscape_SVG.livecode"
the only SVG file that could be opened was "Smartphone.svg" and the results were
"artistic" - see the right-hand thumbnail
Yes, this is expected. I stopped working in SVGL plus Gradients
until SVGL is completely updated and could import without error
most svg files, likes those found in openclipart.org
Notice that anyone who could format (by hand)
gradients in this svg file, following exactly the same structure
that SVGL + Gradients expects:

<defs>
<linear gradients only with color definitions>
<linear or radial gradients using coordinates and url definitions
to define colors with/without transformation matrices>
</defs>
<one or many paths>

Notice that in the Livecode mail list, I asked help for splitting
a svg file in multiple files that only have a single path,
for example:

This svg file have 80 paths:
https://openclipart.org/detail/3859/ita ... ffee-maker
Using LiveCode, How could I create 80 valid SVG files?

http://lists.runrev.com/pipermail/use-l ... 21246.html

After, SVGL is updated, I will resume working in SVGL plus Gradients.

Alejandro

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

Re: SVG for Alejandro

Post by richmond62 » Tue Nov 24, 2015 8:40 pm

"Using LiveCode, How could I create 80 valid SVG files?"

If one creates files iteratively does Livecode have a limit?

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: SVG for Alejandro

Post by [-hh] » Wed Nov 25, 2015 12:42 am

Hi all,

here is a method to split the svg into valid files, separated by paths.
This needs LC 7, but this no problem, could also be solved by using "offset" in versions < 7.

Code: Select all

local myfName ="" # <-- set path manually here instead of 'answer file'
-- ... this is my method to avoid the 'wheel of death' when testing
-- ... (and if I want to use always the same input for testing)
--> RightClick to avoid the dialog and use the same 'test-input' <---
on mouseUp b
  if b<>3 or myfName is empty then
    answer file "Please read in SVG-File"
    if it is empty then exit mouseUp
    put it into myfName
  end if
  put myfName into myFolder
  set itemdel to "."; delete last item of myFolder
  put "-svgSplit" after myFolder
  if there is no folder myFolder then create folder myFolder
  set itemdel to slash
  put "/" & (last item of myfName) &"-" after myFolder
  put url ("file:" & myfName) into mysvg
  put "<path " into p0
  set itemDel to p0 #<--- multichar delimiter needs LC 7 and above
  put item 1 of mysvg into myHeader
  put item -1 of mysvg into myFooter
  put offset ("/>",myFooter) into a1
  put p0 & char 1 to 1+a1 of myFooter into lastsvgPath
  delete char 1 to 1+a1 of myFooter
  put the num of items of mysvg into N
  set numberformat to "##"
  repeat with i=2 to N-1
    put 0+i into i0
    put myHeader & p0 & (item i of mysvg) & myFooter \
          into url ("file:" & myFolder &(0+i)&".svg")
  end repeat
  put myHeader & p0 & (item 1+i of mysvg) & myFooter \
        into url ("file:" & myFolder &(0+N)&".svg")
end mouseUp
Please test first if this is what you wanted, then we can do more:
= for example write only these defs in the header that are used for the path
= for example store the id of the svg path and relevant defs as a custom property in the created LC grafic object.
It works, I tested the output also with "Safari", which loads without problems. Of course this is valid only for this special svg-format used.

I think this would be a nice trick to import the svg and then simply "grab" the individual LC paths
(by "on mouseDown; grab me; end mouseDown").

Great idea, that splitting, Alejandro!!

Regards, Hermann

p.s. Just saw now that the numbering above is 2-81 and not 1-80. Thus you have always number 1 available to put in your logo ;-)

Edit: Adjusted the code above to use it for different inputs, always with dialog
Last edited by [-hh] on Wed Nov 25, 2015 1:29 pm, edited 3 times in total.
shiftLock happens

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

Re: SVG for Alejandro

Post by capellan » Wed Nov 25, 2015 4:22 am

Hi Hermann,

Many Thanks for posting this script! :D
This is the best starting point to experiment
with different svg files.

Hermann wrote: "write only these defs in
the header that are used for the path"
Certainly, this is really helpful to split,
for example, this file:
http://www.clker.com/cliparts/h/L/Q/C/w ... hlight.svg

Hermann wrote: "store the id of the svg path and
relevant defs as a custom property in the
created LC grafic object". Yes, this could be very
useful to edit the paths inside the stack.
I used a similar approach in some of the stack that I published:
http://andregarzia.on-rev.com/alejandro ... pt_v02.zip
http://andregarzia.on-rev.com/alejandro ... lv032h.zip

Just found strange that you wrote:
set path manually here instead of 'answer file'
Looks like in LC7, 'answer file' does not works after
selecting the first file... :shock:
I have to quit and restart LC to get 'answer file'
working again. Does exist a bug report about this?

Many Thanks for posting this really useful script! :D

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: SVG for Alejandro

Post by bogs » Sun Jan 13, 2019 9:48 am

I just had opportunity to have need of similar routines and found this thread (sure, 3 years late to the party, what else is new? :P ) and had to agree with -hh's view, these stacks work incredibly well Al. I aspire to someday reach the neatness and organization of your 'sphagetti code' as well, but that is for another day :D
Image

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

Re: SVG for Alejandro

Post by capellan » Sun Jan 13, 2019 7:30 pm

Hi Bogs,
bogs wrote:
Sun Jan 13, 2019 9:48 am
I just had opportunity to have need of similar routines and found this thread (sure, 3 years late to the party, what else is new? :P ) and had to agree with -hh's view, these stacks work incredibly well Al. I aspire to someday reach the neatness and organization of your 'sphagetti code' as well, but that is for another day :D
Actually SVGL is the work of Ian McPhail from RunRev LTD.
Just added a few lines of code, but after a while I stopped
working on SVGL after finding that there are many
common svg features that could not be replicated
using LiveCode vectors graphics. For example:

1) Fractional line widths like: 0.3 or 1.7 or 2.5
2) Clipping paths
3) SVG filters
and few others

Al

Post Reply

Return to “Multimedia”