<!DOCTYPE html>
<g id="container"> // Hồ cá
<rect x="5" y="15" width="400" height="360"
stroke="blue" fill="aqua"/>
<g
id="rong1" transform=translate(92,80)
rotate(-5)">
<path d="M 20 200,C 20
50,30 15,30 25 Z" stroke="lightgreen"
fill="green"/></g> // Rong rêu 1
<g
id="rong2"
transform="translate(60,60) scale(0.7)">
<path d="M 100 300,C 100
50,140 15,130 5 Z" stroke="lightgreen"
fill="green"/></g> // Rong rêu 2
<g
id="rong3" transform="translate(90,110)
scale(0.5) rotate(4)">
<path d="M 100 300,C 100
50,140 15,130 5 Z" stroke="lightgreen" fill="green"
/></g> // Rong rêu 3
<g
id="bubble1">
<circle cx="350"
cy="50" r="15" stroke="green"
fill="white">
<animate
attributeName="cy" dur="2" from="290" to
="50" repeatCount="indefinite"/> // Bong bóng nước 1
</animate></circle>
<text font-family="brush script
MT" font-size="15px" stroke="green" x="260"
y="300">HeDuong-2012</text></g>
<g
id="bubble2">
<circle cx="320"
cy="200" r="10" stroke="green"
fill="white">
<animate
attributeName="cy" dur="5" from="290" to
="50" repeatCount="indefinite" /> // Bong bóng nước 2
</animate></circle></g>
<g
id="fish1" transform="translate(10,190)
scale(0.6)"> //red fish thu nho 0.6
<path d="M 200 160,C 250 200,350 120,200 160,
L 200 160,180 170,
L 200 160,175 150,
C 175 150,185 160,180 170 Z" stroke="grey"
stroke-width="2" fill="red"/>
<circle cx="260" cy="155" r="3"
stroke="black" fill="blue"/>
<animateMotion
begin="2" dur="10" from="10,20"
to="200,-200" repeatCount="indefinite"/>
</animateMotion></g>
<g
id="fish2" transform="translate(-15,-20)
scale(0.7)">// gold fish thu nho 0.7
<path d="M 200 160,C 250 200,350 120,200 160,
L 200 160,180 170,
L 200 160,175 150,
C 175 150,185 160,180 170 Z" stroke="grey"
stroke-width="2" fill="gold"/>
<circle cx="260" cy="155" r="4"
stroke="gold" fill="blue"/>
<animateMotion begin="5" dur="4"
from="0,0" to="135,170" repeatCount="indefinite"/>
</animateMotion></g>
<g id="fish3" transform="translate(20,190) scale(0.5)">//grey fish thu nho
0.5
<path d="M 200 160,C 230 200,300 120,200 160,
L 200 160,180 170,
L 200 160,175 150,
C 175 150,185 160,180 170 Z" stroke="brown"
stroke-width="2" fill="grey"/>
<circle cx="240" cy="155" r="3"
stroke="black" fill="blue"/>
<animateMotion begin="10" dur="20"
from="10,15" to="100,-200"
repeatcount="indefinite"/>
</animateMotion></g>
</rect> </g></svg>
 |
| Đây là hình vẽ theo SVG. |
Chi Chú Hướng Dẫn.
SVG là chữ viết tắt của Scalable
Vector Graphic dùng để vẽ Vector Images trong cách viết của XML cho
nên không cần viết thêm tags của HTML.
SVG xuất hiện vào năm 1999 do công trình phát minh của Adobe,
Apple và IBM.
Vẽ hình bằng cách chúng ta tự chọn tọa độ x,y .SVG sẽ nối
các tọa độ thành hình vẽ.
Hình vẽ theo SVG có High
Resolution, có thể thu nhỏ hay giản rộng.
Chúng ta có thể làm hình SVG chuyển động theo ý muốn.
Chữ d nghĩa là bắt
đầu vẽ (depart)
Chữ M nghĩa là move to.
Chữ C nghĩa là curve.
Chữ L nghĩa là line.
Chữ A vẽ elliptical Arc
Chữ H vẽ horizontal
line.
Chư V vẽ vertical line.
Chữ S vẽ smooth curve.
Chữ Q vẽ quadratic
Bezier curve
Chư Z nghĩa là close
path, nghĩa là đóng hình vẽ
Trước khi bắt đâù vẽ cần phải có
declaration như sau.
NẾU THIẾU THÌ HÌNH KHÔNG XUẤT HỊÊN.
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<svg xmlns="http://www.w3.org/2000/svg" width="5000"
height="3000">
HOẶC :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox = "0 0 100 100" version =
"1.1">
Mỗi hình vẽ phải xếp riêng trong một cặp tag
<g>…</g>.
Những hình vẽ chúng ta muốn xếp trong cùng một nhóm thì chỉ
cần một cặp tag <g>…</g> cho nhóm đó mà thôi.
Mỗi nhóm cần có một ID để dễ phân biệt.
Xem bài viết trên,chúng ta thấy có 9 nhóm có ID khác nhau.
SAU KHI VẼ XONG ,MUỐN
HÌNH NÀO PHẢI CHUYỂN ĐỘNG THÌ CẦN PHẠI HỌC BÀI SVG ANIMATION
