Inline SVG vs External SVG

Inline SVG vs External SVG là gì?

Inline SVG là mã SVG được chèn trực tiếp vào file HTML, nằm giữa các thẻ <svg></svg>. Ví dụ: <svg width='24' height='24' viewBox='0 0 24 24'><path d='M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z'/></svg>.

External SVG là file hình ảnh SVG riêng biệt (ví dụ: logo.svg), được gọi vào HTML qua thẻ <img src='logo.svg' alt='Logo công ty'>, hoặc dùng làm background trong CSS.

Tại sao quan trọng trong SEO?

SVG ảnh hưởng đến SEO hình ảnh và khả năng truy cập — hai yếu tố Google xác nhận là phần của trải nghiệm người dùng (UX), từ đó tác động gián tiếp đến thứ hạng. Inline SVG có lợi thế rõ ràng ở ba điểm:

• Đọc được bởi máy tìm kiếm: Nội dung văn bản bên trong thẻ <title> và <desc> được Google đọc như mô tả hình ảnh — điều mà thẻ <img> không hỗ trợ với external SVG.
• Kiểm soát CSS/JS đầy đủ: Các phần tử <path>, <circle>, <text> trong inline SVG có thể được chọn bằng CSS selector hoặc thao tác bằng JavaScript — giúp tạo hiệu ứng tương tác, tối ưu tốc độ hiển thị và hỗ trợ ARIA.
• Không phát sinh yêu cầu HTTP bổ sung: External SVG qua <img> tạo thêm 1 request, làm chậm tải trang nếu server chậm hoặc không bật HTTP/2. Inline SVG nhúng trực tiếp nên giảm số lượng request — cải thiện chỉ số Core Web Vitals như LCP và CLS.

Lưu ý: Google chưa xếp hạng “SVG” như một tín hiệu độc lập, nhưng việc tối ưu hoá SVG góp phần nâng cao UX, tốc độ và khả năng truy cập — những yếu tố đã được xác nhận là ảnh hưởng đến thứ hạng.

Cách hoạt động

Khi trình duyệt tải trang HTML chứa inline SVG, nó xử lý mã SVG như một phần của DOM — nghĩa là tất cả phần tử con đều có thể được chọn, style, hoặc gắn sự kiện. Thẻ <title> và <desc> bên trong <svg> được coi là nội dung mô tả hợp lệ cho người khiếm thị (qua screen reader) và cho bot tìm kiếm.

Với external SVG qua <img>, trình duyệt chỉ tải file như một tài nguyên nhị phân — không đọc được nội dung văn bản bên trong file SVG, kể cả khi file đó có chứa <title> hay <desc>. Tuy nhiên, thuộc tính alt trên thẻ <img> vẫn được Google sử dụng để hiểu mục đích hình ảnh.

Hướng dẫn thực hiện

1. Chuẩn bị file SVG: Dùng công cụ như SVGOMG để tối ưu hoá — loại bỏ comment, metadata, lớp không dùng, rút gọn tên thuộc tính. Đảm bảo file có thẻ <title> và <desc> rõ ràng.
2. Nhúng inline: Copy toàn bộ nội dung bên trong <svg>...</svg> (không bao gồm <?xml ...?> hoặc doctype) và dán trực tiếp vào HTML. Đặt ngay sau thẻ mở <svg> một cặp <title> và <desc> ngắn gọn, đúng ngữ cảnh.
3. Thêm thuộc tính truy cập: Gắn role='img' và aria-labelledby='[id-title]' nếu cần kiểm soát chặt hơn. Ví dụ:

   <svg role='img' aria-labelledby='logo-title' viewBox='0 0 120 30'>
     <title id='logo-title'>Logo Công ty ABC</title>
     <desc>Biểu tượng chữ viết tắt ABC với màu xanh dương</desc>
     <path d='...' />
   </svg>

4. Thử nghiệm: Kiểm tra bằng Chrome DevTools → tab Accessibility → đảm bảo phần tử <svg> hiển thị đúng label. Dùng Lighthouse để kiểm tra điểm truy cập và tốc độ.

Lỗi thường gặp

• Không đặt <title> và <desc>: SVG sẽ thiếu mô tả — ảnh hưởng đến người khiếm thị và bot. Cách khắc phục: Luôn thêm hai thẻ này ngay sau <svg>, viết ngắn gọn, mô tả chức năng chứ không mô tả kỹ thuật.
• Dùng inline SVG cho hình ảnh phức tạp hoặc lớn: File SVG >10 KB khi nhúng trực tiếp làm tăng kích thước HTML, gây chậm tải. Cách khắc phục: Với biểu đồ, sơ đồ chi tiết hoặc minh hoạ nghệ thuật, nên giữ dạng external SVG qua <img> và tối ưu thuộc tính alt + loading='lazy'.
• Quên xóa <script> trong SVG: Một số file SVG xuất từ Illustrator chứa script — gây lỗi bảo mật hoặc chặn render. Cách khắc phục: Loại bỏ mọi thẻ <script>, <style> (trừ khi cần thiết), và thuộc tính onload, onclick trước khi nhúng.
• Không kiểm tra tương thích IE: IE11 không hỗ trợ một số thuộc tính SVG như focusable='false' hoặc aria-hidden. Cách khắc phục: Nếu cần hỗ trợ IE11, dùng aria-hidden='true' kết hợp focusable='false' — cả hai đều được hỗ trợ.

Ví dụ thực tế

Dưới đây là bảng so sánh cách triển khai logo công ty với hai phương pháp:

Yếu tố	Inline SVG	External SVG (<img>)
Mô tả cho bot tìm kiếm	Có: qua <title> và <desc> trong DOM	Chỉ có: qua thuộc tính alt — nội dung trong file SVG bị bỏ qua
Khả năng style bằng CSS	Có: chọn từng <path>, đổi màu, hover, animation	Không: chỉ style được toàn bộ ảnh như một khối
Số request HTTP	0 (nhúng trong HTML)	1 (tải thêm file .svg)
Hỗ trợ ARIA đầy đủ	Có: gắn aria-labelledby, role, tabindex	Hạn chế: chỉ hỗ trợ alt, aria-hidden cơ bản

Câu hỏi thường gặp

Inline SVG có làm chậm trang không?

Có thể làm chậm nếu file SVG quá lớn (>15 KB) hoặc nhúng nhiều lần trên cùng trang. Với icon nhỏ (dưới 2 KB), inline SVG thường nhanh hơn external vì tránh request mạng. Tối ưu bằng cách nén SVG và chỉ inline những thành phần cần tương tác hoặc mô tả chi tiết.

Google có lập chỉ mục nội dung text trong inline SVG không?

Có — Google đọc và lập chỉ mục văn bản trong thẻ <title> và <desc> của inline SVG như một phần nội dung trang. Tuy nhiên, văn bản trong thẻ <text> chỉ được lập chỉ mục nếu nằm trong DOM và không bị ẩn bằng CSS (display:none hoặc visibility:hidden).

Có nên dùng inline SVG cho tất cả hình ảnh trên trang?

Không. Chỉ nên dùng cho icon, biểu tượng đơn giản, logo, biểu đồ tĩnh hoặc thành phần cần tương tác. Với ảnh minh hoạ, banner, hoặc SVG có nhiều layer, animation phức tạp — external SVG hoặc định dạng <picture> với fallback PNG là lựa chọn an toàn hơn. Việc chọn phụ thuộc vào mục đích, kích thước và nhu cầu truy cập — tùy trường hợp.