Logo SVG đáp ứng: đổi bố cục ở kích thước nhỏ
Chọn logo SVG chi tiết hoặc gọn bằng điều kiện media của picture. Thử nguồn được chọn ở ba độ rộng khung nhìn và tách việc chọn bố cục khỏi co giãn.
Trên trang này
Logo SVG đáp ứng có thể đổi giữa bố cục chi tiết và biểu trưng gọn thay vì thu nhỏ mọi phần cùng nhau. Trước tiên tạo hai bố cục, rồi dùng nguồn <picture> với điều kiện media để chọn. Kiểm tra currentSrc của ảnh ở các độ rộng bạn định hỗ trợ.
Ví dụ này dùng bố cục Cove hư cấu do chúng tôi tạo: hình thoi rỗng với chữ được vẽ, cùng phiên bản chỉ có biểu trưng. Việc đổi phụ thuộc vào chiều rộng khung nhìn tài liệu. Một vùng chứa hẹp bên trong trang rộng không kích hoạt cùng sự chuyển đổi.
Co giãn và chọn bố cục giải quyết công việc khác nhau
Co giãn thông thường giữ toàn bộ bố cục: biểu tượng, chữ và khoảng cách cùng nhỏ lại. Chỉ đạo hình ảnh chọn một bố cục khác đã được tạo. Xóa chữ hay sắp xếp lại biểu trưng là quyết định thiết kế; tệp SVG không tự quyết định chỉ vì có thể co giãn.
Tài liệu tham khảo HTML picture mô tả các nguồn thay thế được chọn bằng điều kiện media và img dự phòng. Ở đây chúng tôi cung cấp SVG gọn khi rộng 599 pixel trở xuống, còn lại là SVG chi tiết. Khung ảnh giữ cùng kích thước trong khi nội dung đổi.
Tạo hai tệp có thể chỉnh sửa
Lưu bố cục chi tiết gốc này thành detailed.svg. Chữ được vẽ bằng đường dẫn nên ví dụ nhỏ không cần tệp phông chữ:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
<g fill="#176b5b" fill-rule="evenodd">
<path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
<path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
<path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
<path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
<path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
</g>
</svg>Lưu phiên bản gọn thành compact.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
<path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>Đường dẫn hình thoi giống hệt trong cả hai tệp. Tệp chi tiết chứa năm đường dẫn; tệp gọn chứa một. Không tệp nào có phần tử image hay văn bản còn ở dạng chữ. Hai chiều rộng viewBox khác nhau vì bố cục khác nhau, không phải vì một tệp được co giãn đồng đều.
Giữ cả hai phiên bản nguồn. Với thương hiệu của bạn, quyết định đặc điểm nào phải còn dễ nhận ra trong bố cục gọn, rồi kiểm tra khoảng trống, lề và tỷ lệ. Hướng dẫn định dạng tệp logo trình bày bộ nguồn và tệp bàn giao rộng hơn; ví dụ này thêm lựa chọn trình duyệt giữa hai phiên bản đã duyệt.
Chạy mã khởi đầu picture hoàn chỉnh
Lưu thành starter.html cạnh hai SVG và phục vụ thư mục cục bộ. Khi đã cài Python, python3 -m http.server 8766 là một lựa chọn; rồi mở http://localhost:8766/starter.html trong trình duyệt.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
.slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
.narrow { width: 120px; }
.slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
<picture>
<source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
<img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
</picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
<img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
<picture>
<source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
<img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
</picture>
</div>
<pre id="report"></pre>
<script>
const images = [...document.images];
function report() {
document.getElementById('report').textContent = JSON.stringify({
viewportWidth: innerWidth,
mediaMatches: matchMedia('(max-width: 599px)').matches,
images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
complete: image.complete, naturalWidth: image.naturalWidth,
naturalHeight: image.naturalHeight,
containerWidth: image.parentElement.closest('.slot').clientWidth,
elementWidth: image.getBoundingClientRect().width,
elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
}, null, 2);
}
images.forEach(image => image.addEventListener('load', report));
addEventListener('resize', report);
report();
</script>
</html>Điều kiện media là (max-width: 599px). Tính năng media width của CSS đánh giá chiều rộng khung nhìn. Ở 600 pixel điều kiện sai, nên mã khởi đầu chọn nguồn img chi tiết. Con số là điểm ngắt ví dụ cho bố cục này, không phải quy tắc thiết kế thương hiệu.
CSS dành chiều cao ảnh 80 pixel và dùng object-fit: contain để co vừa ảnh được chọn trong hộp phần tử. Cách này giữ cả hai bố cục nhìn thấy mà không kéo chúng thành cùng tỷ lệ khung hình. Áp dụng kiểu co vừa cho img, phần tử trình bày nguồn được chọn.
alt="Cove" xác định thương hiệu hư cấu trong cả hai trường hợp. Đặt văn bản thay thế phù hợp cho ảnh của bạn như tài liệu tham khảo HTML img mô tả. Biểu trưng gọn không nên mất tên hỗ trợ truy cập khi chữ nhìn thấy biến mất.
Trình duyệt đã chọn gì ở ba độ rộng
Chúng tôi mở đúng mã khởi đầu trong Chrome ở độ rộng khung nhìn tài liệu 480, 600 và 960 pixel. Ở mỗi độ rộng cả ba ảnh đều tải xong. Vùng chứa chính giữ rộng 200 pixel và đối chứng hẹp giữ rộng 120 pixel.
| Khung nhìn tài liệu | Ảnh được chọn bố cục, vùng chứa 200 pixel | Co giãn thông thường, vùng chứa 200 pixel | Ảnh được chọn bố cục, vùng chứa 120 pixel |
|---|---|---|---|
| 480 pixel | compact.svg | detailed.svg | compact.svg |
| 600 pixel | detailed.svg | detailed.svg | detailed.svg |
| 960 pixel | detailed.svg | detailed.svg | detailed.svg |
Chúng tôi kiểm tra URL được chọn qua HTMLImageElement.currentSrc, cùng kích thước ảnh đã tải. Chỉ có URL được chọn không phải kiểm tra tải thành công: cũng xem complete và kích thước nội tại. Nguồn gọn báo 96×96; nguồn chi tiết báo 300×96.
Phần tử ảnh chính giữ 200×80 ở cả ba độ rộng. Đối chứng hẹp giữ 120×80. Ở 480 pixel, biểu trưng gọn được căn giữa trong mỗi khung, trong khi đối chứng co giãn thông thường vẫn hiển thị toàn bộ bố cục. Ở 600 và 960 pixel, thu vùng chứa xuống 120 pixel làm bố cục chi tiết nhỏ hơn; nó không chọn tệp gọn.
Khác biệt đó quan trọng trong thanh bên hay thành phần tái sử dụng. Điều kiện media HTML này phản hồi theo khung nhìn, không phải chiều rộng đo được của vùng chứa. Nếu việc chọn logo phải phụ thuộc vào chiều rộng khả dụng của thành phần, hãy lập kế hoạch và thử cơ chế riêng thay vì cho rằng điểm ngắt này theo dõi thành phần.
Những kết quả này bao gồm các tệp gốc, một trình duyệt và ba độ rộng khung nhìn tường minh. Chúng không xác lập mọi trình duyệt, cách nhúng hay đích xuất. Mã khởi đầu cũng không thử quy tắc media bên trong SVG ngoài.
Kiểm tra khung và hình riêng
Hộp phần tử không giống phạm vi logo được tô. Phạm vi hình học trong trình duyệt của nguồn chi tiết là x8, y8, rộng274, cao80 trong viewBox 300×96. Nguồn gọn có phạm vi x8, y8, rộng80, cao80 trong viewBox 96×96. Những lề đó vẫn thuộc phép tính co vừa của nguồn.
Nếu logo được chọn trông quá nhỏ, kiểm tra khoảng trắng nguồn trước khi tăng kích thước phần tử. Nếu trông bị kéo giãn, kiểm tra hộp ảnh và quy tắc co vừa. Hướng dẫn preserveAspectRatio giải thích phép tính khung nhìn SVG liên quan; đổi ánh xạ đó tự nó không tạo bố cục thứ hai.
Mã khởi đầu này dùng ảnh SVG ngoài qua img. Dùng hướng dẫn SVG nội tuyến so với img khi cần chọn cách nhúng khác. Tệp SVG được tải xuống hay in không bao gồm lớp bao HTML chọn nguồn này: bàn giao đúng bố cục người nhận cần và giữ các phiên bản chỉnh sửa được.
Chuẩn bị phiên bản từ logo raster
Nếu hình thương hiệu duy nhất là PNG hoặc JPG và bạn cần hình học chỉnh sửa được, hãy chuẩn bị logo SVG bằng PerfectVector, kiểm tra dáng bao và khoảng trống bên trong, rồi giữ bản chính sạch. Sau đó tạo bố cục chi tiết và gọn, kiểm thử việc chọn trên trang. Vector hóa chuẩn bị hình; nó không quyết định bỏ chữ nào hay chọn điểm ngắt. Hình SVG sạch có sẵn có thể đi thẳng đến công việc bố cục. Hướng dẫn vector hóa giải thích khi nào chuyển đổi hữu ích.
Câu hỏi thường gặp
SVG có tự đơn giản hóa logo trên màn hình nhỏ không? Ví dụ này chọn giữa hai tệp SVG được tạo riêng. Co giãn một tệp giữ bố cục gốc; đơn giản hóa cần quyết định thiết kế riêng.
Tại sao vùng chứa hẹp vẫn hiển thị logo chi tiết? Điều kiện chiều rộng của nguồn picture kiểm tra khung nhìn tài liệu. Trong các khung nhìn 600 và 960 pixel đã thử, ngay cả vùng chứa 120 pixel vẫn giữ nguồn chi tiết.
Làm sao xác nhận tệp nào được dùng? Kiểm tra currentSrc, trạng thái tải và kích thước nội tại của ảnh. Mã khởi đầu in chúng cùng kích thước phần tử và vùng chứa.
Chuyển đổi đáp ứng có được kèm khi tôi tải SVG không? Quy tắc chọn nguồn nằm trong lớp bao HTML. Giữ và bàn giao SVG chi tiết hoặc gọn phù hợp mục đích dùng thực tế của người nhận.
Nguồn tham khảo
- Phần tử HTML picture — nguồn thay thế, điều kiện media và hành vi dự phòng.
- Tính năng media width của CSS — điều kiện khung nhìn tài liệu của mã khởi đầu.
- Thuộc tính currentSrc của ảnh — kiểm tra URL nguồn được chọn.
- CSS object-fit — co vừa mỗi bố cục được chọn trong khung ảnh.
- Phần tử HTML img — trình bày ảnh và văn bản thay thế.
Với logo PNG hoặc JPG của bạn, hãy chuẩn bị bản chính SVG có thể chỉnh sửa, kiểm tra đường viền và khoảng trống, rồi giữ cạnh các bố cục đã duyệt. Sau đó xác minh nguồn được chọn và bố cục nhìn thấy ở các độ rộng khung nhìn trang sẽ sử dụng.
Thêm từ blog
Khoảng trống logo: tính và giữ phần lề an toàn
Chọn đơn vị khoảng trống logo, tính toàn bộ vùng cần để trống và giữ nó trong SVG mà không nhầm kích thước hình với khung vẽ có lề.
Cách vector hóa logo và kiểm tra chất lượng SVG
Ba cách vector hóa logo: đồ tự động bằng AI, vẽ lại trong Illustrator hoặc thuê thiết kế. Tìm cách chọn phù hợp và phân biệt vector thật với vector giả.
