Easy SVG import

Want to talk about something that isn't covered by another category?

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Easy SVG import

Post by richmond62 » Sun May 07, 2017 6:38 pm

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

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Post by richmond62 » Sun May 07, 2017 8:24 pm


richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Post by richmond62 » Wed May 10, 2017 4:15 pm

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

Stack removed as improved version uploaded: scroll down :)
buggy.svg.zip
Here's an SVG file to play with.
(4.04 KiB) Downloaded 358 times
Last edited by richmond62 on Wed May 10, 2017 8:54 pm, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Post by richmond62 » Wed May 10, 2017 8:28 pm

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.
shape.svg.zip
SVG from http://www.drawsvg.org/
(1.25 KiB) Downloaded 341 times
versions.png

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Post by richmond62 » Wed May 10, 2017 8:54 pm

Improved version.

And so it goes . . .
Last edited by richmond62 on Sat May 13, 2017 10:28 am, edited 1 time in total.

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Easy SVG import

Post by capellan » Wed May 10, 2017 9:36 pm

Hi Richmond,

Really nice stack, Thanks a lot for sharing! :D

Al

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Post by richmond62 » Sat May 13, 2017 10:30 am

SVGchopper.png
Third Version:
SVG Importer.livecode.zip
Here's the stack.
(87.19 KiB) Downloaded 357 times

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Post by richmond62 » Sat May 13, 2017 2:08 pm

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:
Screen Shot 2017-05-13 at 3.57.58 pm.png
Screen Shot 2017-05-13 at 3.57.58 pm.png (7.86 KiB) Viewed 11186 times
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:
Screen Shot 2017-05-13 at 3.57.17 pm.png
Screen Shot 2017-05-13 at 3.57.17 pm.png (6.9 KiB) Viewed 11186 times
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:
gunk.png
which would seem to prove that Livecode's SVG widget is ONLY an Inkscape SVG widget.

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Easy SVG import

Post by capellan » Thu Aug 10, 2017 7:45 pm

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

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Post by richmond62 » Thu Aug 10, 2017 9:26 pm

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.

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Easy SVG import

Post by sphere » Thu Aug 24, 2017 7:07 pm

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 :shock: )

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Easy SVG import

Post by bogs » Thu Aug 24, 2017 8:10 pm

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.

Image

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

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Easy SVG import

Post by sphere » Fri Aug 25, 2017 7:01 pm

Thanks bogs, i will check it

Post Reply

Return to “Off-Topic”