Cách tốt nhất để xuất một SVG từ Phác thảo

Và những điều bạn nên biết trước khi sử dụng Sao chép mã SVG.

Xuất tệp SVG từ Phác thảo rất dễ dàng nhưng quá trình tạo ra một SVG hiệu quả và đáng tin cậy, phù hợp với nhu cầu của bạn, là một chủ đề lớn hơn nhiều. Nó thực sự là một chủ đề phức tạp đến nỗi tôi đã thực hiện một khóa học về nó, mà tôi đã phát hành ngày hôm nay sau 8 tháng phát triển! Nhưng bài viết này không phải là một mục đích bán hàng; Nó hướng dẫn kỹ thuật cho một nhà thiết kế câu hỏi phổ biến.

Một câu hỏi phổ biến khi xuất SVG từ Phác thảo là: Tôi nên sử dụng tính năng nào để xuất? Sao chép mã SVG? Nút Xuất? Thứ gì khác?"

Tôi đã kiểm tra sâu sắc từng tính năng này và biên soạn những phát hiện và khuyến nghị của tôi cho bạn trong bài viết này.

Khi nói đến các định dạng bitmap, nó không thành vấn đề nếu bạn có các lớp của mình trong một lát hoặc Artboard; cho dù bạn đã kéo thiết kế ra khỏi Danh sách lớp để thuận tiện hay sử dụng nút Xuất trong Trình kiểm tra. Đồ họa cuối cùng của bạn sẽ giống nhau.

Nhưng SVG thì khác. Chúng là những mô tả về thiết kế của bạn, chứa hàng tấn thông tin về các lớp của bạn. Và có những cách tinh tế trong đó những mô tả đó thay đổi dựa trên cách bạn lấy SVG ra khỏi Phác thảo. Đồ họa của bạn sẽ trông giống nhau, nhưng mã bên dưới sẽ khác nhau.

Các biến chính là:

Tính năng nào xuất khẩu
Bạn có đang sử dụng nút Xuất trong Trình kiểm tra, chức năng Sao chép Mã SVG hoặc kéo ra khỏi bản xem trước xuất Danh sách lớp hoặc Trình kiểm tra không?

Những gì bạn xuất khẩu
Bạn đang xuất một Artboard, một lớp hoặc một lát? Nếu bạn chỉ xuất các lớp hoặc lát đã chọn, chúng có được chứa trong Artboard hoặc nổi xung quanh trong Canvas không?

Các quy trình khác
Bạn có đang dựa vào plugin Trình biên dịch SVGO để tối ưu hóa tệp không?

Khi được kết hợp, các biến này cho phép ít nhất một tá cách để xuất một SVG từ thiết kế của bạn. Vậy cái nào là tốt nhất?

Thực hiện và khuyến nghị

Trong trường hợp bạn không quan tâm đến các chi tiết kỹ thuật khó chịu, đây là những lời khuyên của tôi cho quy trình xuất khẩu SVG của bạn:

  • Artboards là chìa khóa. Luôn có Artboard xung quanh các lớp của bạn và xuất Artboard thay vì các lớp hoặc lát bên trong nó.
  • Vui lòng sử dụng nút Xuất trong Trình kiểm tra hoặc chức năng Sao chép mã SVG trong menu Chỉnh sửa, nhưng, một lần nữa, hãy sử dụng chúng trên Artboard của bạn.
  • Sao chép Mã SVG loại trừ một vài điều nhỏ mà bạn có thể muốn trong SVG của bạn, chẳng hạn như một yếu tố tiêu đề (để cải thiện khả năng truy cập) hoặc khai báo XML (được khuyên dùng cho các SVG được sử dụng làm đồ họa độc lập).
  • Nếu bạn muốn sử dụng plugin Trình biên dịch SVGO, hãy nhớ rằng nó chỉ cố ý hoạt động với nút Xuất không phải là Sao chép mã SVG.
  • Kiểm tra mẹo tắt bàn phím dưới đây để tăng hiệu quả của bạn!

Để hiểu cách tôi đi đến những kết luận này và sự khác biệt cụ thể giữa mỗi phương thức xuất khẩu, chúng ta cần hiểu cách các lớp được định vị trong một SVG.

Tôi đã chuyển đến đây, nhưng tôi đã chuyển đến đây

Mỗi SVG đều có một hệ thống tọa độ lưới, hoặc,, trong đó các phần tử được định vị. Đây là nền tảng cho cách thức hoạt động của SVG.

Các SVG cũng có một cái gì đó gọi là viewBox và nó giống như một Artboard trong Phác thảo. Khung nhìn xác định phần nào của lưới SVG, hiển thị trong đồ họa cuối cùng của bạn, mọi thứ bên trong sẽ hiển thị và mọi thứ bên ngoài sẽ bị cắt bỏ.

Như một thông lệ được chấp nhận chung, viewBox thường được định vị tại điểm gốc lưới. Nói cách khác, góc trên cùng bên trái của viewBox được đặt ở vị trí 0,0 (không trên cả hai trục x và y). Nó có thể được định vị ở bất cứ đâu trên lưới, nhưng hầu hết các kịch bản đều có lợi từ việc tuân thủ quy ước này.

Khi xuất đồ họa từ Phác thảo (ở bất kỳ định dạng nào), có một số cách tiếp cận cho phép bạn, người dùng, xác định kích thước của đồ họa của bạn và các cách khác trong đó Phác thảo xác định kích thước cho bạn. Ví dụ: nếu bạn xuất Artboard hoặc lát, bạn sẽ kiểm soát được. Nếu bạn chọn bất kỳ lớp nào và nhấp vào Tạo có thể xuất, Phác thảo sẽ được kiểm soát và sẽ tạo một đồ họa có kích thước chính xác của lớp bạn đã chọn (cộng với bóng và viền của nó).

Nếu chúng ta chỉ xuất lớp hình chữ nhật màu đỏ này dưới dạng SVG, thì won sẽ có bất kỳ khoảng trống thừa nào xung quanh hình chữ nhật, thì viewBox sẽ có cùng kích thước với hình chữ nhật. Vì vậy, bạn có thể mong đợi Phác thảo định vị cả viewBox và hình chữ nhật ở 0,0 trong lưới SVG mới.

Nhược điểm của phương pháp đó là bạn mất thông tin về vị trí của hình chữ nhật đó trong Artboard của nó. May mắn thay, phần lớn Phác thảo đồng ý rằng vị trí của các phần tử SVG của bạn, phần lớn, phải giống với các lớp của bạn trong Artboard.

Vì vậy, khi chỉ xuất hình chữ nhật màu đỏ đó, Phác thảo tạo ra một khung nhìn với kích thước hình chữ nhật, nhưng giữ cho khung nhìn ở vị trí 0,0. Phác thảo cũng tôn trọng vị trí ban đầu của hình chữ nhật trong Artboard của nó và sử dụng một mẹo để di chuyển hình chữ nhật lên 0,0 mà không thay đổi các thuộc tính vị trí cốt lõi của nó.

Thủ thuật đó được gọi là chuyển đổi dịch. Có nhiều loại biến đổi, như tỷ lệ và xoay, nhưng dịch là cơ bản nhất: nó chỉ đơn giản là di chuyển một yếu tố. Yup trên phạm vi dịch thuật của Yup là một từ ưa thích cho việc di chuyển.

Nghe có vẻ dư thừa để tạo ra một yếu tố ở một nơi, sau đó ngay lập tức di chuyển nó đến một nơi khác. Nhưng quy trình 2 bước này là cần thiết để lưu giữ thông tin vị trí ban đầu của hình chữ nhật, đồng thời tuân thủ quy ước có một khung nhìn được đặt ở vị trí 0,0 trong lưới SVG. Những điều đó nghe có vẻ như là những lý do ngớ ngẩn, nhưng chúng có thể quan trọng khi bạn thực sự làm việc với mã SVG. Đây là một kịch bản trong thế giới thực:

Khi chuyển đổi dịch là hữu ích

Theo kinh nghiệm của tôi, có một kịch bản khác khi nó bắt buộc phải định vị các phần tử SVG trong đó các lớp Phác thảo tương ứng của chúng được sử dụng là: khi bạn thay đổi hoặc thêm các lớp vào đồ họa SVG hiện có.

Hãy tưởng tượng bạn đã xuất khẩu biểu tượng Cá voi đáng yêu vô cùng đáng yêu như một SVG, và dành thời gian để tối ưu hóa, tinh chỉnh và có thể tạo hiệu ứng cho nó hoặc đặt nó vào một hình chữ viết. Nhưng sau đó bạn thực hiện một số thay đổi.

Sau khi thay đổi đường đi của miệng và thêm các đường phun, bạn muốn kết hợp những thay đổi đó lại với SVG được chế tạo cẩn thận của bạn. Nếu bạn xuất hoặc sử dụng Sao chép Mã SVG trên các lớp mới, Phác thảo sẽ tạo ra một SVG vừa có giá trị như một đồ họa vừa có thể sử dụng để sao chép một phần được chọn để kết hợp lại với SVG ban đầu của bạn. Thực hiện cái sau dễ dàng vì biến đổi được áp dụng cho nhóm ; các yếu tố thiết kế của bạn bên trong có vị trí ban đầu của chúng và sẵn sàng sao chép.

Một đơn giản hóa thô của mã SVG mới:

  
    
    
    
    ...
  
(Bold = Sửa đổi bạn sẽ sao chép lại vào bản gốc)
Tất cả các đường dẫn vectơ mới đều được định vị trong cùng một lưới SVG như ban đầu, do đó chúng có thể dễ dàng được dán vào.

Tôi đề nghị chỉ sử dụng quy trình làm việc trên mỗi lớp này khi sửa đổi đồ họa mà bạn đã thực hiện. Như đã đề cập trong phần Take-Aways ở trên, cách tốt nhất để bắt đầu các SVG mới bằng cách xuất Artboard bằng cách đó, dịch các biến đổi don don làm lộn xộn SVG cuối cùng của bạn.

Lưu ý về Tối ưu hóa

Nếu bạn sử dụng Sao chép mã SVG cho các lớp đã chọn và kết hợp chúng vào một SVG hiện có (như được mô tả ở trên), hãy cẩn thận khi đưa mã được sao chép đó thông qua trình tối ưu hóa như SVGOMG.

Tôi là một fan hâm mộ lớn của SVGOMG, và bao gồm tất cả các tùy chọn của nó trong khóa học của tôi, nhưng một số tối ưu hóa sẽ sắp xếp lại hoặc làm phẳng chuyển đổi dịch - một thứ không được sao chép khi bạn kết hợp một yếu tố vào SVG hiện tại của bạn . Tối ưu hóa như Thu gọn các nhóm vô dụng và Di chuyển các nhóm từ các nhóm sang các thành phần có thể di chuyển thuộc tính biến đổi sang thành phần bạn muốn sao chép (thay vì để nó trên nhóm container chứa nó). Trong trường hợp đó, nó vẫn còn khá dễ xóa. Nhưng tối ưu hóa Đường dẫn Tròn / Viết lại có thể làm phẳng phép biến đổi thành phần tử đó, vectơ điểm Vectơ có hiệu quả làm cho nó vĩnh viễn.

Nó không phải là một điều xấu khi chạy mã SVG được sao chép của bạn thông qua SVGOMG - chỉ cần đảm bảo rằng bạn vẫn có thể xác định vị trí chuyển đổi dịch đó. Và nếu bạn sao chép các lớp sẽ biến thành các phần tử , thì bạn nên sao chép toàn bộ Artboard để không có biến đổi dịch nào cả.

Mẹo tắt bàn phím

Nếu bạn bắt đầu sử dụng và yêu thích Sao chép mã SVG, thì đây là một mẹo để làm cho công việc của bạn hiệu quả hơn nữa.

Cài đặt plugin Phác thảo tuyệt vời; nó thêm một chức năng để chọn Artboard của lớp mà bạn đang làm việc. Sau đó, tạo các phím tắt tùy chỉnh trong Tùy chọn hệ thống cho lệnh Artboard hiện tại đó và cho Sao chép mã SVG. Các phím bạn chọn là một vấn đề về sở thích cá nhân.

Các phím tắt mới này cho phép bạn chọn Artboard trong một lần nhấn phím và sao chép mã SVG của nó vào một phím khác!

Cách thức hoạt động của từng phương pháp

Nếu bạn tò mò muốn biết sự khác biệt chính xác giữa các tính năng xuất bản phác thảo và tất cả các biến đã nói ở trên, thì tôi đã đưa ra kết quả kiểm tra của mình tại đây:

Xuất khẩu bản phác thảo SVG đã cải thiện đáng kể trong năm ngoái và ngay cả với một vài cập nhật mới nhất. Nhưng một số thực tiễn tốt nhất vẫn đúng: luôn sử dụng Artboard xung quanh các lớp của bạn và xuất hoặc sao chép Artboard thay vì các lớp hoặc lát riêng lẻ. Chức năng Sao chép mã SVG không còn thua kém nút Xuất; nếu bạn biết khi nào và làm thế nào để sử dụng nó, nó có thể mang lại hiệu quả tăng đáng kể cho quy trình thiết kế của bạn.

Bài viết này được lấy cảm hứng từ khóa học mới SVG Workflows in Sketch của tôi. Tôi ước mình có tài nguyên như thế này khi tôi học SVG, vì vậy tôi đã quyết tâm cung cấp một số phần còn thiếu cho các nhà thiết kế khác. Khóa học nhằm thu hẹp khoảng cách giữa những gì bạn biết trong Phác thảo và những điều tuyệt vời mà bạn sẽ tạo ra với SVG.

Bạn cũng có thể đăng ký nhận bản tin của tôi để trở thành người đầu tiên biết khi tôi xuất bản các bài viết và tài nguyên thiết kế mới.