Easy SVG import

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

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Easy SVG import

Postby 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: 1845
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Postby richmond62 » Sun May 07, 2017 8:24 pm

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

Re: Easy SVG import

Postby 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 41 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: 1845
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Postby 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 32 times

versions.png
richmond62
Livecode Opensource Backer
Livecode Opensource Backer
 
Posts: 1845
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Postby 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.
richmond62
Livecode Opensource Backer
Livecode Opensource Backer
 
Posts: 1845
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Postby capellan » Wed May 10, 2017 9:36 pm

Hi Richmond,

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

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

Re: Easy SVG import

Postby richmond62 » Sat May 13, 2017 10:30 am

SVGchopper.png

Third Version:
SVG Importer.livecode.zip
Here's the stack.
(87.19 KiB) Downloaded 37 times
richmond62
Livecode Opensource Backer
Livecode Opensource Backer
 
Posts: 1845
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Postby 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 898 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 898 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.
richmond62
Livecode Opensource Backer
Livecode Opensource Backer
 
Posts: 1845
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Postby 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...
capellan
 
Posts: 348
Joined: Wed Aug 15, 2007 11:09 pm

Re: Easy SVG import

Postby 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.
richmond62
Livecode Opensource Backer
Livecode Opensource Backer
 
Posts: 1845
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Easy SVG import

Postby 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: )
sphere
 
Posts: 407
Joined: Sat Sep 27, 2014 10:32 am
Location: Hummelo, the Netherlands

Re: Easy SVG import

Postby 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
bogs
 
Posts: 384
Joined: Sat Feb 25, 2017 10:45 pm

Re: Easy SVG import

Postby sphere » Fri Aug 25, 2017 7:01 pm

Thanks bogs, i will check it
sphere
 
Posts: 407
Joined: Sat Sep 27, 2014 10:32 am
Location: Hummelo, the Netherlands


Return to Off-Topic

Who is online

Users browsing this forum: No registered users and 2 guests