LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
pink
- Posts: 272
- Joined: Wed Mar 12, 2014 6:18 pm
Post
by pink » Thu May 05, 2016 5:30 pm
This is just a simple little script which reads in an SVG file, extracts the path information and then sets the iconPath of an SVG icon called "testSVG" to it.
I've been finding an occasional idiosyncratic format issue here and there, but at this point this has worked with most of the files I've played with.
Give it a try and if possible link files that do not work.
Code: Select all
on mouseUp
Answer file "Select an SVG File"
if the result is "Cancel" then exit to top
put it into tFilePath
open file tFilePath for read
read from file tFilePath until EOF
put it into tSVG
replace tab with space in tSVG
replace cr with space in tSVG
replace ">" with cr in tSVG -- Will create a seperate line for each value we want to look at
replace space & "d=" & quote with cr & "SVGP" in tSVG -- will create a new line with the path in it
replace quote with empty in tSVG -- remove extra stuff from end of line
replace "/" with empty in tSVG -- remove extra stuff from end of line
repeat for each line tLine in tSVG
if char 1 to 4 of tLine is not "SVGP" then next repeat
put char 5 to -1 of tLine into tLine
put tLine & cr after tNewPath
end repeat
set the iconPath of widget "testSVG" to tNewPath
end mouseUp
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
-
richmond62
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Post
by richmond62 » Sun May 08, 2016 3:26 pm
I had a bash with 4 "random" (meaning that I chose them) SVG images.
2 of them did not work at all,
1 imported perfectly:
and 1 did a half-cock job (the Mozilla Globe).
As requested, here are the 4 svgs.
I am also attaching the stack using ONLY "pink's" code, just to save other
people the bother of getting the thing together so they can try it out with their choice of SVG images.
-
Attachments
-
- SVGerr.livecode.zip
- Here's the stack.
- (84.34 KiB) Downloaded 407 times
-
- testSVGs.zip
- The test SVG images referred to.
- (107.67 KiB) Downloaded 375 times
-
richmond62
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Post
by richmond62 » Sun May 08, 2016 3:34 pm
-
pink
- Posts: 272
- Joined: Wed Mar 12, 2014 6:18 pm
Post
by pink » Mon May 09, 2016 3:06 pm
As far as I know at this point, the SVG Icon can interpret basic path data only.
Only single color SVGs will be usable.
"vintage" works because it contains only paths (albeit over 300 of them)
The other 3 did not work because each path contains additional information which Livecode cannot interpret such as colors, shading and transformations.
It is possible to remove all those extra calls, however the result would definitely be subpar.
For example, from lion.svg, which contains a total of 43 paths, I take this:
<path id="path3854" d="m281.14 461.19c-2.8715 40.152 109.55 63.786 98.008-22.242-13.441 82.998 94.02 63.998 96.039 29.352" stroke="#000" stroke-width="2" fill="#d38d5f"/>
the part in quotes after "d=" is the only part the SVGIcon can use, so the rest of the instructions
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
-
richmond62
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Post
by richmond62 » Tue May 10, 2016 6:23 am
Seeing the way your script pulled in the "snowflake" was extremely impressive.
However, the Livecode people need to make good their Kickstarter undertaking to
have a comprehensive solution to dealing with SVG images; and that means the ability to
import all SVGs.
-
dave.kilroy
- VIP Livecode Opensource Backer
- Posts: 858
- Joined: Wed Jun 24, 2009 1:17 pm
- Location: Plymouth, UK
-
Contact:
Post
by dave.kilroy » Tue May 10, 2016 9:36 am
Thanks @pink, that script works nicely with svgs I create with
http://picsvg.com - my current favourite image maker is Sketch but unfortunately the svgs it produces are non-standard so I have to export from Sketch as .png, use the web service to transform to .svg and then your script and the LC SVG widget do the rest - very nice!
BTW I believe that in LCB one can work with more complex .svg images (certainly shading and I think also multi-colour)...
"...this is not the code you are looking for..."
-
pink
- Posts: 272
- Joined: Wed Mar 12, 2014 6:18 pm
Post
by pink » Tue May 10, 2016 3:25 pm
does anyone know if it is possible to set custom SVG paths on the new Navigation Bar or Segmented Control? I'm guessing not yet, but thought I'd check if anyone had done it
I believe that Rotating SVG, and SVG Icon are the only ones that can use custom paths
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
-
pink
- Posts: 272
- Joined: Wed Mar 12, 2014 6:18 pm
Post
by pink » Tue May 10, 2016 4:17 pm
Attached is a stack I've been using to keep all my SVG data together.
On the import card you can create new libraries and import batches of SVG files into them.
On the main page you can browse the libraries as well as the "Built-in" icons that are included in Livecode.
The SVG path data are saved in a custom property set in the stack.
I've included the 490 free IcoMoon icons (
https://icomoon.io/#icons-icomoon) as part of a demonstration.
I apologize for how ugly the design of it is... but I figured some people would find it useful.
-
Attachments
-
- SVG Library alpha.livecode.zip
- Simple hacky SVG Importer/Keeper
- (102.32 KiB) Downloaded 405 times
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
-
richmond62
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Post
by richmond62 » Tue May 10, 2016 6:36 pm
That's a super stack: Thanks!
-
jameshale
- VIP Livecode Opensource Backer
- Posts: 474
- Joined: Thu Sep 04, 2008 6:23 am
- Location: Melbourne Australia
Post
by jameshale » Wed May 11, 2016 5:00 am
Great stack Greg.
Looking at it I noticed you leave the fill and other path info (aside from points) in the paths.
While I was playing around editing paths I found deleting this info was often a good thing. At least with the current implementation of the SVG widget.
So I modified the get path function to remove this from any paths. It is quite possible this may break some SVGs as I have seen this data embedded within a path, but so far so good.
I also add a filter for the library lists and a switch to change fill rules for the displayed SVG.
Lot's of fun and thanks again for the stack.
James
-
Attachments
-
- SVG Library a2.livecode.zip
- modified SVG stack
- (106.62 KiB) Downloaded 353 times
-
pink
- Posts: 272
- Joined: Wed Mar 12, 2014 6:18 pm
Post
by pink » Thu May 12, 2016 4:19 pm
I liked James' enhancements so I used his stack, and added the following features:
1. Settings and libraries are now saved in an invisible data stack that is saved in a folder relative to the main stack. (I keep my plugins in a Dropbox folder, so I needed to make it relative for my own use.) I intend on making this more customizable, but for now it is a stack called "svgSettings". My main rationale for doing this is that if people use and update this stack, the data will need to be kept separate... plus to avoid potentially huge files, it might be best to save libraries into different files.
2. I added a slider that allows you to change the svgIcon size anywhere from 20 to 300px.
3. I added a "copy" button which copies the widget to clipboard so it can be pasted into your own stack.
Hopefully later today I will be able to add the following:
-allow creation of separate data stacks for different libraries
-import/export libraries
-backups
-
Attachments
-
- SVG Library a3.livecode.zip
- (12.89 KiB) Downloaded 358 times
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
-
pink
- Posts: 272
- Joined: Wed Mar 12, 2014 6:18 pm
Post
by pink » Sun May 15, 2016 5:26 pm
updated the stack as follows:
-made some aesthetic changes to the buttons on the import card
-added simple "Help" messages to some of the cards
-added an "Edit Library" card which allows manipulation of current icons and libraries:
---move icons from one library to another
---delete icons from a library (and moves them into a trash bin)
---rename icons in a library (actually, it copies the icon to a new name and moves the original to "_renamed")
-added some maintenance functions to the "Settings" card including a purge button to clean out the trash bin and renamed icons
-
Attachments
-
- SVG Library a4.livecode.zip
- (25.65 KiB) Downloaded 371 times
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
-
richmond62
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Post
by richmond62 » Sun May 15, 2016 5:51 pm
You may be "Mad, Pink and Dangerous to Know", but that's a hellishly nifty stack you've made.
Many thanks.
-
jameshale
- VIP Livecode Opensource Backer
- Posts: 474
- Joined: Thu Sep 04, 2008 6:23 am
- Location: Melbourne Australia
Post
by jameshale » Mon May 16, 2016 8:37 am
Seems not all icon sets are created equal (well will read into this stack without issue.)
Found another stumble for the path extracted from the svg file.
if it ends in a space the path will not draw.
I don't think this should do that so I have added this to widget's bug report.
Here is a work around for this stack though, add this loop towards the end of the "pathFromFile" function in the stack script...
Code: Select all
repeat while char -1 of tNewPath = " "
delete char -1 of tNewPath
end repeat
seems to work.