> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Căn giữa logo theo thị giác mà giữ nguyên bản gốc > Bắt đầu từ giới hạn hình học logo, so độ lệch thị giác ở cỡ dự kiến và ghi riêng vị trí đặt để bản vector gốc vẫn nguyên vẹn. Source: https://perfectvector.com/vi/blog/logo-optical-centering Language: vi Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Để căn giữa logo theo thị giác, trước hết căn giữa hình nhìn thấy bằng hình học trong khung dự kiến. Sau đó so sánh một điều chỉnh vị trí nhỏ khi ẩn đường hướng dẫn và ở cỡ mọi người sẽ thấy. Giữ nguyên hình logo trong cả hai bản. Ghi độ lệch được chấp nhận thành quyết định đặt hình để bản vector gốc không đổi. Căn giữa theo thị giác là điều chỉnh vị trí khi lề hình học bằng nhau không tạo cân bằng bạn muốn. Nó liên quan đến đánh giá hình này trong bối cảnh này. Phép tính trọng tâm hoặc dịch cố định vài pixel có thể gợi ý điểm bắt đầu, nhưng không cách nào xác định vị trí thị giác tối ưu chung. Ví dụ dùng một dấu bất đối xứng tự tạo trong khung 200 × 140. Thân trái rộng và đầu phải hẹp giúp dễ đo giới hạn bằng nhau và so các phương án đặt. Bạn có thể tái tạo tệp bên dưới không cần ứng dụng thiết kế trả phí. ## Lập mốc hình học trước khi đánh giá cân bằng Hộp giới hạn là hình chữ nhật nhỏ nhất song song trục tọa độ bao quanh hình học bạn đo. Trung điểm hữu ích cho vị trí ban đầu. Nó không mô tả lượng diện tích tô ở mỗi bên hoặc phần nào thu hút chú ý. [Các ví dụ thiết kế thị giác của Rafal Tomal](https://rafaltomal.com/optically-perfect/) cho thấy trường hợp vị trí thị giác khác căn chỉnh số. Chúng ủng hộ so sánh kết quả thực, không cung cấp một mức sửa cho mọi logo. Trước khi đổi vị trí, kiểm tra bạn đang căn hình chứ không phải tệp vô tình có lề. Viền trống rộng có thể khiến logo đối xứng trông lệch. Kiểm tra khung vẽ, bỏ phần nền ngoài ý muốn và xác nhận đối tượng nào thuộc toàn dấu. Giữ khoảng trống thương hiệu được phê duyệt thay vì cắt đi. Để đo SVG, [getBBox()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox) báo giới hạn trong hệ tọa độ người dùng của phần tử và không gồm phép biến đổi của chính nó hoặc cha. Phép đo vùng hiển thị trình duyệt trả lời câu hỏi khác. [Hướng dẫn hộp giới hạn SVG](https://perfectvector.com/vi/blog/svg-bounding-box) giải thích cách tách những phép đo đó. ## So cùng dấu không đổi trong khung bằng nhau Đường dẫn gốc bên dưới chạy từ x = 20 đến 140 và y = 20 đến 80. Vì vậy giới hạn là 120 × 60, trung điểm (80, 50). Trung điểm khung là (100, 70). Dịch nhóm (20, 20) căn giữa các giới hạn đó. Lưu mã sau thành `logo-geometric.svg` và mở trong trình duyệt. Hình chữ nhật nhạt là khung đặt, không phải phần thiết kế logo. ```xml ``` Hình nhìn thấy giờ trải x = 40 đến 160 và y = 40 đến 100, cho lề ngang đều 40 đơn vị và lề dọc đều 40 đơn vị. Đây là mốc ban đầu, không phải yêu cầu vị trí cuối phải giữ ở đó. Để thử vị trí thị giác, lưu tệp thứ hai với `transform="translate(32 20)"`. Dịch sang phải 12 đơn vị chỉ đổi vị trí. Giữ giá trị `d`, màu tô, khung và cỡ hiển thị giống hệt. [Tịnh tiến SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) di chuyển hệ tọa độ; không cần viết lại đường dẫn. ![Dấu bất đối xứng tự tạo được căn theo giới hạn, dịch phải mười hai đơn vị trong khung bằng nhau và so sánh ở vị trí dự kiến nhỏ hơn](https://perfectvector.com/blog/logo-optical-centering/placement-comparison.webp) *Hai bản dùng cùng đường dẫn. Dịch phải là vị trí thử cho dấu có thân trái rộng này; phép đo xác nhận di chuyển, không phải sở thích thị giác chung.* Lựa chọn biên tập của chúng tôi trong khung này là bản thử dịch phải: thân trái rộng gần giữa khung hơn trong khi đầu hẹp vươn xa sang phải. Bạn có thể thích bản hình học trong bố cục khác. So cả hai với nội dung thực xung quanh trước khi ghi lại lựa chọn. ## Kiểm tra khi ẩn hướng dẫn và ở cỡ sử dụng So sánh trong khung và nền thực. Ẩn đường tâm và lớp hộp giới hạn trước khi đánh giá; nếu không bạn có thể tiếp tục nhìn lề đo được thay vì dấu. 1. Mở bản hình học và bản thử ở cùng cỡ. 2. Xem từng bản trong bố cục dự kiến rồi so cùng nhau. 3. Kiểm tra vị trí nhỏ hơn nơi logo thực sự xuất hiện. Giữ cùng tỷ lệ khung và nội dung xung quanh. 4. Xác nhận dịch chuyển giữ khoảng trống được duyệt và tránh cắt hình. 5. Ghi độ lệch đã chọn cùng vị trí áp dụng. Quay về mốc hình học nếu bản thử tạo mất cân bằng mới. Ở chiều rộng khung 200 px, độ dịch thử 12 đơn vị là 12 px. Ở khung 100 px, cùng độ dịch SVG là 6 px. Nó đổi tỷ lệ cùng viewBox. Thêm độ lệch CSS cố định 12 px ở mọi cỡ sẽ tạo quy tắc đặt khác. Ghi chú phương pháp: chúng tôi kết xuất cả hai SVG đầy đủ trong Chromium, so giới hạn hiển thị ở rộng 200 px và 100 px, rồi xác minh dữ liệu đường dẫn giống hệt. Bản hình học có lề trái phải 40 px ở cỡ đầy đủ. Bản thử có trái 52 px, phải 28 px, với dịch tương đối 6 px ở nửa cỡ. Đây là kiểm tra hình học và so sánh biên tập, không phải nghiên cứu nhận thức con người. Nếu logo đổi hình giữa hai bản, khôi phục bản gốc và chỉ đổi phép biến đổi đặt hình. Nếu bản thử cắt đầu nhọn, kiểm tra vùng hiển thị và độ lệch trước khi sửa logo. Nếu bố cục logo hoặc nền khác làm đổi cân bằng, đánh giá cách dùng đó riêng. Để đặt logo vào khung rộng hoặc cao hơn, xem [hướng dẫn bố cục logo SVG đáp ứng](https://perfectvector.com/vi/blog/responsive-svg-logo-lockup). ## Giữ bản gốc và quyết định đặt hình Lưu logo nguồn độc lập với phần bọc vị trí trong bố cục. Ghi kích thước khung, cỡ tham chiếu, phép biến đổi và nền chọn. Với ví dụ này, ghi chú hữu ích là: “Dấu gốc 120 × 60; khung đặt 200 × 140; phép biến đổi thử (32, 20); xem lại cho bố cục khác.” Tài nguyên thương hiệu được duyệt có thể đã có chỉnh thị giác trong hình hoặc giới hạn xuất. Dùng tài nguyên được cung cấp cùng hướng dẫn đặt. Đừng thiết kế lại logo hiện hữu chỉ vì lề đo không bằng nhau. Đặt toàn dấu cũng khác căn giữa văn bản chỉnh được theo đường cơ sở. Nếu vấn đề là nhãn trong điều khiển, dùng [hướng dẫn căn dọc văn bản SVG](https://perfectvector.com/vi/blog/svg-text-vertical-alignment). Với phần còn lại của quy trình nguồn và bàn giao, xem [hướng dẫn blog](https://perfectvector.com/vi/blog). ## PerfectVector phù hợp ở đâu trước khi đặt hình PerfectVector có thể giúp khôi phục hình vector từ logo chỉ có raster trước khi so vị trí. Trước hết so hình bóng, khoảng trống và mảnh nền thừa với tham chiếu gốc. [Quy trình vector hóa logo](https://perfectvector.com/vi/vectorize-logo) cung cấp bước khôi phục nguồn; quyết định vị trí thị giác vẫn là của bạn. Nếu có bản vector gốc đã duyệt, đặt trực tiếp tệp đó. Nếu đồ lại làm đổi đặc điểm bất đối xứng có chủ đích, sửa hình học nguồn trước khi đánh giá căn giữa. [Hướng dẫn vector hóa logo](https://perfectvector.com/vi/blog/how-to-vectorize-a-logo) trình bày kiểm tra này. Tệp co giãn giúp sửa vị trí thuận tiện, nhưng không quyết định mọi người cảm nhận thế nào là cân bằng. ## Câu hỏi thường gặp ### Logo bất đối xứng có nên có lề bằng nhau không? Lề bằng nhau cung cấp mốc hình học đo được. Một logo bất đối xứng cụ thể có thể đẹp hơn với độ lệch vị trí được ghi lại. So ở cỡ dự kiến và giữ thiết kế được duyệt nguyên vẹn. ### Trọng tâm logo có phải tâm thị giác không? Trọng tâm hình học mô tả một phân bố hình học hoặc diện tích cụ thể. Nó có thể gợi ý vị trí thử nhưng không xác định cân bằng được cảm nhận của mọi logo trong mọi khung và nền. ### Có nên đổi đường dẫn để di chuyển logo không? Để so vị trí, giữ đường dẫn gốc và dùng phép biến đổi hoặc vị trí bố cục riêng. Điều này giữ bản gốc nguyên vẹn và giúp dễ so hoặc hoàn tác điều chỉnh. ## Nguồn 1. [Rafal Tomal — Làm thiết kế hoàn hảo về thị giác](https://rafaltomal.com/optically-perfect/) — Ví dụ riêng của nhà thiết kế về chỉnh thị giác khác căn chỉnh số. 2. [MDN — SVGGraphicsElement getBBox()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox) — Giải thích giới hạn tọa độ cục bộ dùng cho mốc hình học. 3. [MDN — SVG transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) — Mô tả tịnh tiến đường không đổi thông qua nhóm đặt hình. *** Nếu logo chỉ còn ảnh raster, [khôi phục hình vector bằng PerfectVector](https://perfectvector.com/vi/vectorize-logo). Kiểm tra hình bóng với tham chiếu, rồi so vị trí hình học và thị giác ở cỡ dùng, lưu độ lệch đã chọn riêng với bản gốc. ## Explore - [Read the HTML article](https://perfectvector.com/vi/blog/logo-optical-centering) - [Khoảng trống logo: tính và giữ phần lề an toàn](https://perfectvector.com/vi/blog/logo-clear-space-calculation.md) - [Logo nên ở định dạng tệp nào? Hướng dẫn thực tế](https://perfectvector.com/vi/blog/logo-file-formats.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)