Page 1 of 1

Export to Vector

Posted: Sat Sep 09, 2017 3:33 pm
by richmond62
Export snapshot from group "XXX" to file "XXX.svg" as SVG

Import snapshot from group "XXX" as graphic

fantasy-land at the moment.

Here's the sort of thing I'd like to convert into a vector image:
vectoriseMe.png
vectoriseMe.png (5.47 KiB) Viewed 1978 times

Re: Export to Vector

Posted: Sat Sep 09, 2017 3:55 pm
by richmond62

Re: Export to Vector

Posted: Sat Sep 09, 2017 4:31 pm
by [-hh]

Re: Export to Vector

Posted: Sat Sep 09, 2017 6:50 pm
by FourthWorld
What format do you want to export to?

Re: Export to Vector

Posted: Sat Sep 09, 2017 7:46 pm
by ClipArtGuy
I've been shelling out to potrace CLI for simple two color images, but it looks like autotrace might be a good choice for multi-colored graphics. I will definitely be giving it a whirl this weekend.

Re: Export to Vector

Posted: Sat Sep 09, 2017 8:12 pm
by richmond62
I should like to export to SVG so that . . .

oddly enough . . .

they could be reimported into a Livecode stack as SVG widgets.

Re: Export to Vector

Posted: Sat Sep 09, 2017 9:42 pm
by capellan
Hi Richmond,

Check if this code works fine in your own setup within the MultiColor SVG widget and download attached files too:

Code: Select all

<rect x="0" y="0" width="33.5" height="33.5" style="fill:none;stroke-width:0px;stroke:rgb(0,0,0);"/>

<path d="M 11.564536,32.151906 V 21.608438 H 1.0207157 V 11.475249 H 11.564536 V 0.93142752 h 10.13319 V 11.475249 h 10.54347 v 10.133189 h -10.54347 v 10.543468Z" style="fill:white;fill-rule:nonzero;"/>

<path d="M 11.564536,32.151906 V 21.608438 H 1.0207157 V 11.475249 H 11.564536 V 0.93142752 h 10.13319 V 11.475249 h 10.54347 v 10.133189 h -10.54347 v 10.543468Z" style="fill:none;stroke-width:1px;stroke:rgb(0,0,0);"/>

<circle cx="16.5" cy="16.5" r="4" style="fill:rgb(0,0,0);fill-rule:nonzero;"/>

<path d="m 27.454706,17.473177 v 0.01905 h 1.85914 v 0.836789 h -3.01555 V 17.54338 l 1.31269,-1.255536 c 0.26423,-0.253295 0.45014,-0.465667 0.55739,-0.637117 0.1076,-0.17145 0.16122,-0.352072 0.16122,-0.541514 0,-0.421922 -0.22649,-0.632531 -0.68016,-0.632531 -0.39405,0 -0.77082,0.156634 -1.131,0.469548 v -0.887942 c 0.39828,-0.257881 0.84772,-0.386644 1.34831,-0.386644 0.46849,0 0.83432,0.117827 1.09714,0.35313 0.26317,0.235303 0.39441,0.553156 0.39441,0.953558 0,0.534459 -0.32032,1.086909 -0.96132,1.657703 z" style="fill:rgb(0,0,0);fill-rule:nonzero;"/>

<path d="M 18.537932,8.4618206 H 15.640348 V 7.6631482 h 0.948823 v -2.852858 l -0.97438,0.2108495 V 4.2032992 l 1.980707,-0.3993363 v 3.8591853 h 0.942434 z" style="fill:rgb(0,0,0);fill-rule:nonzero;"/>

<path d="m 7.8861257,17.316543 h -0.54963 v 0.97402 h -0.92005 v -0.97402 h -1.99637 v -0.642055 l 1.923,-2.964744 h 0.99342 v 2.887838 h 0.54963 z m -1.45698,-2.597149 h -0.019 c -0.0296,0.07655 -0.0871,0.195791 -0.1725,0.357716 l -0.98073,1.520472 h 1.15958 v -1.440744 c 0,-0.127706 0.004,-0.273403 0.0127,-0.437444 z" style="fill:rgb(0,0,0);fill-rule:nonzero;"/>

<path d="m 15.616186,28.600139 v -0.878416 c 0.30657,0.223663 0.66428,0.335491 1.07315,0.335491 0.25753,0 0.45826,-0.05539 0.60219,-0.166158 0.14358,-0.11077 0.21555,-0.265287 0.21555,-0.463195 0,-0.204613 -0.0889,-0.362304 -0.2667,-0.473076 -0.1778,-0.110772 -0.42227,-0.165806 -0.73307,-0.165806 h -0.41205 v -0.773288 h 0.37995 c 0.59654,0 0.89464,-0.197909 0.89464,-0.594078 0,-0.372534 -0.22895,-0.559153 -0.68686,-0.559153 -0.30656,0 -0.60501,0.09913 -0.89464,0.297039 V 24.33541 c 0.32173,-0.161572 0.69638,-0.242711 1.12465,-0.242711 0.46849,0 0.83326,0.10548 1.09397,0.316442 0.26105,0.210608 0.39158,0.484363 0.39158,0.820913 0,0.598312 -0.30374,0.973314 -0.91052,1.124303 v 0.01623 c 0.3235,0.04022 0.57926,0.157692 0.76659,0.352778 0.18732,0.194733 0.28116,0.433917 0.28116,0.717199 0,0.427918 -0.15663,0.766585 -0.46955,1.016 -0.31291,0.24906 -0.74542,0.373591 -1.29716,0.373591 -0.47272,0 -0.8569,-0.07655 -1.15288,-0.230013 z" style="fill:rgb(0,0,0);fill-rule:nonzero;"/>
Notice that compressed stack does not include this code at the top of Multicolor SVG widget:

<rect x="0" y="0" width="33.5" height="33.5" style="fill:none;stroke-width:0px;stroke:rgb(0,0,0);"/>

You could include it yourself at the top of Multicolor SVG widget within the attached LC8 stack, in this way I do not have to upload again these files.

Al
Richmond_Drawing.zip
LC8 Stack and SVG file
(3.84 KiB) Downloaded 46 times

Re: Export to Vector

Posted: Sat Sep 09, 2017 10:41 pm
by bogs
ClipArtGuy wrote:
I've been shelling out to potrace CLI for simple two color images, but it looks like autotrace might be a good choice for multi-colored graphics. I will definitely be giving it a whirl this weekend.
Heya ClipArtGuy, You have seen these, right? I've tried Ian's and -hh's, both seem to work pretty good.
Image

Re: Export to Vector

Posted: Sun Sep 10, 2017 4:38 am
by capellan
richmond62 wrote:I should like to export to SVG so that . . .
oddly enough . . .
they could be reimported into a Livecode stack as SVG widgets.
Hi Richmond,

Download this really old stack:
http://andregarzia.on-rev.com/alejandro ... or_v03.zip

Open the stack exportVector_v03, erase all vector graphics
and paste your vector graphics. Then, select from
SVG, PDF or Adobe Ilustrator and click: Export

Post in Google Drive or Dropbox your results or paste
them in the forum.

Could this handler still be useful after so many years?
Notice that SVG export is based in a script posted
by Richard Gaskin.

Al

Re: Export to Vector

Posted: Sun Sep 10, 2017 11:00 am
by richmond62
Download this really old stack:
The stack does export graphic objects created within a Livecode stack.

What it does NOT do is turn a group of raster images into a vector and export it.

Re: Export to Vector

Posted: Sun Sep 10, 2017 1:01 pm
by richmond62
Multicolor SVG widget
Where?

The only way I am aware of currently to have a vector image that is properly manageable
is to have a few SVG widgets (one for each colour) layered on top of each other.

Re: Export to Vector

Posted: Sun Sep 10, 2017 7:36 pm
by capellan
Download attached lcb file from this Mark Wieder's forum post:
viewtopic.php?f=93&t=27811&start=30#p154437

In another forum thread, Mark Wieder posted an updated version of Peter Thirkell widget's "MultiColor SVG widget" but I could not find this specific message. Ask Mark Wieder for a link to download his most recent version of this widget.

In this forum (or LC mail list?), Bernd posted a stack that could trace color bitmaps as vectors, but I could not find a link to this specific color tracing stack, download this previous version (only single color tracing):
viewtopic.php?f=10&t=19040
Ask Bernd for a download link of his color tracing stack.

Recently, Hermann posted a stack that simplify these traced bitmaps graphics (reducing the number of points):
phpBB2/viewtopic.php?f=76&t=19248&start=90#p157049

If you want to smooth these traced vector graphics, then you could try one of these algorithms:
http://andregarzia.on-rev.com/alejandro ... orithm.zip

By the way, Inkscape could trace color bitmaps (convert bitmaps into vector images) but you will get better results if you redraw these bitmaps using a vector graphic editor. Check attached files to this message. According to professional reviews, the best tool for tracing bitmap images is Vector Magic:
https://vectormagic.com/comparisons

Finallly, download this updated version of a stack that exports vector graphics from LiveCode
as PDF, Adobe Ilustrator and SVG: viewtopic.php?f=10&t=29742
Use Inkscape 0.92 or later to edit SVG exported from this updated stack.

Al
ForRichmond.PNG
Comparison of a traced vs a redraw bitmap
ForRichmond.zip
SVG compressed file
(10.23 KiB) Downloaded 50 times