Sửa khe hở dưới SVG nội tuyến bằng bố cục CSS

Khe hẹp bên dưới SVG có thể đến từ dòng HTML chứa nó. Hình nội tuyến tham gia bố cục văn bản, nơi đường cơ sở và chiều cao dòng có thể chừa chỗ bên dưới hộp của nó. Với ảnh đứng riêng, hãy thử display: block. Với hình cần nằm cạnh chữ, hãy chủ động chọn cách căn nội tuyến.

Trước hết, xác định vị trí khe hở. Khoảng trống ngoài hộp phần tử SVG cần kiểm tra bố cục trang. Khoảng trống trong hộp đó có thể thuộc khung vẽ hoặc quy tắc co vừa của SVG. Đồ lại logo không sửa được vấn đề thứ nhất. Bài này giúp bạn phân biệt hai trường hợp và xác minh một chỉnh sửa CSS nhỏ, cục bộ.

Tìm hộp chứa khoảng trống

Trong công cụ nhà phát triển của trình duyệt, hãy cho SVG và phần tử bao trực tiếp của nó hai màu nền tương phản. Xem cả đường viền phần tử. Màu nền chỉ là công cụ chẩn đoán tạm thời, không cần trở thành một phần của hình bàn giao.

.logo-wrap {
  background: peachpuff;
}
 
.logo-wrap > svg {
  background: lightgreen;
}

Nếu màu đào kéo dài xuống dưới hộp SVG xanh, hãy kiểm tra bố cục dòng, khoảng đệm, viền, chiều cao của phần tử bao và các phần tử lân cận. Nếu màu xanh kéo dài xuống dưới phần hình nhìn thấy, hãy kiểm tra viewBox, phạm vi được tô và cách hình co vừa khung nhìn.

Cả hai có thể xảy ra cùng lúc. Sửa hộp dòng có thể bỏ được một dải mỏng nhưng vẫn để lại lề trong suốt lớn hơn trong ảnh. Hướng dẫn co vừa SVG giải thích cách hình chữ nhật nguồn và khung nhìn đích tương tác với nhau. Đừng thu hẹp viewBox trước khi biết khoảng trống thừa nằm bên trong nó.

Cách nhúng cũng quan trọng. <svg> nội tuyến là một phần của tài liệu HTML; còn <img src="logo.svg"> tải một ảnh ngoài. Ranh giới tạo kiểu của chúng khác nhau, như hướng dẫn SVG nội tuyến so với ảnh giải thích. Khi chẩn đoán, hãy xem phần tử đặt trong hàng HTML thay vì cho rằng mọi tệp SVG đều được nhúng giống nhau.

Vì sao đường cơ sở có thể chừa chỗ bên dưới

Dòng chữ cần chỗ cho các chữ cái thò xuống dưới đường cơ sở, như g và p. Hình nội tuyến có thể căn theo đường cơ sở đó trong khi dòng chứa nó vẫn kéo dài xuống dưới. Đó là lý do đặt lề của ảnh bằng không có thể không thay đổi gì.

Quy tắc tính chiều cao dòng của CSS xác định hộp dòng từ các hộp tham gia và cách căn chỉnh của chúng. Phông chữ và chiều cao dòng của phần tử cha vẫn góp phần ngay cả khi nội dung nhìn thấy là hình. Vì vậy, dải trống cụ thể là kết quả của kiểu xung quanh, không phải lề cố định của SVG.

Đừng nhầm đường cơ sở này với đường cơ sở của chữ được vẽ bên trong SVG. Đổi dominant-baseline trên phần tử văn bản SVG là xử lý phần chữ bên trong đó. Nó không quyết định cách toàn bộ hình nằm trong dòng HTML.

Ví dụ có số đo, không có khung vẽ SVG trống

Chúng tôi tạo một trang HTML gốc chứa ba bản sao của cùng một SVG. Mỗi SVG có viewBox 240 × 100 được một hình chữ nhật tô kín sát mép và hiển thị ở 240 × 100 pixel CSS. Các hàng dùng phông Arial cỡ 40px với chiều cao dòng 48px. Chỉ cách hiển thị hoặc căn chỉnh của SVG thay đổi.

Trình duyệt trả về các số đo phần tử sau:

Đây là số đo từ trang này trong một trình duyệt, không phải lời hứa rằng mọi bố cục đều có khe 10,5 px. Chúng tôi so tọa độ đáy của phần tử bao với tọa độ đáy của SVG. Chiều cao SVG vẫn giữ 100 px trong cả ba trường hợp, nên cách sửa không thu nhỏ hay cắt bớt hình.

Dùng hiển thị dạng khối cho hình đứng riêng

Khi logo cần chiếm một hàng riêng, hãy đặt quy tắc bố cục lên đúng ảnh đó:

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}

Tham chiếu display của MDN phân biệt cách tham gia dạng khối và dạng nội tuyến trong bố cục luồng. Chuyển SVG sang dạng khối sẽ bỏ vai trò mục nội tuyến của nó trong dòng chữ xung quanh. Nó không sửa đường dẫn nguồn hay xóa lề trong suốt của hình.

Kiểm tra lại phần tử bao sau khi áp dụng quy tắc. Nếu nó vẫn kéo dài xuống dưới ảnh, hãy tìm chiều cao đặt tường minh, khoảng đệm, phần tử con khác, phần tử giả hoặc một dòng thừa. Dấu ngắt dòng hay nút văn bản sau hình dạng khối có thể tự tạo nội dung riêng. Phần tử tổ tiên cũng có thể gây ra khoảng trống nhìn thấy.

Hãy giữ bộ chọn ở phạm vi hẹp. Áp dụng svg { display: block; } cho toàn bộ trang web có thể làm xê dịch các biểu tượng vốn chủ đích nằm trong nhãn hoặc câu văn. Hãy chọn thành phần cần hình đứng riêng, rồi kiểm tra những nơi khác dùng nó.

Giữ hình trong dòng chữ ở dạng nội tuyến và chọn cách căn

Với biểu tượng hoặc biểu trưng nhỏ cạnh chữ, giữ dạng nội tuyến có thể chính là bố cục mong muốn. vertical-align: bottom căn mép lề dưới của nó với đáy dòng. vertical-align: middle dùng đường cơ sở và chiều cao chữ x của phần tử cha; nó không phải lệnh căn giữa hình học mọi ảnh trong mọi khung chứa. Xem định nghĩa vertical-align của MDN.

.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

Hãy chọn giữa hai giá trị này dựa trên nhãn và phông chữ thực tế. Biểu tượng chạm đáy dòng có thể trông quá thấp cạnh chữ in hoa. Biểu trưng căn bằng middle vẫn có thể cần chỉnh thị giác vì phần hình nhìn thấy phân bố không đều trong hộp của chính nó.

Trường hợp căn đáy trong ví dụ chỉ chứa hình. Nó chứng minh rằng cách căn này đã loại bỏ dải trống trong đúng hàng đó. Nó không xác lập rằng mọi hàng trộn chữ và biểu tượng sẽ có cùng chiều cao hay hình thức.

Tránh dùng line-height: 0 trên khung chứa văn bản dùng chung làm cách sửa đầu tiên. Thao tác đó thay đổi cả bố cục chữ lẫn khoảng cách ảnh. Nó có thể che triệu chứng trước mắt nhưng khiến thành phần phụ thuộc vào các ghi đè về sau khi có người thêm nhãn. Hãy chọn kiểu hiển thị hoặc cách căn dự kiến trước khi đổi định dạng chữ của phần tử cha.

Xác minh cách sửa mà không thay đổi hình

Mỗi lần chỉ đổi một thứ, rồi kiểm tra:

1. Ranh giới phần tử: khe nhìn thấy giờ nằm bên trong hay bên ngoài hộp SVG?
2. Kích thước: SVG có giữ chiều rộng, chiều cao và tỷ lệ dự kiến không?
3. Phần tử lân cận: nhãn, liên kết và biểu tượng có còn nằm đúng chỗ không?
4. Bố cục đáp ứng: thành phần hoạt động thế nào ở kích thước hẹp và rộng?
5. Kiểu tính được: khai báo dự kiến có được áp dụng không, hay bị một quy tắc cụ thể hơn ghi đè?

Với phần tử bao đơn giản không có viền hay khoảng đệm, so tọa độ đáy của nó với đáy của ảnh là cách kiểm tra hữu ích. Với thành phần thực tế, hãy tính đến khoảng đệm có chủ đích và nội dung khác trước khi coi chênh lệch là lỗi.

Nếu trang cần cách sắp xếp khác trên màn hình nhỏ, hãy xác minh cả cách sắp xếp đó. Cách sửa hiệu quả cho một logo đứng riêng có thể không phù hợp với hàng điều hướng có chữ xuống dòng. Hãy bỏ các màu nền tạm thời khi ranh giới đã rõ.

Khi nào vector hóa giúp ích cho quy trình này

Ở đây, một SVG có sẵn và chỉnh sửa được thường cần sửa CSS hoặc khung vẽ. Hãy giữ tệp đó và chẩn đoán vị trí đặt của nó trước khi dựng lại.

Nếu bản thân biểu trưng chỉ có dạng PNG hoặc JPG và cần đường bao chỉnh sửa được, dùng PerfectVector để chuyển ảnh nguồn thành hình vector, rồi kiểm tra đường viền, các khoảng hở và khung nguồn trước khi đặt kết quả lên trang. Bảng đánh giá chất lượng bản đồ lại hỗ trợ bước kiểm tra hình học riêng đó. Vector hóa chuẩn bị hình dạng; CSS của trang vẫn điều khiển hộp dòng HTML.

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

Vì sao margin: 0 không xóa được khe dưới SVG của tôi? Khoảng trống có thể thuộc dòng văn bản chứa SVG chứ không phải lề của SVG. Hãy kiểm tra ranh giới của SVG và phần tử bao, rồi thử hiển thị dạng khối cho ảnh đứng riêng hoặc cách căn dọc phù hợp cho hình nội tuyến.

display: block có cắt khoảng trắng khỏi SVG không? Không. Nó thay đổi cách phần tử tham gia vào bố cục HTML. Khoảng trống trong viewBox vẫn còn và cần kiểm tra riêng ở hình hoặc cách co vừa.

Nên dùng vertical-align: bottom hay middle? Dùng giá trị phù hợp với hàng thực tế. Bottom căn theo đáy dòng; middle dùng đường cơ sở và chiều cao chữ x của phần tử cha. Hãy xem kết quả với phông chữ cuối cùng và văn bản lân cận thay vì coi giá trị nào là cách căn giữa chung cho mọi trường hợp.

Nguồn tham khảo

1. W3C: Chiều cao dòng và căn dọc trong CSS — Cách các hộp tham gia, cách căn và định dạng chữ của phần tử cha góp phần vào chiều cao dòng.
2. MDN: display — Khác biệt giữa tham gia dạng khối và dạng nội tuyến trong bố cục luồng.
3. MDN: vertical-align — Căn theo đường cơ sở, đáy và giữa, cùng các loại hộp mà thuộc tính áp dụng.

Bắt đầu từ một biểu trưng chỉ có dạng raster? Chuẩn bị hình SVG chỉnh sửa được, so đường bao và khung vẽ với bản nguồn, rồi xác minh vị trí của SVG trong thành phần trang thực tế.