RE: Using gpp preprocessor to create more easily svg code

<[email protected]> 05 Feb 2014 00:26:05 -0800
Newsgroups gmane.text.xml.svg.devel
Message-ID <[email protected]>
Look at the below example :
 

 #include "svg.inc"
 SVG__("svg10",0,0,400,400)
 DEF__
 CSS__
 _STY(_st1, _FSS(none,1,black,1))
 _STY(_st2, _FSS(black,1,none,0) _TSS("Comic sans Ms",1.5cm) _invi;)
 __CSS
 __DEF
 _RCT("vp",0,0,400,400,_st1,)
 _IMG("logo",100,100,0,0,"egc.png",)
 _TXT("txt",-150,100,_st2,2014,)
 _ANFT(start,logo,x,0s,3s,175,100,1) 
 _ANFT(,logo,y,start.begin,3s,188,100,1) 
 _ANFT(,logo,width,start.begin,3s,0,150,1) 
 _ANFT(,logo,height,start.begin,3s,0,176,1) 
 _ANFT(step1,logo,x,start.end+1s,3s,100,175,1)
 _ANFT(,logo,y,step1.begin,3s,100,188,1)
 _ANFT(,logo,width,step1.begin,3s,150,0,1)
 _ANFT(,logo,height,step1.begin,3s,176,0,1)
 _ANFT(,txt,display,start.begin,0.1s,none,block,1)
 _ANFT(,txt,x,start.begin+0.1s,3s,-150,50,1)
 _ANFT(,txt,x,step1.begin,3s,50,-150,1)
 __SVG
 
This code define an animation with image and text.
 The graphical elements are draw first, but still invisible
 The _ANFT macros are <animate> tags for a given attribute (x, y, etc)
 2 major steps are used : start.begin (0s), step1.begin (3s)
 

 There is the _ANFT macro definition :
 

 #define _ANFT <animate id="#1" xlink:href="##2" attributeName="#3" attributeType="auto" begin="#4" dur="#5" from="#6" to="#7" repeatCount="#8" fill="freeze"/>
 

 Remarq the ##2, because # is used for macro argument prefix !
 

 With a bit more complexity in source code, you can use #define as variables. GPP accept too a #eval expr, to do some simple calculus.
 The #include  permet include other macro or inline svg native tags !
 I use it to animate some sprites. The sprites are draw as individual svg.
 Each is a path, invisible at start.
 The svg animation code have just to give each element visible or not, on a given timeline (begin, duration)
 I discover we can draw all graphical elements first with an id, and after write the code to animate the elements, very more easy than imbricate animation in each element, as i see in some web examples !
 


 

 
---In [email protected], <claird@...> wrote:

 On Tue, Feb 04, 2014 at 02:14:55AM -0800, yves.lafont@... mailto:yves.lafont@... wrote:
 .
 .
 .
 > Hello, i'am a french programmer since years, and i use often macro processors to give some facility to coding. 
 > SVG is not a functional langage, as JavaScript.
 > I think SVG is very powerful, and can be used alone, in some cases, without JS or external libraries.
 > So, i found GPP, a simple but powerful macro preprocessor, and write a 60 lines macros definitions to write easy SVG in texte files. GPP support #include and #define statements, so many usual svg definitions can be written in macros.
 > I give you some samples below :
 > 
 > 
 > The two following lines tell to use the macro user file (svg.inc), and create the xml and svg header, with x,y,width, height, and default viewport
 > 
 > 
 > #include "svg.inc"
 > SVG__("svg31",0,0,400,400)
 > 
 > 
 > Below is the SVG generated code (with GPP) :
 > 
 > 
 > <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/D http://www.w3.org/Graphics/SVG/1.1/D TD/svg11.dtd">
 > <svg version="1.1" xmlns="http://www.w3.org/2000/svg" http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" http://www.w3.org/1999/xlink" id="svg31" x="0" y="0" width="400" height="400" viewbox="0 0 400 400" xml:space="preserve">
 > 
 > 
 > The following lines create a <def> zone with some css statements :
 > 
 > 
 > DEF__
 > <!-- Css Defs -->
 > CSS__
 > _STY(_st1,_FSS(blue,1,red,2))
 > _STY(_st2,_FSS(red,0.5,green,4))
 > _STY(_st3,_FSS(none,1,black,1))
 > _STY(_st4,_FSS(green,1,yellow,1) _TSS("Comic sans Ms",1cm))
 > __CSS
 > __DEF
 > 
 > 
 > The _FSS macro define fill and stroke parameters
 > The _TSS macro define font-family and font-size parameters
 > 
 > 
 > The following lines define some graphic elements :
 > 
 > 
 > _RCT("rec1",10,10,70,50,_st1,)
 > _CIR("cir1",120,120,30,_st2,)
 > _PTH("tri1","M120 20 L200 20 L150 50 L120 20",_st3,)
 > _TXT("txt1",10,100,_st4,Egc,)
 > 
 > 
 > _RCT is a <rect>, _CIR a circle, _PTH a path, _TXT a text
 > Each element have a style, and can integrate some animate tags as last argument.
 > 
 > 
 > I write the code as : source.txt
 > I use the console command : gpp source.txt -o result.svg
 > And i load result.svg in internet browser to see the svg file
 > Errors are very easy to see and correct.
 > 
 > 
 > 
 > 
 > I write some others macros to simplify gradients, filters, and animation tags.
 > 
 > 
 > Please, feedback if interested about this subject.
 > Thank you very much
 > 
 > 
 > Greetings to all svg'rs !
 .
 .
 .
 And welcome to you, Yves. Yes, I quite agree that SVG, even in isolation, has
 remarkable potential. While I probably won't myself adopt gpp as you've pre-
 sented it here, I think your introduction to gpp is perfect: you capture the
 essentials of its use and hint at the benefits to coders, in just a few
 easily-understood lines. You surely influence the thinking of even those you
 don't immediately "convert".
 
 Yves, how do you express inclusion (nesting, hierarchy, ...) of elements (tags)
 in your macro language?