The background

Now we start from the background layer. And let's make the poster width=900px and height=1200px. And we scale it to 0.5 to fit into this blog.

Here is the result of this SVG

And here is the SVG code

1. <svg xmlns='http://www.w3.org/2000/svg' version='1.2' baseProfile='tiny' xmlns:xlink='http://www.w3.org/1999/xlink' width='450' height='600'>
2. <title>Namo Amitabha Buddha ★ 南無阿彌陀佛</title>
3. <defs>
4. <linearGradient id='LGbgBlue' x2='0' y2='1'><stop stop-color='#22a1d4'/><stop offset='1' stop-color='#13526c'/></linearGradient>
5. </defs>
6. <g transform='scale(0.5)'>
7. <rect width='900' height='1200' fill='url(#LGbgBlue)'/>
8. </g><!--scale-->
9. </svg>

What a good start!

Is it easy to make? SVG file starts and ends with svg tag.

Line 1 is the standard definition of the SVG file, simply copy and paste, it is same or samiliar for each SVG file.

Line 2 is the title of the SVG file, easy to understand.

Line 3-5 is a place for definition of objects, called by tags later.

Make sure each tag matches, so Line 6 matches Line 8. SVG is a kind of strict XML, which will stop to work if a tiny error found.

SVG is a good image format, that you can zoom to any size without any quality loss.

SVG code tip

+ Embed SVG in HTML, you need to specify svg width, height
+ rect default x1=0 y1=0 so you do not need to type

For SVG manual, check out w3c site

若人欲知佛境界，当净其意如虚空

色不異空　空不異色　色即是空　空即是色　受想行識　亦復如是