Hồ sơ SVG
- SVG 1.0: tất cả các trình duyệt di động và máy tính để bàn hiện đại đều hỗ trợ SVG 1.1, vì vậy đừng bao giờ chọn tùy chọn này.
- SVG 1.1: Bạn hầu như sẽ luôn muốn điều này.
- SVG Tiny / Basic: đây là tập hợp con của SVG dành cho thiết bị di động. Chỉ một số ít thiết bị hỗ trợ SVG Tiny và không phải là thông số kỹ thuật đầy đủ, vì vậy hãy sử dụng SVG 1.1.
Lưu ý: SVG Tiny không giảm kích thước tệp, nó chỉ là một tập hợp con của SVG phù hợp với các thiết bị có sức mạnh xử lý thấp. Nó sẽ loại bỏ độ dốc, độ mờ, phông chữ nhúng và bộ lọc. Erik Dahlström nói: Tất cả người xem đầy đủ SVG 1.1 sẽ có thể hiển thị tất cả nội dung SVG 1.1 Tiny / Basic (theo thông số kỹ thuật) và có lẽ tất cả nội dung Tiny SVG 1.2 mà Illustrator cũng tạo ra.
Phông chữ lưu ý: nếu bạn không có bất kỳ văn bản nào trong hình ảnh của mình thì cài đặt này không thành vấn đề.
Adobe CEF: không bao giờ sử dụng tùy chọn này của bạn có ý định hiển thị nó trong trình duyệt. Đó là cách nhúng phông chữ của Adobe vào các tệp SVG, theo như tôi biết điều này chỉ được hỗ trợ bởi plugin trình xem SVG của Adobe.
SVG: điều này nhúng phông chữ là SVG, không được Firefox hỗ trợ, nhưng là một lựa chọn tốt nếu bạn có ý định chỉ hỗ trợ các thiết bị di động (thường chạy webkit).
Tạo phác thảo: bạn sẽ muốn làm điều này hầu hết thời gian , trừ khi bạn có một lượng lớn văn bản. Nếu bạn có một lượng lớn văn bản, bạn sẽ muốn nhúng phông chữ với WOFF nhưng bạn sẽ phải làm điều này bằng tay.
Tập hợp con :
Không có gì: điều này sẽ phủ nhận cài đặt trước đó và sẽ không nhúng bất kỳ phông chữ nào, nếu bạn không quan tâm rằng phông chữ rơi trở lại một số phông chữ khác trong máy tính của người dùng, hãy chọn nó.
Chỉ Glyph được sử dụng: bạn sẽ muốn điều này hầu hết thời gian nếu bạn chọn nhúng phông chữ. Nó chỉ nhúng các ký tự được sử dụng để nó không làm tăng kích thước tệp của bạn.
[phần còn lại của tập hợp con]: điều này khá rõ ràng, bạn có thể chọn bao gồm toàn bộ phông chữ hoặc tập hợp con của nó. Nó chỉ hữu ích nếu SVG của bạn động và văn bản có thể thay đổi dựa trên đầu vào của người dùng.
Hình ảnh : điều này chỉ quan trọng nếu bạn bao gồm hình ảnh bitmap
Nhúng: đây thường là những gì bạn muốn , nó mã hóa hình ảnh dưới dạng uri dữ liệu để bạn chỉ cần tải lên một tệp thay vì tệp svg với hình ảnh bitmap đồng hành của nó.
Liên kết: chỉ sử dụng điều này nếu bạn có một số tệp svg tham chiếu một tệp bitmap (vì vậy nó không được tải xuống mỗi khi nó hiển thị tệp svg).
Lưu ý rằng hình ảnh bitmap được liên kết sẽ không hiển thị nếu SVG được hiển thị thông qua <img>thẻ, vì imgkhông cho phép tải tài nguyên bên ngoài. Hơn nữa: webkit có một lỗi không hiển thị hình ảnh bitmap trong các tệp svg ngay cả khi bạn nhúng chúng. Tóm lại: sử dụng <svg>thẻ đơn giản nếu bạn có ý định nhúng hoặc liên kết hình ảnh bitmap, không sử dụng <img>.
Bảo tồn khả năng chỉnh sửa Illustrator
Tôi thích lưu tệp .ai làm hình ảnh nguồn của mình và nghĩ rằng tệp SVG là một Export for webtính năng. Bằng cách đó, bạn tập trung vào việc giảm kích thước tệp và có một bản sao nguyên sơ của tệp vectơ với tất cả các khả năng chỉnh sửa. Vì vậy, đừng chọn cái này.
Địa điểm thập phân
Mặc định 3là một thiết lập lành mạnh và bạn hầu như có thể quên nó.
Tuy nhiên, nếu bạn có đường dẫn thực sự phức tạp với nhiều điểm hạ cài đặt này xuống 1 hoặc thậm chí 0 sẽ giảm đáng kể kích thước tệp. Nhưng bạn phải cẩn thận vì các phân đoạn bezier rất nhạy cảm với cài đặt này và chúng có vẻ hơi bị méo. Vì vậy, nếu bạn hạ thấp cài đặt này, hãy luôn đảm bảo rằng nó trông có thể chấp nhận được trong trình duyệt.
Mã hóa
Giải thích đằng sau mã hóa ký tự là khá kỹ thuật và nó chỉ liên quan đến các tệp svg với văn bản. Mã hóa có khả năng nhất bạn cần là UTF-8 , không thay đổi điều này trừ khi bạn biết bạn đang làm gì.
Tối ưu hóa cho Trình xem Adobe SVG
Adobe SVG Viewer là một plugin trình duyệt từ khi trình duyệt không hỗ trợ SVG nguyên bản. Tôi không biết nó làm gì, nhưng nó không liên quan, đừng kiểm tra cái này .
Bao gồm dữ liệu cắt
Điều này sẽ thêm sự phình to siêu dữ liệu vào tệp SVG của bạn, trừ khi bạn có kế hoạch mở tệp SVG sau trong Illustrator và tìm các lát cắt của bạn (nếu bạn có chúng), đừng kiểm tra điều này
Bao gồm XMP
Nhiều siêu dữ liệu liên quan đến tệp, bạn có thể đọc trên XMP tại đây . đừng kiểm tra cái này
Đầu ra ít <tspan>yếu tố hơn
Điều này sẽ chuyển sang màu xám nếu bạn không có văn bản. SVG không hỗ trợ các bảng k sâu, do đó, các chuỗi ký tự nhất định sẽ có vẻ quá cách nhau, tức là AVA. Illustrator hoạt động xung quanh bằng cách thêm tspancác yếu tố và điều chỉnh vị trí nhân vật một chút. Điều này thêm một chút phình to vào tệp không kiểm tra điều này trừ khi bạn quan tâm nhiều hơn đến kích thước tệp hơn là xuất hiện văn bản .
Sử dụng <textpath>phần tử cho văn bản trên một đường dẫn
Điều này sẽ chuyển sang màu xám nếu bạn không có văn bản trên một đường dẫn. Các trình duyệt có xu hướng thay đổi rất nhiều khi đặt văn bản trên một đường dẫn, vì vậy Illustrator cố gắng hữu ích bằng cách áp dụng xoay và vị trí cho nhân vật thay vì để công việc cho trình duyệt. không kiểm tra điều này trừ khi bạn quan tâm nhiều hơn đến kích thước tệp hơn là xuất hiện văn bản .
Nói chung, tôi khuyên bạn nên xem xét SVG nói chung, bạn sẽ thấy rằng nó trông rất giống HTML và nó cho phép bạn điều chỉnh những thứ không thể thực hiện được trong Illustrator.
