SVG là gì?

Định nghĩa SVG (Scalable Vector Graphics)

SVG là gì? SVG (Scalable Vector Graphics) là một định dạng đồ họa vector dựa trên ngôn ngữ đánh dấu XML, được sử dụng để hiển thị hình ảnh, biểu đồ và các yếu tố đồ họa trên web. Không giống như các định dạng ảnh bitmap như JPEG hay PNG vốn lưu trữ thông tin dưới dạng điểm ảnh (pixel), SVG lưu trữ thông tin dưới dạng các đường, hình dạng, và văn bản dưới dạng toán học.

Điểm khác biệt quan trọng nhất của SVG là khả năng co giãn không giới hạn mà không làm mất chất lượng hình ảnh. Dù bạn phóng to một hình SVG lên gấp 10 hay 100 lần, nó vẫn giữ nguyên độ sắc nét và không bị vỡ hình. Đây là lý do tại sao SVG trở thành lựa chọn lý tưởng cho thiết kế web responsive, nơi các yếu tố đồ họa cần hiển thị tốt trên nhiều kích thước màn hình khác nhau.

Ví dụ đơn giản về mã SVG để tạo một hình tròn màu đỏ:

xml

<svg width="100" height="100">

  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</svg>

Đoạn mã trên tạo ra một hình tròn có các thuộc tính sau:

• Bán kính: 40px
• Tâm hình tròn: tọa độ (50, 50), nằm chính giữa khung SVG
• Viền: màu đen, độ dày 2px
• Màu tô bên trong: đỏ
• Kích thước khung SVG: 100x100px

SVG (Scalable Vector Graphics) là một định dạng đồ họa vector dựa trên ngôn ngữ đánh dấu XML

Lịch sử và tiêu chuẩn phát triển của SVG

SVG được phát triển bởi Tổ chức W3C (World Wide Web Consortium) từ năm 1999, với phiên bản SVG 1.0 chính thức trở thành tiêu chuẩn vào năm 2001. Đây là một định dạng mở, không bị ràng buộc bởi bản quyền và được sử dụng rộng rãi trong cộng đồng web.

Qua thời gian, SVG đã trải qua nhiều phiên bản cải tiến, với SVG 2.0 đang trong quá trình phát triển. Sự phổ biến của SVG ngày càng tăng, đặc biệt khi xu hướng thiết kế responsive và retina display trở nên phổ biến. Hiện nay, SVG được hỗ trợ bởi tất cả các trình duyệt web hiện đại và đóng vai trò quan trọng trong thiết kế web, UI/UX, biểu đồ tương tác, và nhiều lĩnh vực khác.

Từ một công nghệ còn khá mới mẻ cách đây hai thập kỷ, SVG đã phát triển thành một phần không thể thiếu trong bộ công cụ của mọi nhà thiết kế và lập trình viên front-end hiện đại.

Ưu điểm và nhược điểm của SVG

Ưu điểm của SVG

SVG mang đến nhiều lợi ích vượt trội so với các định dạng hình ảnh truyền thống:

• Khả năng co giãn vô hạn: Hình ảnh SVG không bị vỡ hay mờ khi phóng to, thu nhỏ hoặc hiển thị trên màn hình có độ phân giải cao.
• Chỉnh sửa dễ dàng bằng mã: Bạn có thể trực tiếp chỉnh sửa màu sắc, kích thước và các thuộc tính khác bằng mã HTML, CSS hoặc JavaScript.
• Kích thước file nhỏ gọn: Với những hình đơn giản như logo, icon, SVG thường có kích thước nhỏ hơn nhiều so với PNG hay JPEG tương đương.
• Tương thích tuyệt vời với CSS và JavaScript: Bạn có thể dễ dàng tạo hiệu ứng, animation và tương tác người dùng với SVG.
• Hỗ trợ animation: SVG cho phép tạo các animation phức tạp mà không cần dùng đến JavaScript hay các thư viện bên ngoài.
• Khả năng truy cập tốt hơn: SVG hỗ trợ văn bản thay thế và có thể được đọc bởi các công cụ hỗ trợ người khuyết tật.
• Tương thích với tìm kiếm (SEO): Các nội dung văn bản trong SVG có thể được đánh index bởi các công cụ tìm kiếm.

Nhược điểm của SVG

Mặc dù có nhiều ưu điểm, SVG vẫn có một số hạn chế cần lưu ý:

• Không phù hợp với hình ảnh phức tạp: Với ảnh chụp hoặc hình ảnh có nhiều chi tiết và màu sắc phức tạp, SVG không phải lựa chọn tối ưu về kích thước file và hiệu suất.
• Khả năng tương thích với trình duyệt cũ: Một số trình duyệt cũ có thể không hỗ trợ đầy đủ các tính năng của SVG.
• Đường cong phức tạp có thể làm tăng kích thước file: Với các đồ họa vector có nhiều đường cong chi tiết, file SVG có thể trở nên lớn và ảnh hưởng đến hiệu suất.
• Chưa tương thích hoàn toàn với tất cả phần mềm chỉnh sửa đồ họa: Một số công cụ có thể không xuất hoặc nhập SVG một cách chính xác.
• Đòi hỏi kiến thức kỹ thuật để tối ưu: Việc tối ưu hóa SVG để đạt hiệu suất tốt nhất đòi hỏi hiểu biết về cả đồ họa và mã.

Ứng dụng SVG trong thực tế

Trong thiết kế web và UI

SVG đã trở thành công cụ không thể thiếu trong thiết kế web hiện đại. Các nhà thiết kế web sử dụng SVG cho hầu hết các yếu tố đồ họa cần độ sắc nét cao và khả năng phản ứng tốt trên nhiều thiết bị.

Logo và biểu tượng thương hiệu là ứng dụng phổ biến nhất của SVG. Việc sử dụng SVG đảm bảo logo luôn hiển thị sắc nét trên mọi màn hình, từ điện thoại di động đến màn hình retina độ phân giải cao. Các hệ thống icon UI cũng thường được thiết kế dưới dạng SVG, giúp giảm thời gian tải trang và tăng khả năng tùy biến.

Ngoài ra, SVG còn được sử dụng rộng rãi trong việc tạo biểu đồ tương tác, infographic và các yếu tố minh họa phức tạp. Các thư viện như D3.js kết hợp với SVG để tạo ra những biểu đồ dữ liệu sống động, có thể tương tác và phản hồi với người dùng.

SVG đã trở thành công cụ không thể thiếu trong thiết kế web hiện đại

Trong lập trình front-end

Đối với lập trình viên front-end, SVG mở ra nhiều khả năng sáng tạo. Vì SVG là một phần của DOM (Document Object Model), các phần tử trong SVG có thể được tạo, thay đổi và thao tác bằng JavaScript giống như bất kỳ phần tử HTML nào khác.

SVG kết hợp hoàn hảo với CSS để tạo ra các hiệu ứng chuyển động, thay đổi màu sắc khi hover, và các animation phức tạp. Các framework JavaScript hiện đại như React, Vue và Angular đều có các công cụ và thư viện hỗ trợ làm việc với SVG, giúp việc tạo ra các giao diện người dùng động trở nên dễ dàng hơn.

Trong thiết kế in ấn và đồ họa

Không chỉ giới hạn trong web, SVG còn được sử dụng rộng rãi trong lĩnh vực thiết kế in ấn. Khả năng co giãn không giới hạn của SVG làm cho nó trở thành lựa chọn lý tưởng cho việc tạo ra các tài liệu in ấn chất lượng cao, từ danh thiếp đến áp phích quảng cáo lớn.

Các phần mềm thiết kế đồ họa chuyên nghiệp như Adobe Illustrator, Inkscape đều hỗ trợ xuất và nhập file SVG, giúp các nhà thiết kế dễ dàng chuyển đổi giữa môi trường web và in ấn. Điều này tạo ra tính nhất quán trong nhận diện thương hiệu trên mọi phương tiện.

Bạn đọc tham khảo thêm: 

Tìm hiểu Postman là gì? Cách dùng Postman để test API

Rest API là gì? Những điều cần biết để thiết kết hiệu quả

Cách sử dụng SVG cơ bản trong HTML và CSS

Nhúng SVG trực tiếp trong HTML

Đây là cách phổ biến và linh hoạt nhất để sử dụng SVG. Bằng cách chèn mã SVG trực tiếp vào file HTML, bạn có thể dễ dàng chỉnh sửa, style bằng CSS, hoặc thao tác động bằng JavaScript.

Ví dụ:

html

<!DOCTYPE html>

<html>

<head>

    <title>SVG Inline Example</title>

    <style>

        .my-circle:hover {

            fill: blue;

            transition: fill 0.3s ease;

        }

    </style>

</head>

<body>

    <h1>SVG Inline Example</h1>

    <!-- SVG được nhúng trực tiếp -->

    <svg width="200" height="200" viewBox="0 0 100 100">

        <circle class="my-circle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

        <text x="50" y="50" text-anchor="middle" dominant-baseline="middle" fill="black">SVG</text>

    </svg>

    <p>Di chuột vào hình tròn để thấy hiệu ứng đổi màu.</p>

</body>

</html>

Trong ví dụ trên, hình tròn sẽ đổi màu từ vàng sang xanh dương khi người dùng di chuột vào, nhờ CSS hiệu ứng :hover. Đây là một lợi thế lớn khi nhúng SVG inline, bạn có thể tùy biến chi tiết từng phần tử.

Dùng SVG như một file ảnh thông thường

Ngoài việc nhúng mã trực tiếp, bạn cũng có thể sử dụng SVG giống như các định dạng ảnh phổ biến khác như PNG hoặc JPG. Cách này đơn giản hơn, nhưng bị giới hạn khả năng tương tác.

Các cách sử dụng phổ biến:

• Thẻ <img>:

html

<img src="logo.svg" alt="Logo công ty" width="200" height="200">

• Thẻ <object> – cho phép tương tác:

html

<object data="chart.svg" type="image/svg+xml" width="500" height="300">

    Trình duyệt không hỗ trợ SVG

</object>

• Sử dụng làm nền trong CSS:

css

Sao chépChỉnh sửa

.header-logo {

    background-image: url('logo.svg');

    background-size: contain;

    background-repeat: no-repeat;

    width: 150px;

    height: 50px;

}

Lưu ý: Khi sử dụng SVG qua thẻ <img> hoặc background-image, bạn sẽ không thể can thiệp vào từng phần tử trong file SVG bằng CSS hay JavaScript. Nếu cần điều đó, hãy sử dụng cách nhúng trực tiếp hoặc thẻ <object>

Tùy biến SVG bằng CSS

Một trong những điểm mạnh lớn nhất của SVG là khả năng kết hợp linh hoạt với CSS. Bạn có thể thay đổi màu sắc, thêm hiệu ứng chuyển động, tạo hiệu ứng hover, xoay, phóng to, thu nhỏ… tùy ý.

Ví dụ:

html

<style>

    .svg-rect {

        fill: #9acd32;

        stroke: #333;

        stroke-width: 2;

        transition: all 0.3s ease;

    }

    .svg-rect:hover {

        fill: #ff8c00;

        transform: rotate(15deg);

    }

</style>

<body>

    <h1>SVG Styling với CSS</h1>

    <svg width="300" height="200" viewBox="0 0 300 200">

        <circle class="svg-circle" cx="100" cy="100" r="50" />

        <rect class="svg-rect" x="180" y="50" width="100" height="100" />

    </svg>

    <p>Di chuột vào các hình để thấy hiệu ứng tương tác.</p>

</body>

Trong ví dụ này, khi người dùng hover vào hình chữ nhật, nó sẽ đổi màu và xoay nhẹ. Bạn có thể áp dụng nguyên lý này để tạo ra các hiệu ứng tương tác sinh động cho website mà không cần dùng đến ảnh động hoặc JavaScript phức tạp.

Bạn có thể áp dụng nguyên lý này để tạo ra các hiệu ứng tương tác sinh động cho website

Kết luận

SVG là gì? Với khả năng co giãn vô hạn, kích thước file nhỏ gọn và tính linh hoạt cao, SVG là lựa chọn hoàn hảo cho thiết kế web hiện đại. Dù bạn là nhà thiết kế, lập trình viên hay người làm nội dung, việc hiểu và nắm vững SVG sẽ giúp bạn tạo ra những trải nghiệm web đẹp mắt, tối ưu và tương tác hơn.