LiveCode Forums.

This should NOT have to be like this, surely: The SVG capabilities SERIOUSLY ROCK, but the import method is going to
turn off 90% of the people who would best benefit from them.

Bug 16802

http://quality.livecode.com/show_bug.cgi?id=16802

Thanks Klaus.

It is amazing that I was able to do THIS in about 45 minutes.

Stack removed as improved version uploaded: scroll down

This stack will probably ONLY work with Inkscape files

https://inkscape.org/en/

I used this ; http://www.drawsvg.org/ to draw an SVG shape

which the stack CANNOT open.
This is NOT surprising as its contents are laid out in an entirely different way to that of an Inkscape document.
If one opens the following with a text editor, and an Inkscape one in a similar way the difference is obvious.

Improved version.

And so it goes . . .

Hi Richmond,

Really nice stack, Thanks a lot for sharing!

Al

Third Version:

I really wish I could understand HOW SVG images worked as there seems to be a huge difference between them.

Here's an image generated by Adobe Illustrator:
Here's that image opened in a text editor:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.89 612.48"><defs><style>.cls-1{font-size:72px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>Artboard 1</title><text class="cls-1" transform="translate(175.85 187.77)">R</text><path d="M257.85,186a119.82,119.82,0,0,1,7.09-38c.45-1.24.88-3.22,1.64-4.25,1.81-2.48,2.39-1.47,3.54.62q2.21,4,4.16,8.15a153.47,153.47,0,0,1,7.49,19.24c.35,1.11,2.19,1.62,2.74.36l8.43-19.06c1.14-2.58,2.26-7.56,4.21-9.53,3.42-3.46,3.32,4.4,3.69,6.83l6.41,42.15c.29,1.9,3.18,1.09,2.89-.8L305.78,163l-2-13.41c-.45-2.95-.15-8.14-2.26-10.52-3.93-4.44-6.94,3-8.06,5.57l-11.49,26,2.74.36a157.53,157.53,0,0,0-9.81-24.06c-1.37-2.69-4.73-12-9.17-7.74-2.16,2.07-3,6.2-4,8.9a119.47,119.47,0,0,0-3.62,12.24A124.63,124.63,0,0,0,254.85,186c-.05,1.93,2.95,1.93,3,0Z"/></svg>

and here's that image opened in Inkscape:
and here's that opened in a text editor:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="Layer_1"
data-name="Layer 1"
viewBox="0 0 841.89 612.48"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="fromIllustratorInkscaped.svg">
<metadata
id="metadata3402">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Artboard 1</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1872"
inkscape:window-height="1046"
id="namedview3400"
showgrid="false"
inkscape:zoom="1.2228971"
inkscape:cx="420.94501"
inkscape:cy="306.23999"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<defs
id="defs3390">
<style
id="style3392">.cls-1{font-size:72px;font-family:MyriadPro-Regular, Myriad Pro;}</style>
</defs>
<title
id="title3394">Artboard 1</title>
<text
class="cls-1"
transform="translate(175.85 187.77)"
id="text3396">R</text>
<path
d="M257.85,186a119.82,119.82,0,0,1,7.09-38c.45-1.24.88-3.22,1.64-4.25,1.81-2.48,2.39-1.47,3.54.62q2.21,4,4.16,8.15a153.47,153.47,0,0,1,7.49,19.24c.35,1.11,2.19,1.62,2.74.36l8.43-19.06c1.14-2.58,2.26-7.56,4.21-9.53,3.42-3.46,3.32,4.4,3.69,6.83l6.41,42.15c.29,1.9,3.18,1.09,2.89-.8L305.78,163l-2-13.41c-.45-2.95-.15-8.14-2.26-10.52-3.93-4.44-6.94,3-8.06,5.57l-11.49,26,2.74.36a157.53,157.53,0,0,0-9.81-24.06c-1.37-2.69-4.73-12-9.17-7.74-2.16,2.07-3,6.2-4,8.9a119.47,119.47,0,0,0-3.62,12.24A124.63,124.63,0,0,0,254.85,186c-.05,1.93,2.95,1.93,3,0Z"
id="path3398" />
</svg>

Copy-pasting the "stuff" between M and Z in the former into LiveCode produces errors all over the place.

Copy-pasting from the second produces this: which would seem to prove that Livecode's SVG widget is ONLY an Inkscape SVG widget.

No, LiveCode SVG Widgets are not Inkscape SVG widgets only.

Remember that exists at least two different widgets that use SVG data to create images: SVG Icon and SVG Multicolor

After testing many free, paid and trial versions of Vector Graphics Editors, I found that no one covers all LiveCode Vector graphics features. For example:

Some programs display all LiveCode Gradients Types: Linear, Circular, Eliptical, Conical, XY, etc... but do not allow transparency in each color.

Other programs allow transparency in each color and different gradients in fill and stroke... but after you do that, this program do not allow modifying them independently. (Strangely, both gradients are joined)

Another programs display all LiveCode Gradients Types and allow transparency in each color... but the file format is binary and not documented at all.

From my point of view, our best option is create our own Vector Graphics editor within LiveCode. An Editor that fully employs all LiveCode features and could import/export other file formats like SVG, Ilustrator, PDF or Xara...

our best option is create our own Vector Graphics editor within LiveCode

Indeed.

As things are I do a large part of my graphic processing for programming with LiveCode inwith LiveCode itself.

Adding color would be even more great.
There are tools were you can convert existing images to svg with color, for example a nice logo which is difficult to redraw.
I find one color not very usefull(but that can be short-sighted view of me )

I had noticed a while back that there were some svg sample stacks made.

@sphere - I can say the one on top does do colors as well.



For just simple paths, I tend to lean towards gimp.

Thanks bogs, i will check it