Exporting SVG images?

[richmond62]

Nowadays we can import SVG images into LiveCode tolerably well, but can we export them in SVG format?

[dunbarx]

Richmond.

The dictionary does not seem to include that format in the five it mentions.

Craig

[stam]

is SVG not just a text file? (albeit a specially formatted one?)

[dunbarx]

They are xml files. I assume that they present their vector graphic data in a certain format. The issue, I guess, is that the SVG data is not exportable by LC in its "SVG" format.

Craig

[FourthWorld]

is SVG not just a text file? (albeit a specially formatted one?)

Web applications are also "just" text.

The work of generating the output lies beyond the encoding of the file format.

[dunbarx]

So is this worth an enhancement request, to add a sixth format to the "export" command?

Craig

[FourthWorld]

So is this worth an enhancement request, to add a sixth format to the "export" command?

It would take quite a while for the team to work through their current queue to get to it, so we have time to draft a good actionable spec.

Unlike raster formats, SVG isn't limited to bitmaps. Indeed, it's most useful with vectors.

How should we specify the scope of what we want to export? Image object, draw object, groups, even the whole card may be exportable.

Maybe better, almost certainly faster to get this done:

Who wants to take on the tedious task of writing a script to do this?

As Stam pointed out, the format itself isn't all that deep. It's just a lot of very tedious work to write a comprehensive routine to walk through all the objects and translate their properties to SVG equivalents.

It's doable, but I have neither the need nor the time.

Any takers?

Bonus: if you can export LC objects as SVG, exporting them as native HTML is just a bit more work. There's a lot of overlap between the two.

[NoN']

To see an example of this type of algorithm in LiveCode, you can download my spectroscopy software: Spectrib http://rg75.free.fr/hyperespace.spectrib.en.htm and request an export of the spectra.

The easiest way to do this is to prepare a field in which we record once and for all the code relative to the file skeleton, which will be interpreted by the drawing software (or a browser).

Code: Select all

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<!-- Created with Spectrib v0.1 -->
<!-- NbSpectres 0 -->
<!-- agrandissement 0  -->
<!-- coorAxeOrig 0  -->
<!-- Reserved -->

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

etc, etc

The "svg" format is really simple (compared to pdf, for example). The tricky part is to prepare the data well before saving it, and to avoid getting caught up in the language tags.

It looks something like this

Code: Select all

         if quelelem is not "" then
            put the label of btn "EpLigne" into epLigne
            replace "," with "." in epligne
            put hauteurDoc-20 into debY
            put "75" into debX
            put "255,128,128	223,223,0	0,128,0	0,64,128	255,128,64	64,128,128	128,64,64	128,255,0	255,128,255	128,0,255" into line 7 of lescouleurs
            put (the number of items in line 1 of sp3)-(the number of items in line 1 of ronin) into nmCoul
            
            repeat with z = 1 to the number of items in line 1 of ronin
               put return & "<g id=" & quote & "Atomic-elmt-"& z & quote & " label=" & quote & "Legende_" & item z of line 1 of ronin & quote  & " >" after ron        --- Puis on ajoute les légendes des spectres
               put return &  "    <line fill=" & quote & "none" & quote & " stroke=" & quote &"rgb(" & item z of line 7 of lescouleurs & ")" & quote &  " stroke-width=" & quote &  "3" & quote &  " x1=" & quote & debX & quote & " y1=" & quote & deby& quote & " x2=" & quote & debX+20 & quote & " y2=" & quote & debY & quote & " opacity=" & quote & "1" & quote & " onclick='MasquerOuPas(evt, " & quote & "Ref_" &  item z of line 1 of ronin & quote  & "), desactive(evt)' />" after ron   ---axe horizontal
               put return &  "    <text transform=" & quote & "matrix(1 0 0 1 " & debX +25  & " " &  debY+3 & ")" & quote & " font-family=" & quote & "Arial" & quote & " font-size=" & quote & "6" & quote & " >" & item z of line 1 of ronin &"</text>" after ron
               put return & " </g>" after ron
               add 100 to debX
            end repeat

Everything that needs to be interpreted is enclosed between the "<" and ">" tags, and the contents of variables are enclosed between the ">" and "<" tags.

Renaud

[NoN']

Any takers?

I have a lot of work to do, but I'm tempted by your proposal!
As long as I can do it in Livecode, I'm ready to get involved in a project of this nature.

[stam]

That is indeed a big piece of work to do 'properly', and I like probably everyone else, have no time to do this.

But probably is possible to 'kludge' it a bit.
For example, just copying the iconPath data from an svg icon and sticking it in this text in a text file with extension .svg:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 2000 2000" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g id="Layer-1">
<path d="<ICONPATH PROPERTY HERE>" fill="#000000" fill-rule="nonzero" opacity="1" stroke="none"/>
</g>
</svg>

This will create a file that is actually an svg. But a bit large because don't understand the viewPort settings


However, if one is to do this properly, it's of course more complex, and this seems like a valuable resource:
https://www.w3.org/TR/SVG2/

Looking at this, it seems the version of SVG we get in LC is a bit limp, but we knew that already.
It would be good to have a full spec which includes animation and scripted commands...