Page 1 of 1
Exporting SVG images?
Posted: Thu Apr 25, 2024 8:12 am
by richmond62
Nowadays we can import SVG images into LiveCode tolerably well, but can we export them in SVG format?
Re: Exporting SVG images?
Posted: Thu Apr 25, 2024 1:58 pm
by dunbarx
Richmond.
The dictionary does not seem to include that format in the five it mentions.
Craig
Re: Exporting SVG images?
Posted: Thu Apr 25, 2024 2:41 pm
by stam
is SVG not just a text file? (albeit a specially formatted one?)
Re: Exporting SVG images?
Posted: Thu Apr 25, 2024 3:53 pm
by 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
Re: Exporting SVG images?
Posted: Thu Apr 25, 2024 4:30 pm
by FourthWorld
stam wrote: Thu Apr 25, 2024 2:41 pm
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.
Re: Exporting SVG images?
Posted: Thu Apr 25, 2024 8:21 pm
by dunbarx
So is this worth an enhancement request, to add a sixth format to the "export" command?
Craig
Re: Exporting SVG images?
Posted: Thu Apr 25, 2024 10:36 pm
by FourthWorld
dunbarx wrote: Thu Apr 25, 2024 8:21 pm
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.
Re: Exporting SVG images?
Posted: Fri Apr 26, 2024 3:23 pm
by 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
Re: Exporting SVG images?
Posted: Fri Apr 26, 2024 3:28 pm
by NoN'
FourthWorld wrote: Thu Apr 25, 2024 10:36 pm
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.
Re: Exporting SVG images?
Posted: Mon Apr 29, 2024 12:36 pm
by 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...