> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Chừa chỗ cho logo SVG để tránh dịch chuyển bố cục

> Chừa chỗ cho logo SVG bằng width và height hoặc tỷ lệ khung hình CSS. So sánh dịch chuyển thực tế trong trình duyệt, rồi kiểm tra ảnh bàn giao và bố cục đáp ứng.

Source: https://perfectvector.com/vi/blog/svg-logo-layout-reservation

Language: vi
Author: Irene Kim
Published: 2026-10-23T08:00:00+09:00

Logo SVG có thể vẫn sắc nét nhưng lại đẩy nội dung bên cạnh lệch chỗ khi xuất hiện. Với SVG ngoài được tải qua phần tử ảnh HTML, hãy cho trình duyệt đủ thông tin kích thước để dành sẵn hộp ảnh trước khi có kích thước nội tại của tệp. Hai thuộc tính `width` và `height` khớp với ảnh là điểm khởi đầu hữu ích; sau đó CSS có thể làm hộp này co giãn theo bố cục đáp ứng.

Cách này sửa một vấn đề bố cục trang. Nó không đổi đường dẫn của logo hay xóa khoảng trống trong khung vẽ. Hãy giữ một bản vector gốc dùng được. Nếu nguồn duy nhất là PNG hoặc JPG, hãy khôi phục hình chỉnh sửa được ở bước riêng, rồi đặt SVG bàn giao vào vị trí có chủ đích trên trang.

## Tách hình vẽ khỏi hộp được dành sẵn

Có ba kích thước liên quan cần kiểm tra:

| Mục                                           | Mô tả điều gì                                   | Kiểm tra ở đâu                           |
| --------------------------------------------- | ----------------------------------------------- | ---------------------------------------- |
| Hình SVG và viewBox                           | Hình chữ nhật tọa độ nguồn và hình vẽ bên trong | Mã nguồn SVG hoặc trình chỉnh sửa vector |
| Kích thước hoặc tỷ lệ tự nhiên của ảnh đã tải | Thông tin trình duyệt lấy từ ảnh                | Phần tử ảnh đã tải                       |
| Hộp bố cục HTML                               | Khoảng trống trang dành cho ảnh                 | Kiểu tính được và biên phần tử           |

`viewBox="0 0 300 100"` mô tả một hình chữ nhật nguồn tỷ lệ 3:1. Với tệp ngoài, thông tin này nằm bên trong tài nguyên mà trang phải tải về. Điều đó khác với việc đặt một tỷ lệ khớp vào HTML xung quanh trước khi tài nguyên sẵn sàng.

[Tài liệu tham chiếu phần tử ảnh của MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) khuyến nghị dùng cả thuộc tính width lẫn height để chừa chỗ trước khi ảnh tải xong. [Hướng dẫn về dịch chuyển bố cục](https://web.dev/articles/optimize-cls) của Google cũng xác định thiếu kích thước ảnh là nguyên nhân thường gặp gây dịch chuyển, đồng thời mô tả cách chừa chỗ bằng kích thước hoặc tỷ lệ CSS.

Nếu vấn đề là cách hình vẽ co vừa một khung nhìn đã được xác lập, hãy dùng [hướng dẫn co vừa theo tỷ lệ khung hình SVG](https://perfectvector.com/vi/blog/svg-preserveaspectratio) riêng. Dành sẵn hộp và co vừa hình vào hộp là hai bước kiểm tra khác nhau.

## Bắt đầu với thuộc tính width và height khớp với ảnh

Với biểu trưng 3:1, cách bàn giao đơn giản có thể như sau:

```html
<img
  class="brand-logo"
  src="/assets/brand-logo.svg"
  width="300"
  height="100"
  alt="Example brand"
>
```

```css
.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}
```

Các thuộc tính cung cấp tỷ lệ dự kiến. CSS đặt chiều rộng hiển thị và cho phép thu nhỏ theo tỷ lệ khi khung chứa hẹp lại. Chúng không bắt logo chiếm 300 pixel màn hình vật lý trên mọi thiết bị.

Hãy dùng kích thước khung vẽ thực tế của ảnh, kể cả khoảng trống thoáng có chủ đích. Đừng nhập biên của các nét chữ nhìn thấy nếu SVG bàn giao có hình chữ nhật nguồn rộng hơn. Sự không khớp đó khiến phần chừa chỗ ban đầu mâu thuẫn với tài nguyên đã tải.

Giá trị khớp nhau quan trọng vì tỷ lệ tự nhiên của ảnh có thể thay thế tỷ lệ ban đầu khi đã có. Tỷ lệ ban đầu sai vẫn có thể gây ra một lần chỉnh kích thước về sau. Sau khi thay logo, hãy kiểm tra lại cả mã HTML lẫn tệp bàn giao, thay vì cho rằng giữ tên tệp thì cũng giữ được hình học.

## Dùng tỷ lệ CSS khi bố cục quyết định ô chứa

Tỷ lệ CSS hữu ích khi một thành phần xác định hình dạng hộp cụ thể. Với ảnh co giãn theo tỷ lệ 3:1:

```css
.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}
```

[Tài liệu tham chiếu aspect-ratio của MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) giải thích rằng thuộc tính này tham gia tính kích thước tự động. Ít nhất một chiều phải giữ ở chế độ tự động thì tỷ lệ ưu tiên mới ảnh hưởng đến các phép tính đó. Nếu đặt cả chiều rộng và chiều cao cố định, các kích thước tường minh đó là thứ đầu tiên cần kiểm tra.

Hãy chọn hành vi mong muốn khi tỷ lệ nguồn khác đi. Một ô có hình dạng cố định có thể cần phần tử bao riêng và một quy tắc co vừa ảnh có chủ đích. Logo co giãn theo tỷ lệ thường nên dùng đúng tỷ lệ nguồn. Tránh ép một logo vuông vào hình học 3:1 của logo chữ trước đó chỉ để giữ CSS cũ.

Dạng `auto 3 / 1` có ý nghĩa khác: nó có thể cung cấp tỷ lệ tạm thời cho phần tử được thay thế, rồi dùng tỷ lệ tự nhiên khi có. Điều này hữu ích khi tỷ lệ tạm thời và tỷ lệ cuối cùng trùng nhau; nó không bảo đảm rằng các kích thước mâu thuẫn sẽ không bao giờ làm xê dịch thứ gì.

## Ví dụ trình duyệt có kiểm soát cho thấy gì

Chúng tôi tạo một SVG gốc `300 × 100` gồm một biểu trưng hình chữ F, một dấu chấm và một mũi tên. Ban đầu, ba phần tử ảnh HTML không có URL nguồn. Sau lần bố cục đầu tiên, một nút bấm gán cùng SVG cục bộ đó cho cả ba. Cách này cho phép quan sát trạng thái trước và sau mà không giả vờ đo một mạng chậm.

Cả ba đều dùng chiều rộng CSS 300 px và chiều cao tự động. Một ảnh không có tỷ lệ chừa sẵn, một ảnh có `width="300" height="100"`, và một ảnh có `aspect-ratio: 3 / 1`.

| Trường hợp           | Chiều cao ảnh trước | Chiều cao ảnh sau | Chữ phía sau dịch chuyển |
| -------------------- | ------------------- | ----------------- | ------------------------ |
| Không chừa sẵn tỷ lệ | 0 px                | 100 px            | Xuống dưới 100 px        |
| Kích thước HTML khớp | 100 px              | 100 px            | 0 px                     |
| Tỷ lệ CSS khớp       | 100 px              | 100 px            | 0 px                     |

![So sánh trong trình duyệt cho thấy nội dung dịch xuống 100 pixel sau khi SVG xuất hiện mà không có tỷ lệ chừa sẵn, trong khi kích thước HTML và tỷ lệ CSS khớp giữ nội dung đứng yên](https://perfectvector.com/blog/svg-logo-layout-reservation/reserved-space.webp)

*Các dấu nét đứt ghi lại vị trí trước đó của chữ. Ba SVG đã tải có hộp giống hệt nhau 300 × 100 pixel; điểm khác nhau là cách chừa chỗ ban đầu.*

Tọa độ cạnh trên của chữ đổi từ `358.1875` thành `458.1875` trong trường hợp không chừa chỗ. Trong hai trường hợp có chừa chỗ, tọa độ này giữ ở `458.1875`. Mỗi ảnh đã tải báo kích thước tự nhiên là `300 × 100`, và chiều rộng, chiều cao hiển thị cũng giữ ở `300 × 100`.

Đây là số đo vị trí phần tử thực tế từ một trang có kiểm soát trong một trình duyệt. Thí nghiệm dùng cách gán URL thủ công. Nó không ghi lại quá trình tải khi giới hạn tốc độ mạng, điểm Core Web Vitals hay hành vi trên nhiều trình duyệt. Đặc biệt, dịch chuyển 100 px là một khoảng cách, không phải điểm CLS.

## Kiểm tra thành phần bàn giao, không chỉ tệp

Hãy dùng vị trí đặt logo thực tế khi xác minh cách sửa:

1. **Xác nhận nguồn.** Mở SVG bàn giao và kiểm tra tỷ lệ khung vẽ. Giữ một bản chính không thay đổi để so sánh.
2. **Kiểm tra kích thước ban đầu.** Xác nhận HTML hoặc CSS cung cấp hộp dự kiến trước khi kích thước của ảnh có sẵn.
3. **So sánh vị trí phần tử.** Theo dõi một tiêu đề hoặc mục điều hướng gần đó, không chỉ độ sắc nét của logo.
4. **Kiểm tra sau khi tải.** Xác minh chiều rộng, chiều cao và tỷ lệ cuối cùng so với phần chừa chỗ.
5. **Thử khung chứa hẹp và rộng.** Đảm bảo quy tắc đáp ứng thu nhỏ biểu trưng theo đúng tỷ lệ và các điều khiển xung quanh vẫn dùng được.

Để kiểm tra việc tải trên trình duyệt, tải lại trang thực tế với bộ nhớ đệm bị tắt và thiết lập mạng phù hợp trong công cụ nhà phát triển. Cách này kiểm tra một điều kiện khác với ví dụ dùng nút bấm của chúng tôi. Nếu trang dùng ảnh tải trễ, hãy cuộn qua vị trí đặt đó nữa.

Nếu vẫn còn dịch chuyển, hãy xác định thứ gì thay đổi vào lúc đó. Phông chữ bị hoán đổi, biểu ngữ được chèn, hàng điều hướng mở rộng hoặc một ảnh khác có thể làm logo xê dịch dù hộp của chính nó ổn định. Hướng dẫn của web.dev phân biệt kích thước ảnh với các nguyên nhân dịch chuyển bố cục khác; chừa chỗ cho một logo không phải là kiểm tra hiệu năng đầy đủ cho trang web.

## Tách riêng các vấn đề SVG lân cận

Hộp ảnh không đổi nhưng có một dải nhỏ bên dưới có thể là vấn đề của dòng văn bản nội tuyến. Hãy kiểm tra kiểu hiển thị và căn dọc riêng với kích thước được chừa sẵn của ảnh. Di chuyển một phần tử trong dòng văn bản và cấp chỗ cho một ảnh chưa có sẵn là xử lý những thời điểm khác nhau trong bố cục.

SVG đứng yên nhưng có lề trống rộng cần kiểm tra khung vẽ hoặc cách co vừa. Cắt bớt nguồn để bỏ các lề đó sẽ đổi tỷ lệ của nó, vì vậy hãy cập nhật phần chừa chỗ của trang sau đó. [Bài giải thích SVG nội tuyến so với ảnh](https://perfectvector.com/vi/blog/inline-svg-vs-img) cũng giúp bạn xác định mình đang tạo kiểu cho phần tử của tài liệu hay cho một ảnh ngoài.

Nếu biểu trưng gốc chỉ có ở dạng pixel, hãy dùng [công cụ vector hóa logo](https://perfectvector.com/vi/vectorize-logo) của PerfectVector để chuẩn bị các hình ứng viên chỉnh sửa được. So dáng bao và các khoảng hở với nguồn trước khi chọn khung vẽ bàn giao; [bảng đánh giá chất lượng bản đồ lại](https://perfectvector.com/vi/blog/evaluate-vector-trace-quality) trình bày bước kiểm tra hình học đó. Vector hóa không đặt kích thước HTML, tỷ lệ CSS hay hành vi tải của trang web.

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

**Riêng viewBox của SVG có ngăn dịch chuyển bố cục không?**
Với ảnh ngoài, viewBox nằm bên trong tài nguyên được tải về. Hãy cho bố cục HTML thông tin kích thước khớp để nó chừa chỗ trước khi có kích thước nội tại của ảnh, rồi xác minh thành phần cuối cùng.

**Logo SVG có thể đáp ứng mà vẫn giữ thuộc tính width và height không?**
Có. Các thuộc tính khớp có thể cung cấp tỷ lệ dự kiến trong khi CSS điều khiển chiều rộng hiển thị và giữ chiều cao tự động. Hãy kiểm tra rằng tệp bàn giao và các quy tắc đáp ứng giữ nguyên tỷ lệ đó.

**SVG sắc nét có bảo đảm điểm CLS tốt không?**
Không. Độ sắc nét mô tả cách hình được kết xuất. CLS liên quan đến độ bất ổn bố cục trên toàn trang, vốn còn có thể liên quan đến phông chữ, nội dung được chèn và nội dung đa phương tiện khác. Khoảng dịch chuyển từ một ví dụ có kiểm soát không phải là điểm CLS.

## Nguồn tham khảo

1. [web.dev: Tối ưu hóa Cumulative Layout Shift](https://web.dev/articles/optimize-cls) — Thiếu kích thước ảnh, cách chừa chỗ, các nguyên nhân dịch chuyển khác và sự khác biệt giữa dịch chuyển với chỉ số CLS.
2. [MDN: Phần tử ảnh HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — Thuộc tính width và height, kích thước tự nhiên của ảnh và bố cục ảnh.
3. [MDN: aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) — Tính kích thước tự động và khác biệt giữa tỷ lệ được chỉ định với dạng auto kết hợp tỷ lệ.

***

Chỉ có logo raster? [Chuẩn bị SVG chỉnh sửa được với PerfectVector](https://perfectvector.com/vi/vectorize-logo), xác minh đường bao và khung vẽ, rồi chừa đúng khoảng trống khớp trên trang sẽ hiển thị logo.

## Explore

- [Read the HTML article](https://perfectvector.com/vi/blog/svg-logo-layout-reservation)
- [Sửa khe hở dưới SVG nội tuyến bằng bố cục CSS](https://perfectvector.com/vi/blog/inline-svg-baseline-gap.md)
- [Logo SVG ở chế độ tối: chọn yếu tố điều khiển màu](https://perfectvector.com/vi/blog/dark-mode-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)