Đây không phải là một đoạn trích và nhiều hơn là một lời nhắc nhở cho những điều tôi thường xuyên tra cứu. Khi tạo tệp SVG trong Adobe Illustrator, có một số phương pháp khác nhau để xuất tệp. Cả hai phương pháp đều bao gồm một số tùy chọn, một số trong số đó tôi hoàn toàn quên ý nghĩa của chúng và những gì cần chọn.
Phương pháp 1: Lưu dưới dạng…
Có thể bạn sẽ không sử dụng phương pháp này để lưu SVG để sử dụng trên web. Điều này phần lớn là để lưu một tài liệu chính. Trên thực tế, bạn có thể chỉ muốn lưu trực tiếp ở định dạng Illustrator. Bạn sẽ sử dụng một số tùy chọn xuất khác để xuất cho web.
Cách phổ biến nhất để lưu tệp dưới dạng SVG trong Adobe Illustrator là chọn File > Save As… tùy chọn từ menu chính.
Illustrator sẽ mở ra một cửa sổ hộp thoại hỏi bạn đặt tên tệp là gì và lưu nó ở đâu. Quan trọng hơn, nó cũng hỏi loại tệp nào cần lưu, trong trường hợp này là SVG. Không phải SVG nén (svgz). Đồng bằng SVG.
Nhấp vào nút Lưu và một tập hợp các tùy chọn khác sẽ xuất hiện. Đây là nơi trí nhớ của tôi có xu hướng không thành công và tôi phải tìm kiếm trên mạng để tìm câu trả lời. Đây là ảnh chụp màn hình của một cách hoàn toàn tối ưu để lưu tệp SVG trong Adobe Illustrator.
- Hồ sơ SVG : Điều này đặt loại tài liệu XML trên
thẻ mở . SVG 1.1 là phiên bản mới nhất, hỗ trợ trên phạm vi rộng nhất và có thể là tùy chọn phù hợp nhất. Mọi thứ khác đều là phiên bản cũ hơn hoặc tập hợp con của SVG 1.1 và tôi vẫn chưa gặp sự cố khi chọn nó. - Phông chữ> Loại : Chọn “Chuyển đổi sang Dàn bài” sẽ đảm bảo rằng mọi văn bản đã nhập trong tệp được xuất đều là các đường dẫn vectơ chứ không phải glyph. Glyph có khả năng không được hiển thị nhưng các đường dẫn vectơ luôn là một yếu tố thích hợp.
- Tùy chọn> Vị trí hình ảnh : Nếu hình ảnh raster (đọc: JPG.webp, PNG, GIF) được sử dụng trong tệp, thì chúng tôi sẽ muốn chọn tùy chọn "Liên kết". Nếu không, hình ảnh raster sẽ được nhúng vào tệp và điều đó sẽ hút lợi ích về hiệu suất ngay từ SVG bằng cách tăng kích thước tệp để bao gồm các nội dung bổ sung đó. Tốt hơn nên tham chiếu chúng dưới dạng liên kết và đảm bảo bao gồm các tệp nguồn đó trong cùng thư mục với tệp SVG.
- Tùy chọn> Vị trí hình ảnh> Bảo tồn khả năng chỉnh sửa Illustrator : Tùy chọn này có tác động lớn đến đầu ra của tệp SVG. Vì có thể bạn đang lưu một bản sao “chính” ở đây, không dành cho chúng tôi trên web, bạn nên chọn mục này. Điều này sẽ bảo toàn những thứ thuộc quyền sở hữu của Illustrator (như hướng dẫn) cho lần tiếp theo bạn mở tệp. Không được kiểm soát sẽ có nghĩa là những thứ như thế sẽ bị tước bỏ và mất đi.
- Tùy chọn nâng cao> Thuộc tính CSS : Tôi chọn “Thuộc tính trình bày” cho thuộc tính này vì nó đặt các thuộc tính (ví dụ: tô, nét, v.v.) ở mức độ cụ thể thấp nhất. Ví dụ
. Điều này tạo kiểu cho phần tử, nhưng rất dễ bị ghi đè trong CSS. - Tùy chọn nâng cao> Vị trí thập phân : Nếu bạn đã duyệt qua mã cho a
, thì bạn biết rằng các giá trị chỉ định các hình dạng đó có thể siêu chính xác. Tuy nhiên, nhiều khi chúng quá chính xác và làm tăng kích thước tổng thể của tệp SVG. Vì bạn có thể đang lưu một tệp chính ở đây, bạn có thể giữ mức này khá cao, vì kích thước tệp không đáng quan tâm. - Tùy chọn nâng cao> Mã hóa : Tôi không phải là người am hiểu về mã hóa UTF, nhưng để điều này ở “Unicode UTF-8” đảm bảo khả năng tương thích ngược. Ngoài ra, kích thước tệp UTF-8 có xu hướng nhỏ hơn UTF-16, vì vậy đó là một lợi ích của chính nó.
- Tùy chọn nâng cao> Đáp ứng : Bỏ chọn tùy chọn này sẽ đặt các thuộc tính
heightvà cố địnhwidthtrên SVG. Tôi chọn tùy chọn này vì nó cho phép tôi đặt các thuộc tính đó trong mã hoặc trong CSS.
Phương pháp 2: Xuất dưới dạng
Một cách khác để lấy SVG từ Adobe Illustrator là chọn File > Export > Export As… tùy chọn từ menu chính. Tuy nhiên, có một cách thứ hai để đạt được điều đó bằng cách sử dụng bảng Điều khiển trong không gian làm việc Illustrator.
Tùy chọn này là lý tưởng nếu bạn biết mình sẽ sử dụng tệp này trực tiếp trên web và không có kế hoạch tìm kiếm thiết kế sau này. Nó cung cấp ít cài đặt hơn và một số tùy chọn cho phép tệp tối ưu hóa tệp hơn nữa để có hiệu suất tốt hơn. Trên thực tế, cách tốt nhất là thực hiện việc này trên bản sao của tệp thay vì trên chính tệp chính để có một phiên bản có thể mở và chỉnh sửa sau này trong Illustrator và một phiên bản khác phù hợp hơn để phân phát trên trang web sản xuất.
- Tạo kiểu : Chúng tôi đã đề cập đến vấn đề này trước đó trong cài đặt Phương pháp 1, nhưng tôi chọn “Thuộc tính trình bày” ở đây vì đó là cách để tổ chức thuộc tính trên các thuộc tính cấp cao nhất. Điều này bổ sung trật tự cho đánh dấu, tính linh hoạt trong khả năng tạo kiểu của các thuộc tính tiếp theo bằng CSS và thường dẫn đến kích thước tệp nhỏ hơn.
- Phông chữ : Đây là một cái khác mà chúng tôi đã đề cập ở trên, nhưng việc chọn “Chuyển đổi thành phác thảo” sẽ hoán đổi glyph cho đường dẫn vectơ cho các ký tự để đảm bảo văn bản hiển thị chính xác.
- Hình ảnh : Đây là một hình ảnh khác mà chúng tôi đã đề cập ở trên, nhưng việc chọn “Liên kết” sẽ ngăn hình ảnh raster nhúng được đóng gói trong SVG, điều này làm cho tệp lớn hơn rất nhiều.
- ID đối tượng : Cài đặt này cung cấp cho Illustrator lệnh diễu hành về cách đặt tên ID trong đánh dấu. Bạn có thể yêu cầu nó đặt tên cho các ID dựa trên cách các lớp được đặt tên trong tệp.
- Số thập phân : Ít số thập phân hơn trong mã có nghĩa là kích thước tệp nhỏ hơn. Đặt điều này thành
1lý tưởng và OK trong nhiều trường hợp và sẽ không có sự khác biệt đáng chú ý trong thiết kế, nhưng2thường an toàn. Dù bằng cách nào, bạn cũng nên kiểm tra cách SVG được hiển thị. - Minify : Vâng, làm ơn! Thao tác này sẽ nén mã xuống để giảm khoảng trắng và tăng hiệu suất web giống như giảm thiểu CSS.
- Đáp ứng : Chính xác như phương pháp đầu tiên, chọn tùy chọn này là lý tưởng vì các thuộc tính cố định
heightvàwidthnếu không sẽ được đặt trên SVG.