Hướng dẫn SVG
SVG là viết tắt của Đồ họa vectơ có thể mở rộng.
SVG định nghĩa đồ họa dựa trên vector ở định dạng XML.
Đồ họa SVG có thể mở rộng và không làm giảm chất lượng nếu chúng được phóng to hoặc thay đổi kích thước.
SVG được hỗ trợ bởi tất cả các trình duyệt chính.
Ví dụ trong mỗi chương
Với trình chỉnh sửa "Tự mình thử" của chúng tôi, bạn có thể chỉnh sửa SVG và nhấp vào nút để xem kết quả.
Ví dụ SVG
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100" xmlns="https://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Hãy tự mình thử »Những gì bạn nên biết
Trước khi tiếp tục, bạn cần có hiểu biết cơ bản về những điều sau:
- HTML
- XML cơ bản
Nếu bạn muốn nghiên cứu những chủ đề này trước, hãy tìm các hướng dẫn trên Trang chủ của chúng tôi.
SVG là gì?
- SVG là viết tắt của Đồ họa vectơ có thể mở rộng
- SVG được sử dụng để xác định đồ họa dựa trên vector cho Web
- SVG định nghĩa đồ họa ở định dạng XML
- Mỗi phần tử và thuộc tính trong tệp SVG đều có thể hoạt hình
- SVG là khuyến nghị của W3C
- SVG tích hợp với các tiêu chuẩn khác, chẳng hạn như CSS, DOM, XSL và JavaScript
SVG là Khuyến nghị của W3C
SVG 1.0 trở thành Khuyến nghị của W3C vào ngày 4 tháng 9 năm 2001.
SVG 1.1 trở thành Khuyến nghị của W3C vào ngày 14 tháng 1 năm 2003.
SVG 1.1 (Phiên bản thứ hai) đã trở thành Khuyến nghị của W3C vào ngày 16 tháng 8 năm 2011.
Ưu điểm của SVG
Ưu điểm của việc sử dụng SVG so với các định dạng hình ảnh khác (như JPEG và GIF) là:
- Hình ảnh SVG có thể được tạo và chỉnh sửa bằng bất kỳ trình soạn thảo văn bản nào
- Hình ảnh SVG có thể được tìm kiếm, lập chỉ mục, viết kịch bản và nén
- Hình ảnh SVG có thể mở rộng
- Hình ảnh SVG có thể được in với chất lượng cao ở mọi độ phân giải
- Hình ảnh SVG có thể phóng to
- Đồ họa SVG KHÔNG mất bất kỳ chất lượng nào nếu chúng được phóng to hoặc thay đổi kích thước
- SVG là một tiêu chuẩn mở
- Các tệp SVG là XML thuần túy
Làm thế nào nó hoạt động?
SVG có các thành phần và thuộc tính cho hình chữ nhật, hình tròn, hình elip, đường thẳng, đa giác, đường cong, v.v.
SVG cũng hỗ trợ các hiệu ứng lọc và làm mờ, chuyển màu, xoay, hoạt ảnh, tương tác với JavaScript, v.v.
Một tài liệu SVG đơn giản bao gồm phần tử gốc <svg> và một số phần tử hình dạng cơ bản sẽ cùng nhau tạo nên một đồ họa.
Tạo hình ảnh SVG
Hình ảnh SVG có thể được tạo bằng bất kỳ trình soạn thảo văn bản nào hoặc bằng chương trình vẽ, như Inkscape .
Để bạn tìm hiểu khái niệm và kiến thức cơ bản về SVG, hướng dẫn này sẽ chỉ sử dụng văn bản thuần túy để dạy cho bạn SVG.
Trang tiếp theo hiển thị cách nhúng hình ảnh SVG trực tiếp vào trang HTML!
