LiveCode Forums.

Posted: **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

Posted: **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.

Posted: **Sun May 08, 2016 3:34 pm**

Posted: **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

Posted: **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.

Posted: **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)...

Posted: **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

Posted: **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.

Posted: **Tue May 10, 2016 6:36 pm**

That's a super stack: Thanks!

Posted: **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

Posted: **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

Posted: **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

Posted: **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.

Posted: **Mon May 16, 2016 2:39 am**

Great stuff Greg.

Unfortunately there is a bug in LC8.01RC1 with the path of SVG widget. http://quality.livecode.com/show_bug.cgi?id=17646
I have added the workaround to your stack.

James

Posted: **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.

LiveCode Forums.

SVG Icon - Quick hack

SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack

Re: SVG Icon - Quick hack