Nhúng hình ảnh và phông chữ vào SVG
Thêm 1 SVG cùng hình ảnh (PNG, JPEG, WebP, GIF) hoặc phông chữ (TTF, OTF, WOFF, WOFF2) mà SVG tham chiếu, rồi gộp chúng thành 1 SVG để không cần chia sẻ tài nguyên riêng. Chỉ định tài nguyên dùng cho từng tham chiếu rồi tạo SVG. Bạn có thể lưu sau khi bản xem trước hiển thị thành công. Tài nguyên ở URL bên ngoài không được tự động lấy về.
Bạn có thể làm gì
Đóng gói hình ảnh và phông chữ
Nhúng tài nguyên cục bộ đã thêm vào SVG để giảm nhu cầu gửi riêng tài nguyên.
Kiểm tra tham chiếu và tài nguyên
Chỉ định tệp tương ứng cho từng đường dẫn hình ảnh hoặc tên phông trong SVG. SVG sẽ không được tạo nếu còn tham chiếu chưa xử lý.
Kiểm tra cách hiển thị và lưu SVG đã tạo
Kiểm tra cách hiển thị như hình ảnh rồi lưu SVG cùng tài nguyên đã nhúng. Tệp gốc không bị ghi đè.
Cách sử dụng
Thêm SVG và tài nguyên
Chọn một SVG cùng hình ảnh và phông chữ mà SVG tham chiếu. Bạn cũng có thể thêm chúng cùng lúc từ một thư mục.
Ánh xạ tài nguyên cần nhúng
Kiểm tra tệp cục bộ sẽ dùng cho mỗi tham chiếu. Với tham chiếu không tự khớp, hãy chọn trong các tài nguyên đã thêm.
Tạo SVG
Khi không còn tham chiếu chưa xử lý, nhấn “Tạo SVG với hình ảnh và phông chữ”.
Kiểm tra cách hiển thị rồi lưu
Kiểm tra văn bản và hình ảnh trong bản xem trước đã tạo trước khi lưu. Nếu không hiển thị được, hãy kiểm tra SVG gốc và tài nguyên.
Hữu ích khi
Bàn giao SVG cùng tài nguyên
Gộp đồ họa tham chiếu hình ảnh và phông chữ trong các thư mục riêng thành một SVG dễ bàn giao.
Kiểm tra nguyên nhân tham chiếu bị hỏng
So sánh tài nguyên cần thiết với các tệp đã thêm, rồi chỉ định hình ảnh hoặc phông chữ còn thiếu.
Cách hoạt động của tham chiếu và nhúng
Đường dẫn tương đối và khớp tệp
Tham chiếu được khớp tự động khi đường dẫn tham chiếu tương đối với SVG khớp duy nhất với đường dẫn của tài nguyên đã thêm. Hãy chọn thủ công nếu các tệp cùng tên nằm trong thư mục khác nhau hoặc các ứng viên bị trùng lặp.
Chỉ định tệp cho từng tên phông
Công cụ không trích xuất phông chữ trên thiết bị chỉ dựa vào tên phông trong SVG. Hãy thêm các tệp phông cần thiết và chỉ định tệp tương ứng.
Không tự động tải tài nguyên từ URL
Ngay cả khi tham chiếu URL bên ngoài, hãy cung cấp hình ảnh hoặc phông chữ cục bộ và chỉ định chúng. Màn hình này không có thao tác tải tài nguyên từ URL.
Nhúng tài nguyên khác với giảm dung lượng tệp
Đưa dữ liệu hình ảnh vào SVG có thể làm tăng kích thước chính tệp SVG. Phông chữ được chuyển đổi sang WOFF2 rồi nhúng. Hãy tối ưu mã SVG bằng công cụ riêng.
Khác biệt giữa các cách hiển thị
Bản xem trước hiển thị SVG như một hình ảnh. Không đảm bảo hình thức giống nhau trong mọi ứng dụng, vì vậy hãy kiểm tra cả cách hiển thị cần thiết tại nơi sử dụng.
Câu hỏi thường gặp
Tôi nên làm gì nếu không tìm thấy tài nguyên?
Thêm hình ảnh hoặc phông chữ, rồi chỉ định chúng trong trường chọn của tham chiếu tương ứng. Tính năng khớp tự động có thể không hoạt động với thư mục khác nhau, đường dẫn trùng lặp hoặc URL bên ngoài.
Tôi có thể dùng những tài nguyên nào?
Hình ảnh có thể là PNG, JPEG, WebP hoặc GIF; phông chữ có thể là TTF, OTF, WOFF hoặc WOFF2. Chỉ định từng SVG một.
Công cụ có tự tìm phông chữ không?
Công cụ không tìm kiếm phông chữ trên thiết bị hoặc web chỉ dựa vào tên phông trong SVG. Hãy thêm và chọn tệp có sẵn trên thiết bị.
Tài nguyên đã được nhúng sẽ được xử lý thế nào?
Hình ảnh và phông chữ được nhúng dưới dạng URI dữ liệu, cùng tham chiếu # bên trong SVG, không được tính là tham chiếu bên ngoài. Bạn có thể tạo SVG nếu không còn tham chiếu được phát hiện nào chưa xử lý.
Điều gì xảy ra khi thêm hoặc chọn lại tài nguyên?
Nếu chỉ thêm tài nguyên, chúng được thêm vào danh sách và các tài nguyên đã gán trước đó vẫn được giữ. Ví dụ, hãy kiểm tra việc khớp tự động nếu có thêm ứng viên cùng đường dẫn. Đầu vào có SVG mới sẽ thay thế SVG hiện tại và toàn bộ tài nguyên của nó.
Nếu có tham chiếu không được hỗ trợ thì sao?
Không thể nhúng tham chiếu dùng bên ngoài hoặc tham chiếu script. SVG có nhập CSS bên ngoài cũng không thể tải. Hãy sắp xếp các tham chiếu trong ứng dụng gốc hoặc ứng dụng phù hợp khác trước khi chọn SVG.
SVG có nhỏ hơn không?
Công cụ này không nhằm giảm dung lượng tệp. Nhúng tài nguyên vào SVG có thể làm tăng dung lượng. Hãy dùng công cụ tối ưu SVG nếu muốn dọn mã.
Nếu SVG đã tạo không thể hiển thị thì sao?
Tùy chọn lưu chỉ hiển thị trên màn hình này sau khi SVG được tạo hiển thị thành công. Hãy kiểm tra SVG gốc và tài nguyên, xem lại ánh xạ hoặc tệp rồi tạo lại.
Đầu vào và kết quả
- Đầu vào
- 1 SVG cùng hình ảnh và phông chữ. Thêm từ tệp hoặc thư mục.
- Hình ảnh
- Dữ liệu gốc của hình ảnh đã thêm được nhúng. Hình ảnh không bị đổi kích thước hoặc nén.
- Phông chữ
- Phông chữ đã ánh xạ được chuyển đổi sang WOFF2 rồi nhúng.
- Đầu ra
- original-name-embedded.svg. Bạn có thể lưu sau khi SVG đã tạo hiển thị thành công.