- Tham gia
- 28/02/2015
- Bài viết
- 16,989
- Được Like
- 12,732
Tìm hiểu cách tạo ảnh SVG trong HTML5
Scalable Vector Graphics (SVG) là một loại ảnh vector, không dựa trên cơ sở pixel ảnh nên chất lượng ảnh không thay đổi khi phóng to hay thu nhỏ. Nó được vẽ bằng cách sử dụng ngôn ngữ đánh dấu kiểu như HTML. Nó đưa ra một số phương pháp để vẽ như các đường, hình tròn, ảnh, văn bản ...
Chèn ảnh SVG vào trang
Ảnh SVG có thể được lưu thành file riêng biệt với trang hoặc vẽ trực tiếp trên trang. Nếu lưu ra file riêng biệt ví dụ image.svg thì ảnh được chèn vào trang bằng cách sử dụng thẻ img
Ví dụ tạo nội dung svg như sau và ghi lại thành file image.svg
Kết quả là:
Tạo ảnh SVG
Các ảnh SVG được tạo ra bằng cách bắt đầu sử dụng thẻ <svg>, cú pháp có dạng:
Vẽ các hình trong SVG
Vẽ hình tròn SVG
Sử dụng thẻ vẽ hình tròn <circle>
Các thuộc tính trong <circle> là:
Vẽ hình ellipse SVG
Dùng <ellipse> để vẽ ellipse:
Vẽ hình vuông
Dùng <rect> để vẽ hình vuông:
Vẽ đoạn thẳng SVG
Dùng <line> để vẽ các đoạn thẳng:
Vẽ các đường gấp khúc svg
Dùng <polyline> để vẽ đường gấp khúc, trong đó thuộc tính points theo tứ tự chỉ ra các tọa độ x,y của các điểm cần nối lại với nhau:
Vẽ hình đa giác trong svg
Dùng <polygon> đa giác, trong đó points xác định tọa độ x,y của các đỉnh đa giác:
Vẽ theo đường dẫn path - svg
Sử dụng <path> để vẽ các hình phức tạp, đường dẫn để vẽ được định nghĩa trong thuộc tính d="cách - lệnh vẽ"
Các lệnh sử dụng trong thuộc tính d là:
Ảnh động SVG
Sử dụng <animate> để tạo ảnh động, ví dụ:
Trong <animate> có các thuộc tính:
Để thêm chữ vào SVG bắt đầu tại tọa độ (x,y) thì sử dụng <text> ví dụ:
<text> có các thuộc tính: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing, text-decoration.
tspan
Dùng để định dạng thêm chữ trong text
textPath
Vẽ text theo một đường cho trước:
Công cụ
Sử dụng công cụ sau để vẽ nhanh SVG: https://inkscape.org/en/
Chúc các bạn thành công.
Scalable Vector Graphics (SVG) là một loại ảnh vector, không dựa trên cơ sở pixel ảnh nên chất lượng ảnh không thay đổi khi phóng to hay thu nhỏ. Nó được vẽ bằng cách sử dụng ngôn ngữ đánh dấu kiểu như HTML. Nó đưa ra một số phương pháp để vẽ như các đường, hình tròn, ảnh, văn bản ...
Chèn ảnh SVG vào trang
Ảnh SVG có thể được lưu thành file riêng biệt với trang hoặc vẽ trực tiếp trên trang. Nếu lưu ra file riêng biệt ví dụ image.svg thì ảnh được chèn vào trang bằng cách sử dụng thẻ img
Ví dụ tạo nội dung svg như sau và ghi lại thành file image.svg
Mã:
<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
Mã:
<img src="image.svg" alt="" height="300" />
Kết quả là:
Các ảnh SVG được tạo ra bằng cách bắt đầu sử dụng thẻ <svg>, cú pháp có dạng:
Mã:
<svg width="1000" height="1000">
....các thẻ vẽ, thiết lập ở đây
</svg>
Vẽ các hình trong SVG
Vẽ hình tròn SVG
Sử dụng thẻ vẽ hình tròn <circle>
Mã:
<svg width="180" height="180">
<circle cx="80" cy="80" r="50" fill="green" stroke="yellow"/>
</svg>
Các thuộc tính trong <circle> là:
- cx vị trí tâm, tính từ mép trái của SVG
- cy vị trí tâm, tính từ mép trên
- r bán kính
- fill xác định màu tô
- stroke thêm đường biên
Dùng <ellipse> để vẽ ellipse:
Mã:
<svg height="100" width="200">
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:green" />
</svg>
Dùng <rect> để vẽ hình vuông:
Mã:
<svg width="340" height="120">
<rect width="300" height="100" x="20" y="20" fill="green" />
</svg>
Dùng <line> để vẽ các đoạn thẳng:
Mã:
<svg width="220" height="60">
<line x1="30" y1="10" x2="200" y2="50"
style="stroke: green; stroke-linecap:round; stroke-width:20;" />
</svg>
Dùng <polyline> để vẽ đường gấp khúc, trong đó thuộc tính points theo tứ tự chỉ ra các tọa độ x,y của các điểm cần nối lại với nhau:
Mã:
<svg width="130" height="160">
<polyline
points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
fill="#F9F38C" stroke="green" stroke-width="6" />
</svg>
Dùng <polygon> đa giác, trong đó points xác định tọa độ x,y của các đỉnh đa giác:
Mã:
<svg width="320" height="220">
<polygon points="100 100, 200 200, 300 10"
style="fill: green; stroke:#F9F38C;" stroke-width="5" />
</svg>
Sử dụng <path> để vẽ các hình phức tạp, đường dẫn để vẽ được định nghĩa trong thuộc tính d="cách - lệnh vẽ"
Các lệnh sử dụng trong thuộc tính d là:
- M : di chuyển điểm vẽ đến tọa độ x, y (M x y)
- L : vẽ từ điểm hiện tại đến điểm x, y (L x y)
- H : vẽ đường ngang từ điểm hiện tại đến điểm có tọa độ x (H x)
- V : vẽ đường thẳng đứng đến điểm có tọa độ y (V y)
- C : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. Điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x2, y2 C x1 y1, x2 y2, x, y
- S : vẽ đường cong trơn từ điểm hiện tại x0, y0 đến điểm x, y trong đó điểm đầu tiếp tuyến với đường x0,y0, x2, y2 S x2 y2, x y
- Q : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. Điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x1, y1 C x1 y1, x y
- T : vẽ đường cong cubic-bezier, từ điểm hiện tại đến điểm x,y (T x y)
- A : vẽ cung tròn
- Z : đóng đường vẽ
Mã:
<svg width="100" height="100">
<path d="M 0 0 C 100 0, 0 100, 100 100"
style="stroke:black; fill:green" />
</svg>
Ảnh động SVG
Sử dụng <animate> để tạo ảnh động, ví dụ:
Mã:
<svg width="500" height="30">
<rect width="20" height="20" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="10s" fill="freeze" repeatCount="indefinite"/>
</rect>
<circle cx="0" cy="15" r="5" fill="green" stroke="yellow">
<animate attributeName="cx" from="0" to="300"
dur="5s" fill="freeze" repeatCount="indefinite"/>
</circle>
</svg>
- attributeName : chỉ ra thuộc tính sẽ bị tác động để tạo ảnh động.
- from : giá trị thuộc tính nhận được ban đầu
- to : giá trị thuộc tính nhận được ở điểm cuối của hoạt động
- dur : thời gian ảnh động diễn ra
- fill : cách thiết lập khởi tạo khi bắt đầu động, remove khởi tạo giá trị, freeze giữ giá trị ban đầu.
- repeatCount : chỉ ra số lần lặp lại (indefinite lặp lại vô hạn)
Để thêm chữ vào SVG bắt đầu tại tọa độ (x,y) thì sử dụng <text> ví dụ:
Mã:
<svg width="500" height="30">
<text x="10" y="10">Hello World!</text>
</svg>
tspan
Dùng để định dạng thêm chữ trong text
Mã:
<svg width="500" height="100" style="background: #ffc107">
<text x="50" y="30" font-weight="bold">Hello World!
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
</svg>
Vẽ text theo một đường cho trước:
Sử dụng công cụ sau để vẽ nhanh SVG: https://inkscape.org/en/
Chúc các bạn thành công.
Nguồn: Internet
Bài viết liên quan
Bài viết mới