25: Tối ưu hóa SVG theo cách thủ công trong Illustrator - Thủ thuật CSS

Anonim

Video này đã bị xóa. Tôi sẽ quay lại nó vào một ngày không xa. Nếu bạn đang đọc bài viết này và tôi vẫn chưa làm được, vui lòng liên hệ với tôi và thông báo cho tôi về nó.

Đôi khi SVG bạn muốn sử dụng trông hoàn toàn tốt trong Illustrator, nhưng nó không hoàn toàn như cách bạn muốn sử dụng trên web.

Một trong những thứ chúng ta nhìn thấy trong video này là một hình dạng đơn giản, có vẻ như nó sẽ là một hình dạng duy nhất nhưng thực tế là bốn hình dạng nằm chồng lên nhau. Để đơn giản hóa điều đó, chúng ta chỉ cần chọn tất cả các hình dạng và sử dụng các công cụ Pathfinder trong Illustrator để kết hợp chúng thành một hình dạng duy nhất. Chúng ta có thể thấy điều đó được phản ánh ngay lập tức trong mã. Đôi khi thật thú vị khi mở tệp SVG cả trong Illustrator và trong trình chỉnh sửa mã để khi lưu nó, bạn có thể xem nó đang làm gì với mã.

Pathfinder rất phù hợp để tối ưu hóa hình dạng theo cách thủ công - bạn nên biết những nút đó làm gì - và chúng làm gì với phím tùy chọn được nhấn.

Kích thước của tệp SVG, ở một mức độ lớn, được xác định bởi có bao nhiêu điểm đang diễn ra trong các hình dạng. Có những yếu tố khác, nhưng đó là vấn đề quan trọng. Một điều khác mà chúng ta xem xét trong video này là sử dụng tính năng Đơn giản hóa Đường dẫn của Illustrator để giảm số lượng điểm trên một số hình dạng texture-ish để giảm kích thước tệp xuống.

Một điều khác cần biết: đường phức hợp có thể hữu ích. Hai hình dạng hoàn toàn tách biệt với nhau vẫn có thể là một đường dẫn. Giống như, nghĩa đen là một. Cú pháp về cơ bản cho phép "cầm bút lên, di chuyển nó đến một nơi khác, vẽ một cái gì đó mới". Vì vậy, khi bạn tạo một đường phức hợp trong Illustrator (ví dụ: nhiều hình dạng độc lập, Object> Compound Path> Make), đó là cách nó xuất ra. Có thể dẫn đến đầu ra SVG được đơn giản hóa / tối ưu hóa.