SVG Icon - Quick hack

[Laserl]

Dear all

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

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

[richmond62]

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

[richmond62]

"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

[Laserl]

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

[PaulDaMacMan]

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).

[PaulDaMacMan]

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