Nếu có ai hỏi liệu có ảnh vector nào có thể hiển thị được trên trình duyệt website, câu trả lời sẽ là SVG.
SVG (Scalable Vector Graphics) là một trong những định dạng ảnh vector hiếm hoi có thể hiện thị hình ảnh đồ họa hai chiều trên webiste (bao gồm cả ảnh động và ảnh tương tác). Do là ảnh vector, hình thành dựa trên các tọa độ và phương trình toán học, nên dù có phóng to thu nhỏ ở bất kỳ kích thước nào chúng vẫn luôn giữ được độ nét và mảng màu liền lạc, thứ mà mà các ảnh raster như JPG, PNG, GIF không thể làm được
Đôi nét lịch sử
Định dạng ảnh SVG được Hiệp hội World Wide Web (W3C) phát triển từ năm 1999 và chuẩn hóa lần đầu hồi năm 2001. Tuy nhiên con đường phát triển định dạng tuyệt vời này lại vấp nhiều chướng ngại.
Mọi chuyện bắt đầu từ năm 1998, tập đoàn đồ họa nổi tiếng Adobe tiến hành một dự án với tên gọi là PGML (Precision Graphics Markup Language - Ngôn ngữ định hình đồ họa chính xác) để giải quyết vấn đề đồ họa vector tương tác trên web từ ngôn ngữ XML. Song song với PGML, trên thị trường lúc đó còn có các chuẩn hình ảnh vector khác như VML (của Microsoft) hay Web Schematics, Hyper Graphics Markup Language, WebCGM, DrawML.Tất cả những chuẩn này sau đó được gộp lại thành một chuẩn duy nhất do Hiệp hội World Wide Web quản lý để đảm bảo mọi trang web có cùng một chuẩn ảnh vector và thế là ảnh SVG ra đời. Tuy nhiên khi đó các trình duyệt phải cần đến Flash mới hiển thị được định dạng ảnh này mà lúc đó là thời của trình duyệt Netscape Navigator 4.7 và IE 5.
Ngày nay ảnh SVG đã được hầu hết các trình duyệt hỗ trợ như Internet Explorer, Firefox, Chrome, Safari, Opera,.. thậm chí trên các các thiết bị di động có thể xem được ảnh SVG không cần phải cài thêm bất kỳ 1 plugin nào.
SVG dùng để làm gì
Hãy thử tạo 1 hình SVG đơn giản nhất từ dòng code XML dưới đây
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Kết quả xuất ra hình là 1 hình tròn màu đỏ bán kính r= 50 ở tọa độ xy (60, 60) mà không tùy thuộc vào đơn vị là pixel, inch, hay cm. Điều đó có nghĩa là nó muốn lớn bao nhiêu cũng được.
SVG và HTML5
3 cách chèn ảnh SVG vào web
1. chèn trực tiếp vào HTML
<div class="hinh-svg-cua-tui-ne">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
2. Dùng với thẻ IMG như 1 ảnh bình thường
<img src="/vietchigo.svg" />
3. Dùng trong CSS như một ảnh làm background bình thường:
file HTML
<div class="icon-vietchigo"></div>
trong file css
.icon-vietchigo {
background-image: url("vietchigo.svg");
...
}
Những biến thể SVG
Lưu ý là còn 1 định dạng khác là SVGZ là định dạng nén của SVG có thể nhỏ hơn từ 30% đến 50% so với kích thước ban đầu.
Tham khảo:
https://tinhte.vn/thread/thang-tram-cua-svg-dinh-dang-anh-zoom-co-nao-cung-khong-so-be.2533698/
https://kipalog.com/posts/Su-dung-file-SVG-cho-website
