SVG nội tuyến hay img: chọn cách hình hoạt động

Dùng SVG trong phần tử <img> khi muốn hiển thị hình đã hoàn thiện. Đặt SVG nội tuyến khi trang cần thay đổi từng hình bằng CSS hoặc JavaScript. Cả hai cách có thể hiển thị cùng hình vector ở kích thước khác nhau; đặt nội tuyến không cải thiện hình học.

Khác biệt này quan trọng khi logo trông đúng trong tab trình duyệt nhưng bỏ qua quy tắc màu của trang web. Tệp có thể không có lỗi. Quy tắc có thể đơn giản là không truy cập được bên trong. Bên dưới, cùng hình minh họa núi xuất hiện ở cả hai dạng để bạn kiểm tra khác biệt trước khi đổi quy trình tài nguyên.

Chọn hành vi bạn cần

SVG bên ngoài vẫn là tệp vector khi hiển thị qua <img>. Ranh giới nằm giữa trang và các phần tử nội bộ của tệp. CSS trang có thể đổi kích thước, xoay hoặc làm mờ phần tử ảnh, nhưng bộ chọn như .logo path không truy cập được đường dẫn trong tài nguyên src của nó. Hình nội tuyến trở thành một phần cây tài liệu của trang. Hướng dẫn nhúng SVG của MDN mô tả hai cách này.

Nếu vẫn đang kiểm tra tệp chứa gì, bắt đầu với SVG là gì. Đuôi .svg không có nghĩa mọi chi tiết nhìn thấy là đường dẫn. Với bàn giao cho cửa hàng, làm theo hướng dẫn biểu tượng SVG tùy chỉnh Shopify sau khi xác minh nội dung tệp.

Thử cùng hình ở cả hai dạng

Để minh họa, chúng tôi viết thủ công hai đường dẫn núi và một hình tròn mặt trời. Chúng tôi tải hình đó từ tệp riêng và dán cùng các hình vào HTML. Đây là thử nghiệm nhúng, không phải kết quả chuyển đổi PerfectVector.

Trong phép thử trình duyệt Chromium, cả hai phiên bản ban đầu chiếm 360 × 240 pixel CSS và có mặt trời màu hổ phách. Sau đó chúng tôi bật quy tắc trang nhắm .sun. Mặt trời nội tuyến đổi thành san hô; mặt trời trong ảnh ngoài giữ hổ phách. Giảm cả hai hộp thành 180 × 120 đổi kích thước hiển thị nhưng không thay đổi khác biệt đó.

1. Lưu tệp SVG riêng

Tạo artwork.svg với nguồn đầy đủ này. viewBox xác định không gian tọa độ hình vẽ. Chiều rộng và chiều cao cho nó kích thước khởi đầu rõ ràng.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Thêm ảnh và bản nội tuyến

Lưu nội dung sau thành index.html cạnh artwork.svg, rồi mở trong trình duyệt. Hai hình có cùng hình học và thuộc tính tô/vẽ. Phiên bản nội tuyến cũng có tên cho công nghệ hỗ trợ.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

Ảnh chụp dùng bố cục so sánh được định kiểu quanh cùng các hình này. Ví dụ nhỏ hơn ở trên giúp hành vi dễ tái hiện.

3. Thay đổi từng biến một

Bỏ class="theme" khỏi body và tải lại. Cả hai mặt trời giờ phải có màu hổ phách. Khôi phục class, và chỉ mặt trời nội tuyến đổi san hô. Đổi .artwork từ width: 360px thành width: 180px; khi vùng chứa đủ chỗ, cả hai hình phải thu nhỏ thành 180 × 120.

Nếu muốn mặt trời trong ảnh ngoài đổi vĩnh viễn, sửa fill trong artwork.svg. Nếu muốn phản hồi trạng thái trang, chọn mã nội tuyến hoặc phương thức bàn giao có chủ ý khác. Hướng dẫn đổi màu SVG trình bày chỉnh chính tệp.

Tên .sun được thêm cho ví dụ này. Tệp chuyển đổi hoặc xuất không nhất thiết có class hữu ích cho mỗi phần có ý nghĩa. Kiểm tra và đặt tên các hình bạn định điều khiển thay vì cho rằng đối tượng nhìn thấy là một đường dẫn chọn được.

Giữ kích thước và tên trợ năng rõ ràng

Giữ viewBox khi đưa hình vào HTML. Đặt thuộc tính width và height làm mốc hợp lý, rồi áp dụng CSS responsive. Với minh họa 3:2 này, width: 180px; height: auto giữ tỷ lệ. Lề trống lớn bên trong viewBox vẫn thuộc vùng vẽ ở cả hai cách; đổi cách nhúng không thể xóa nó.

Khi hộp bố cục có tỷ lệ khác, hướng dẫn căn preserveAspectRatio so sánh cách vừa toàn bộ hình, cắt và làm méo.

Với ảnh ngoài mang ý nghĩa, viết alt trên <img> HTML. Với ảnh nội tuyến mang ý nghĩa, ví dụ dùng role="img" và aria-labelledby trỏ tới <title>. SVG nội tuyến không dùng thuộc tính alt của ảnh HTML. Những lựa chọn đặt tên được mô tả trong hướng dẫn SVG trong HTML của MDN.

Nếu lặp ví dụ nội tuyến, cho mỗi ID title giá trị duy nhất và cập nhật aria-labelledby tương ứng. Nguyên tắc tương tự áp dụng cho ID chuyển sắc, mặt nạ hoặc đường dẫn cắt. Với hình trang trí cạnh văn bản nhìn thấy tương đương, dùng alt rỗng trên <img> hoặc ẩn SVG nội tuyến khỏi công nghệ hỗ trợ bằng aria-hidden="true". Thử cả liên kết hoặc nút trong ngữ cảnh để mục đích của nó vẫn được đặt tên.

Với nhiều biểu tượng dùng lại, sprite symbol SVG đưa ra cách dùng định nghĩa và bản thể riêng. Quyết định bạn có cần tái sử dụng kiểu đó không trước khi dán nhiều bản sao vào mỗi trang.

Coi hiệu năng là thứ cần đo

Mã nội tuyến đặt các hình trong tài liệu thay vì tải hình đó như tài nguyên ảnh riêng. Nó cũng tăng lượng mã tài liệu. Tệp ngoài có thể được dùng lại từ bộ nhớ đệm trình duyệt, tùy URL, header phản hồi và trạng thái cache. Hướng dẫn HTTP caching của MDN giải thích các điều kiện đó.

Cả hai điều này đều không chứng minh cách nào làm trang nhanh hơn. So sánh trang thực tế ở lần truy cập đầu và lần quay lại, với số bản sao và độ phức tạp SVG thực. Minh họa ở đây thử khả năng truy cập màu tô/vẽ và kích thước; không phải phép đánh giá tốc độ tải.

Chế độ ảnh ngoài cũng có hạn chế ngoài CSS. MDN mô tả SVG dùng làm ảnh tắt JavaScript và giới hạn tài nguyên ngoài. Đừng đưa SVG không quen thuộc vào nội tuyến chỉ để tính năng thiếu hoạt động. Xem xét và làm sạch mã không đáng tin trước khi đưa vào trang.

Khi hình ban đầu chỉ là PNG

Vector hóa nằm trước lựa chọn nhúng này nếu nguồn thiếu các hình bạn cần. Với logo hoặc hình minh họa raster phù hợp, chuyển PNG sang SVG bằng PerfectVector, kiểm tra kết quả với nguồn và giữ SVG được chấp nhận làm bản hình chính. Kiểm tra dáng bao ngoài, lỗ và các vùng màu nhỏ trước khi thêm class hoặc chuẩn bị bản web.

PerfectVector cung cấp hình vector. Bạn vẫn chọn phần nào cần phản hồi CSS, thêm tên có ý nghĩa và thử trang cuối. Chuyển ảnh không tự tạo thành phần có tên class ngữ nghĩa. Nếu SVG có sẵn đã chứa đường dẫn dùng được, làm việc với chúng thay vì đồ lại bản hiển thị.

Cũng kiểm tra SVG có ảnh raster nhúng. Dán tệp đó nội tuyến làm lộ phần tử <image> của nó; không biến pixel bên trong phần tử thành hình đổi màu riêng được. Với ảnh chụp cần giữ tính chất ảnh chụp, giữ định dạng raster bàn giao phù hợp.

Kiểm tra trang cuối

• Xác nhận hình độc lập trông đúng trước khi thử CSS trang.
• Chọn <img> để hiển thị hình hoàn thiện hoặc SVG nội tuyến để điều khiển trực tiếp các phần tử.
• Xác minh kích thước hiển thị và tỷ lệ ở bố cục hẹp nhất được hỗ trợ.
• Thử đúng hình định đổi màu; đừng dựa vào quy tắc path quá rộng.
• Kiểm tra tên ảnh, ID trùng và liên kết hoặc nút bao quanh.
• Đo hành vi tải nếu ảnh hưởng quyết định; đừng suy ra kết quả tốc độ từ ví dụ này.

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

SVG có trở thành bitmap khi tôi dùng thẻ img không? Không. SVG tải qua img vẫn có thể hiển thị hình học vector. Phần tử ảnh ngăn trang chứa ảnh chọn trực tiếp các hình bên trong; không chuyển những hình đó thành PNG.

Vì sao currentColor không theo màu chữ trang? Ảnh SVG ngoài có ngữ cảnh định kiểu riêng. Màu trang không tự trở thành currentColor dùng trong tệp đó. Dùng SVG nội tuyến khi cách tô/vẽ cần kế thừa từ trang, và viết fill hoặc stroke liên quan để dùng currentColor.

Tôi có nên chuyển SVG có sẵn trước khi đặt nội tuyến không? Không cần chuyển nếu nó đã chứa hình vector bạn muốn. Xem mã, giữ tham chiếu cần thiết, thêm cách đặt tên phù hợp và thử trong trang. Chuyển raster sang vector chỉ phù hợp khi cần khôi phục hình từ nguồn raster.

Nguồn tham khảo

1. MDN — đưa đồ họa vector vào HTML — Hành vi ảnh ngoài và nhúng nội tuyến.
2. MDN — giới thiệu SVG trong HTML — Mã nội tuyến, viewBox và đặt tên trợ năng.
3. MDN — HTTP caching — Dùng lại cache phụ thuộc chính sách phản hồi và định danh tài nguyên.
4. MDN — SVG làm ảnh — Hạn chế tập lệnh và tài nguyên trong ngữ cảnh ảnh.

Chọn cách nhúng khớp nhiệm vụ của hình, rồi thử với kiểu thực của trang. Nếu nguồn duy nhất là PNG phù hợp, khôi phục hình vector trước, kiểm tra kết quả và chuẩn bị hình đã chấp nhận cho cách nhúng đó.