HOC VẼ HÌNH THEO SVG RẤT HAY.

HỌC VẼ HÌNH BẰNG SVG RẤT HAY.

svg nghĩa là Scalable Vector Graphic

Phương pháp nầy dạy vẽ những hình rất nhẹ hơn hỉnh gif, png.

Khi kéo hình lớn ra hoặc thu nhỏ lại theo ý muốn, hình không bị hư lệch.

Loaị hình vè nâỳ rất hay, được xử dụng rất phổ thông khi muốn tạo hình di chuyển.

Bài kế tiếp “Cách Làm Hình SVG Chuyển Động Trên Quỷ Đạo”

                         ----------------------

Phương pháp SVG nầy xuất hiện vào năm1998 và thành tiêu chuẩn quốc tế năm 2000 cho nên câu đầu tiên và cuối bảng vé phải viết như sau thì hình mới xuất hiện.

 <svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">

</svg>

Trong câu đầu tiên phải có kích thước tự do chọn cho chiều rộng và chiều cao của view port tính theo pixels. Hình vẽ sẽ phải nằm trong view port.

Cuối bảng vẽ phải có dấu chấm dứt lã </SVG>. 

Thí dụ thực hành.
Trước tiên vẽ hinh chử nhật rồi vẽ một đường thẳng và một vòng tròn. Tất cả đều được tô màu        

Mở notepad rồi viết như sau.

(Copy rồi paste vào Notepad) 

<svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">       

    <rect x="150" y="100" width="200" height="150" stroke="blue" fill="aqua"/>//phải có dấu chận

    </rect>

    <line  x1="250" y1="150" x2="300" y2="200" stroke-width="4" stroke="red"/> // phải có dấu chận

    <circle cx="300" cy="150" r="20" stroke="red" fill="blue"

    </circle>

</svg>

------------------------

Ghi chú .

Không cần dùng html. Cần ấn định kich thước của khung vẽ gọi là view port đo bằng pixels theo default .

Ấn định tọa độ x,y của hình và ấn định kích thước của hình tuỳ ý.

Tung độ phải đo theo chiều âm.

Đường thẳng có toạ độ của điểm khởi hành x1,y1 và điểm cuối x2,y2

Vong tròn có tọa độ của tâm là cx, cy và bán kinh r

Save tức là tồn trử bảng vẽ bằng cách viết như sau   SVG RECT.html. Hình sẽ được tồn trử trong document của computer.

Chuyền hình tử document ra desktop thì tạo desktop shortcut rôi dung Browser Google mở xem.

MUỐN VIẾT CHỮ TRONG SVG THÌ VIẾT NHƯ SAU.

<svg xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">            

    <rect x="150" y="100" width="200" height="150" stroke="blue" fill="aqua"/>//phải có dấu chận

    </rect>

    <line  x1="250" y1="150" x2="300" y2="200" stroke-width="4" stroke="red"/> // phải có dấu chận

    <circle cx="300" cy="150" r="20" stroke="red" fill="blue"/>phaỉ có dậu chận để phân dưới hiện ra

    </circle>

    <text x="80" y="300" font-size="30" font-family="arial" fill="red">THÂN CHAO QUÝ BẠN</text>

</svg>