LiveCode Forums.

Posted: **Sun Feb 20, 2022 1:50 pm**

Dear all

Thanks all for this work! I have some questions on that comment.

jacque wrote: Mon Nov 02, 2020 8:56 pm I did it the easy (or easier) way. I used SVG Icon Tool to create an icon family and exported it as a file. Then I embedded the file in a custom property of the stack, and after the stack launches I do this:

How can I create an icon family out of the SVG Icon Tool?
How do I export it as a file?
How do I embedde the file in the custom property?

Any help on that?

Daniel

Posted: **Sun Feb 20, 2022 2:41 pm**

-
Possibly someone can hack this about a bit to export an original image from
the LiveCode SVG widget.

Posted: **Mon Feb 21, 2022 12:31 pm**

"This stack does NOT successfully export from the LiveCode SVG widget"

OK: Let me qualify that:

1. The stack DOES export SVG files from the widget where the image has previously been imported.

2. Exporting in-built images from the SVG widget results in files that appear empty. HOWEVER, a single
Mac app "Vectornator", while NOT seeing the images DOES see ghosts:

https://www.vectornator.io/
-

-
I can find NO way whatsoever of making that layer visible.

Oh, and here's another reason to like this lot:

https://www.vectornator.io/icons

Posted: **Tue Feb 22, 2022 12:33 pm**

Dear all

Thanks for your help. I appreciate. I found the solution for me. I’m developing for a ios app and I need a new SVG image in the header bar widget.
To deploy an SVG I found the details in the Livecode lessons “How do I add a custom SVG to use in my app”. So my target was to create a new customIconData . json.

The following important information you need:
- The line path: "" has to be on ONE line. For that I used Notepad ++ to replace the returns
- The image has to be vertical flipped before you change to an SVG.
- Look that the mergJSON are included when you generate your app
- Take notice that when the .json is wrong you don't get an error

Here is a .json example for multiple icons. Seperation is with a comma.

[
{
"codepoint": "",
"name": "zoom_1",
"path": "...... "
},
{
"codepoint": "",
"name": "zoom_2",
"path": "......."
},
]

May be this is helpful for some of you.

Best regards
Daniel

Posted: **Wed Feb 23, 2022 3:24 am**

I have a very script that can export SVG by wrapping the SVGPath data from the widget in a basic SVG shell, works well enough for me to open it in Adobe Illustrator for editing. I'll try to post it here later (it is in a stack that's on GitHub).

Posted: **Wed Feb 23, 2022 3:29 am**

Here it is:

Code: Select all

on mouseDown pButtonNumber
   ASK FILE "SAVE AS SVG..."
   if it is not empty then
      put it into tFileName
      put wrapSVGPathDataToSVGXML( the iconPath of widget "SVGIconDisplay") into rSVGXML
      open file tFileName
      write rSVGXML to file tFileName
      close file tFileName
   end if
end mouseDown

function wrapSVGPathDataToSVGXML pSVGPathData
   put "<?xml version="&quote&"1.0"&quote&" standalone="&quote&"no"&quote&"?>" & cr into pSVGXML
   put "<!DOCTYPE svg PUBLIC "&quote&"-//W3C//DTD SVG 20010904//EN"&quote&" "&quote&"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&quote&">" &cr after pSVGXML
   put "<svg version="&quote&"1.0"&quote&" xmlns="&quote&"http://www.w3.org/2000/svg"&quote&cr after pSVGXML
   put "preserveAspectRatio="&quote&"xMidYMid meet"&quote&">" &cr after pSVGXML
   put "<path d="&quote& the iconPath of widget "SVGIconDisplay" &quote&" />" & cr after pSVGXML
   put "</svg>"  after pSVGXML
   return  pSVGXML
end wrapSVGPathDataToSVGXML

LiveCode Forums.

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