Page 3 of 4
Re: SVG for Alejandro
Posted: Sat Nov 21, 2015 9:28 pm
by bn
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 (41.7 KiB) Viewed 11925 times
or this
- Bildschirmfoto 2015-11-21 um 21.10.59.png (43.52 KiB) Viewed 11925 times
Kind regards
Bernd
Re: SVG for Alejandro
Posted: Sat Nov 21, 2015 11:01 pm
by richmond62
Your pictures are very attractive, but they don't explain how they were imported.
Re: SVG for Alejandro
Posted: Sat Nov 21, 2015 11:13 pm
by bn
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.
Re: SVG for Alejandro
Posted: Sat Nov 21, 2015 11:32 pm
by richmond62
"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.
Re: SVG for Alejandro
Posted: Sat Nov 21, 2015 11:51 pm
by bn
Re: SVG for Alejandro
Posted: Sun Nov 22, 2015 12:21 am
by [-hh]
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
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
Re: SVG for Alejandro
Posted: Sun Nov 22, 2015 3:25 am
by capellan
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
Re: SVG for Alejandro
Posted: Tue Nov 24, 2015 7:06 am
by capellan
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
Re: SVG for Alejandro
Posted: Tue Nov 24, 2015 11:02 am
by richmond62
Here are the results as you requested (Xubuntu 64-bit 14.04 LC 7.1):
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:
Re: SVG for Alejandro
Posted: Tue Nov 24, 2015 7:57 pm
by capellan
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
Re: SVG for Alejandro
Posted: Tue Nov 24, 2015 8:40 pm
by richmond62
"Using LiveCode, How could I create 80 valid SVG files?"
If one creates files iteratively does Livecode have a limit?
Re: SVG for Alejandro
Posted: Wed Nov 25, 2015 12:42 am
by [-hh]
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
Re: SVG for Alejandro
Posted: Wed Nov 25, 2015 4:22 am
by capellan
Hi Hermann,
Many Thanks for posting this script!
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...
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!
Re: SVG for Alejandro
Posted: Sun Jan 13, 2019 9:48 am
by bogs
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?
) 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
Re: SVG for Alejandro
Posted: Sun Jan 13, 2019 7:30 pm
by capellan
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?
) 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
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