SVG preserveAspectRatio: Làm hình vừa khung không méo

Dùng preserveAspectRatio="xMidYMid meet" khi toàn bộ viewBox SVG cần vừa vùng hiển thị mà không bị kéo giãn. Dùng slice khi phải phủ kín vùng đó và có thể cho nội dung vượt ra ngoài mép. Chỉ dùng none khi bạn chủ động muốn tỷ lệ co giãn ngang và dọc khác nhau.

Điểm cần phân biệt là hình chữ nhật tọa độ của phần hình, được viewBox định nghĩa, và khung nhìn nơi nó xuất hiện. Việc làm vừa thay đổi cách ánh xạ từ cái này sang cái kia. Nó không vẽ lại logo, xóa khung nguồn trống hay xóa vĩnh viễn đường dẫn bị cắt khỏi tầm nhìn.

Chọn cách làm vừa trước

Tài liệu preserveAspectRatio của MDN mô tả các giá trị này và mặc định xMidYMid meet. Với phần tử svg, phép ánh xạ này cần viewBox. Thuộc tính phân biệt hoa thường: giữ A và R viết hoa.

Với logo, bắt đầu với meet. Mất một chữ hoặc biến hình tròn thành bầu dục thường tệ hơn chừa chút khoảng trống. Với nền trang trí, cắt có chủ đích có thể chấp nhận được. Quyết định điều đó trước khi chọn cách căn.

Thử một biểu tượng trong hai hình dạng khung nhìn

Ví dụ tự tạo này dùng hình tròn, hình chữ nhật và tam giác lệch tâm. Hình tròn làm rõ việc kéo giãn; những phần không cân xứng giúp thấy thay đổi căn chỉnh dễ hơn so với huy hiệu đối xứng.

Dán đoạn này vào tệp HTML và mở trong trình duyệt:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

viewBox rộng 200 đơn vị và cao 100 đơn vị, có tỷ lệ 2:1. Khung nhìn đầu là 300 × 100 pixel CSS, tỷ lệ 3:1. Chỉ đổi thuộc tính để đối chiếu xMidYMid slice và none. Sau đó đổi khung nhìn thành width="100" height="300" và lặp lại.

Chúng tôi kết xuất hình học này trong Chrome bằng một trang thử nhỏ có bộ chọn. Phần số liệu dùng ma trận biến đổi hiện tại của nhóm hình. Tỷ lệ và tịnh tiến kết quả khớp các giá trị sau; độ lệch slice xấp xỉ −25 pixel được làm tròn ở đây.

Trong khung nhìn cao, meet hiện cả ba hình nhỏ. slice căn giữa chỉ hiện một phần bố cục phóng to, chủ yếu là hình chữ nhật vàng. none khiến hình tròn hẹp và cao. Đây là phép kiểm tra mẫu thử này trong Chrome, không phải lời đảm bảo cách nhập của mọi trình chỉnh sửa đồ họa.

Quy tắc tỷ lệ khá đơn giản cho ví dụ có gốc tọa độ bằng không này. Chia chiều rộng khung nhìn cho chiều rộng viewBox, rồi chia chiều cao khung nhìn cho chiều cao viewBox. meet dùng tỷ lệ nhỏ hơn cho cả hai trục; slice dùng tỷ lệ lớn hơn. none giữ hai tỷ lệ riêng. Đặc tả hệ tọa độ SVG định nghĩa phép ánh xạ, gồm căn chỉnh và gốc viewBox khác không.

Dùng căn chỉnh để chọn nơi đặt khoảng trống

Từ khóa đầu kiểm soát căn chỉnh. xMin, xMid và xMax căn mép trái, tâm ngang hoặc mép phải của viewBox. YMin, YMid và YMax làm tương tự theo chiều dọc. Chúng nói đến hình chữ nhật viewBox, vốn có thể chứa khoảng trống quanh các đường dẫn thực tế.

Với khung nhìn thử cao:

• xMinYMin meet đặt viewBox đã làm vừa ở trên cùng thay vì căn giữa dọc.
• xMinYMin slice giữ cạnh trái viewBox khớp cạnh trái khung nhìn. Cạnh phải phóng to vượt khỏi khung nhìn.
• xMidYMid slice phân bổ phần tràn ngang sang hai phía.

Chúng tôi đổi trang thử từ căn giữa sang xMinYMin. Cả tịnh tiến meet lẫn slice trở thành không, trong khi hệ số tỷ lệ vẫn lần lượt là 0.5 và 3. Căn chỉnh di chuyển bố cục; nó không đổi tỷ lệ làm vừa.

Thay đổi căn chỉnh chỉ thấy trên trục có khoảng trống hoặc phần tràn. Trong trường hợp meet khung rộng, viewBox đã lấp chiều cao nên đổi YMid thành YMin không có chỗ dọc để di chuyển.

Chọn rõ việc cắt vùng

slice chọn một tỷ lệ. Việc cắt quyết định bạn có thấy phần vượt khỏi khung nhìn không. Ví dụ đặt rõ overflow:hidden để vùng cắt dễ dự đoán.

Trong trang thử cao, chuyển overflow sang visible làm lộ hình tròn và tam giác phóng to ngoài khung nhìn slice. Hình học chưa hề biến mất. Tài liệu overflow SVG của MDN giải thích quan hệ giữa phần tràn và cắt theo khung nhìn, gồm khác biệt về kiểu mặc định giữa các ngữ cảnh SVG.

Đừng xem slice là thao tác cắt đường dẫn. Nếu tệp bàn giao chỉ được chứa hình học giữ lại, hãy thực hiện và xác minh thao tác chỉnh sửa thực sự. Với cửa sổ hiển thị tùy chỉnh không phải hình chữ nhật, clipPath có thể là công cụ phù hợp hơn.

Tương tự, meet đảm bảo viewBox vừa; không thể đảm bảo toàn bộ nội dung được vẽ vừa. Đường viền, bộ lọc hoặc đường dẫn ngoài hình chữ nhật nguồn vẫn có thể vượt ra ngoài. Kiểm tra các mép nhìn thấy thay vì chỉ tin thuộc tính.

Sửa khoảng trắng nguồn trước khi cố chỉnh căn

Giả sử biểu trưng nhỏ chỉ chiếm giữa một viewBox rất lớn. meet làm vừa toàn bộ hình chữ nhật tọa độ đó, kể cả lề trống. Kết quả có thể trông quá nhỏ dù tỷ lệ đúng.

Kiểm tra khung vẽ hoặc artboard xuất trong trình chỉnh sửa. Nếu đổi viewBox để thu sát bố cục, tính cả đường viền và hiệu ứng dự định rồi kiểm tra lại từng cách đặt. Đừng tự động xóa mọi lề: nguồn có thể chứa khoảng trống thương hiệu có chủ đích quanh biểu trưng.

Vấn đề kích thước vật lý là chuyện riêng. SVG nhập sai kích thước milimét cần quy trình kích thước SVG; đổi cách căn khi làm vừa khó sửa được giả định về đơn vị.

Phân biệt SVG nội tuyến và cách làm vừa ảnh

Với SVG nội tuyến, đổi thuộc tính trên phần tử svg liên quan. CSS có thể đặt kích thước hộp phần tử đó, còn preserveAspectRatio ánh xạ viewBox vào hộp.

Với SVG ngoài dùng trong phần tử ảnh HTML, CSS kiểm soát cách ảnh vừa hộp của phần tử:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

Tài liệu object-fit của MDN mô tả cách nội dung của phần tử thay thế vừa hộp CSS. Đó là lớp khác với chỉnh ánh xạ nội bộ của tài liệu SVG. object-fit: contain cũng không thể xóa khung trống đã có trong nguồn. Xem SVG nội tuyến so với phần tử ảnh khi quyết định mô hình nhúng.

Cũng có phần tử SVG image, viết đầy đủ thay vì img của HTML. preserveAspectRatio của nó kiểm soát cách ảnh được tham chiếu vừa hình chữ nhật đã thiết lập cho phần tử đó. Đây là ngoại lệ với yêu cầu chung phải cung cấp viewBox trên cùng phần tử, như tài liệu thuộc tính MDN giải thích. Tách rõ ba trường hợp này giúp tránh cố sửa ảnh HTML bằng cách thêm thuộc tính chỉ dành cho SVG.

Giữ tỷ lệ nguồn trước khi đặt vị trí

Nếu chỉ có PNG hoặc JPG của biểu trưng tùy chỉnh và cần hình học vector chỉnh sửa được, PerfectVector có thể khôi phục nguồn SVG trước khi bạn xây bố cục. Kiểm tra đường bao, các lỗ nhỏ và giới hạn khung vẽ trước. Làm vừa kết quả giữ hình học hiện tại; không thể sửa nguồn bị méo hay tạo lại chi tiết chưa từng được khôi phục.

SVG sạch sẵn có có thể đi thẳng vào kiểm tra làm vừa. Với biểu tượng đơn giản phía trên, hình học tạo bằng tay là đủ. Tổng quan vector hóa ảnh giải thích khi nào khôi phục đường dẫn từ raster hữu ích.

Với biểu trưng chỉ có raster, thử nguồn của bạn trong PerfectVector, kiểm tra SVG rồi đối chiếu cách đặt rộng và cao với meet trước khi cân nhắc cắt. Giữ bản gốc vector để các quyết định bố cục vẫn có thể đảo ngược.

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

Vì sao SVG vẫn có khoảng trống với meet? Khung nhìn và viewBox có thể khác tỷ lệ, để lại khoảng trống sau khi co giãn đồng đều. viewBox nguồn cũng có thể có lề quanh đường dẫn. Căn chỉnh di chuyển hình chữ nhật đó; không xóa khoảng trắng bên trong.

slice có cắt phần hình vĩnh viễn không? Không. Nó đổi tỷ lệ dùng để phủ khung nhìn. Overflow và cắt vùng kiểm soát phần nào nhìn thấy. Hình học đường dẫn gốc vẫn trong tài liệu trừ khi bạn chỉnh sửa riêng.

Vì sao none biến hình tròn thành bầu dục? Nó cho phép hệ số tỷ lệ ngang và dọc khác nhau. Khi tỷ lệ khung nhìn và viewBox khác, hình tròn có thể trở thành elip. Dùng meet hoặc slice với từ khóa căn chỉnh để giữ tỷ lệ đồng đều.

Nguồn tham khảo

1. MDN preserveAspectRatio — Định nghĩa giá trị làm vừa, căn chỉnh, mặc định và ngoại lệ của phần tử image SVG.
2. Đặc tả hệ tọa độ SVG — Định nghĩa phép tính tỷ lệ và tịnh tiến cho khung nhìn.
3. MDN SVG overflow — Giải thích cách overflow kiểm soát cắt theo khung nhìn.
4. MDN object-fit — Mô tả làm vừa nội dung ảnh của phần tử thay thế trong hộp CSS.