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?