Easy SVG import
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Easy SVG import
This should NOT have to be like this, surely:
SVG capabilities SERIOUSLY ROCK, but the import method is going to
turn off 90% of the people who would best benefit from them.
The
turn off 90% of the people who would best benefit from them.
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Easy SVG import
Stack removed as improved version uploaded: scroll down
Last edited by richmond62 on Wed May 10, 2017 8:54 pm, edited 1 time in total.
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Easy SVG import
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.
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.
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Easy SVG import
Improved version.
And so it goes . . .
And so it goes . . .
Last edited by richmond62 on Sat May 13, 2017 10:28 am, edited 1 time in total.
Re: Easy SVG import
Hi Richmond,
Really nice stack, Thanks a lot for sharing!
Al
Really nice stack, Thanks a lot for sharing!
Al
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Easy SVG import
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.
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.
Re: Easy SVG import
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...
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...
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Easy SVG import
Indeed.our best option is create our own Vector Graphics editor within LiveCode
As things are I do a large part of my graphic processing for programming with LiveCode inwith LiveCode itself.
Re: Easy SVG import
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 )
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 )
Re: Easy SVG import
Thanks bogs, i will check it