SVG (Scalable Vector
Graphics) là ngôn ngữ (
language ) dùng để vẽ hình hai chiều trong Browser bằng cách viết code,
chữ và số trong XML đã thành tiêu chuẩn quốc tế W3 từ năm 1999. Do đó nếu Browser nào không hổ trợ SVG thì
không thể vẽ gì được.
Với SVG,chúng ta có thể vẽ được 3 loại hình là : Vector Graphics Shapes, Images, Text
SVG có những
tiện lợi là dễ thực hành, đơn giản, dễ nhớ và hình vẽ làm di động
rất dể dàng với SMIL ( Synchronized
Multimedia Integration Language ) nếu cần.
Chúng ta có
thể làm hình vẽ SVG thu nhỏ hay phình lớn tuỳ theo kích thước của màn hình monitor
nhưng hình không bị nhòa như hình bitmap vẽ bằng html 5 Canvas.
SVG có một đặc
điểm rất hay gọi là transform
attribute. Dùng đặc điểm nầy chúng ta có thể thay đổi vị trí của tọa độ, thay
đổi hình dạ̣ng và thay đổi độ lớn hay độ nhỏ của hình vẽ mà không cần
phải vẽ lại hình khác.
Transform attribute của SVG gồm có.
* transform=” translate(x,y)” để chuyển
đổi vị trí toạ độ nếu hình vẽ bị che khuất.
Thí dụ transform=” translate(175, 150)”.Nếu không xác định y
thì default sẽ cho 0
* transform=” scale (x,y)”
để thay đổi hình vẽ lớn hơn hay nhỏ hơn tùy ý.
Thí
dụ transform="scale(0.5)”.Nếu
chỉ chọn một con số cho scale mà thôi thì tòan bộ thành phần của
hình sẽ theo scale của con số đó.
* transform=”rotate(angle,cx,cy)” để
xoay chuyển hình vẽ theo góc độ và thay đổi tâm (center ) của hình.
Thí dụ transform=” rotate(45,100,100)”.Nếu không xác định cx
và cy thì default sẽ rotate chung quanh
vị trí đã có ( rotates around the origin)
* transform=”skewX(angle)” làm hình
nghiên vào trục X.
Thí dụ transform=”skewX(5)”.Khỏang cách giữa hình và
trục là tan của góc ( the distance of skew is the tan of the angle)
* transform=”skewY(angle)” làm hình
nghiên vào trục Y
Thí dụ transform=” skewY(5)"
Thực tập.
Chúng ta vẽ và tô màu 2 hình chữ nhật và một
hình vòng tròn bằng cách viết code SVG như sau.
Đem xử dụng
hết tất cả các SVG transforms nêu
ra ở phần trên bằng cách viết lại bảng code như dưới đây thì 3 hình
vẽ trên sẽ đổi thành dạng méo xẹo và có độ lớn bằng 1/2 của 3 hình cũ. .
