Một ví dụ SVG

SVG được viết bằng XML.

Ví dụ SVG

Dưới đây là ví dụ của một tệp SVG đơn giản. Tệp SVG phải được lưu với đuôi .svg:

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Xem ví dụ (chỉ áp dụng cho trình duyệt hỗ trợ SVG)

(Nếu bạn muốn xem mã nguồn SVG, hãy mở ví dụ này, sau đó nhấp phải chuột vào cửa sổ. Chọn “Xem mã nguồn”.)

Giải thích mã:

Dòng đầu tiên chứa phần khai báo XML. Lưu ý thuộc tính standalone! Thuộc tính này quy định tệp SVG này có phải là “độc lập” hay có tham chiếu đến tệp ngoài.

standalone="no" có nghĩa là tài liệu SVG sẽ tham chiếu đến một tệp ngoài - ở đây là tệp DTD.

Dòng thứ hai và thứ ba tham chiếu đến SVG DTD外部. DTD này nằm tại “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. DTD này nằm tại W3C, chứa tất cả các phần tử SVG được phép.

Mã SVG bắt đầu bằng phần tử <svg>, bao gồm thẻ mở <svg> và thẻ đóng </svg>. Đây là phần tử gốc. Các thuộc tính width và height có thể thiết lập chiều rộng và chiều cao của tài liệu SVG. Thuộc tính version có thể xác định phiên bản SVG được sử dụng, thuộc tính xmlns xác định không gian tên SVG.

SVG <circle> được sử dụng để tạo một hình tròn. Các thuộc tính cx và cy xác định tọa độ x và y của tâm hình tròn. Nếu bỏ qua hai thuộc tính này, điểm tròn sẽ được đặt tại (0, 0). Thuộc tính r xác định bán kính của hình tròn.

Thuộc tính stroke và stroke-width kiểm soát cách hiển thị đường viền của hình ảnh. Chúng ta sẽ thiết lập viền của hình tròn là 2px và có viền đen.

Thuộc tính fill thiết lập màu sắc bên trong hình ảnh. Chúng ta sẽ thiết lập màu sắc lấp lánh là đỏ.

Công dụng của thẻ đóng là đóng lại phần tử SVG và tài liệu本身.

Ghi chú:Tất cả các thẻ mở bắt buộc phải có thẻ đóng!