Tôi có thể chuyển đổi văn bản SVG thành đường dẫn nhưng sử dụng lại glyphs không?

Tôi có một SVG với một tải văn bản trên đó. Đó là một bản đồ bãi đậu xe với số không gian được viết trên đó. Tôi hiển thị điều này trong trình duyệt web và nhờ một lỗi nhỏ tuyệt vời trong Firefox , trình duyệt hiển thị văn bản không chính xác. Boo.

Vì vậy, tôi đã chuyển đổi văn bản thành đường dẫn. Chúng ta đang nói về tới 4000 nhãn riêng biệt. Có thể 15.000 hình dạng mới bây giờ là vectơ. Đó là 4 MB. Thông thường bạn có thể lập luận rằng điều này sẽ cho vay để nén nhưng tôi phải xếp hàng SVG này vào HTML . Tôi đang thêm các thay đổi CSS một cách linh hoạt và đây là cách duy nhất tôi có cơ hội hỗ trợ nhiều trình duyệt. Vì vậy, dù sao đi nữa, kết quả đầu ra của Sceveneven thô của điều này là quá lớn để có ích.

Điều gây ấn tượng với tôi ở đây là tất cả các số không gian này chia sẻ glyphs phổ biến. Không qua chín. Tại sao tôi bao gồm một định nghĩa hình dạng cho mọi trường hợp của mọi số? Tôi có thể sao chép lại những thứ này không?

Tôi đang sử dụng Inkscape nhưng tôi mở để đề xuất.

Phần <use>tử cho phép bạn sử dụng lại các đối tượng được xác định ở nơi khác trong tài liệu. Ví dụ: bạn có thể định nghĩa mỗi glyph là a <symbol>và sau đó sử dụng lại chúng nhiều lần. Dưới đây là một bài viết tốt đẹp về nó: Cấu trúc, Nhóm, và tham khảo trong SVG - Các <g>, <use>, <defs>và <symbol>yếu tố .

Tuy nhiên, tôi không biết làm thế nào để làm điều đó trực tiếp trong Inkscape - đặc biệt là không phải với một loạt các văn bản bạn đã có dưới dạng văn bản. Bạn có thể phải viết một tập lệnh để xử lý hậu kỳ SVG và tìm tất cả các đường dẫn có thể được sử dụng lại.

Có một số tùy chọn nén có sẵn sẽ cung cấp mức độ thành công khác nhau. Để kiểm tra chúng, tôi đã tạo một tệp ảnh nghệ thuật chỉ có nhiều văn bản lặp đi lặp lại. Không được mở rộng, kích thước tệp là 13,8 KB. Mở rộng, kích thước tệp là 1,42 MB .

Tùy chọn tốt: Sử dụng SVGZ - 46,5 KB

Lưu tác phẩm nghệ thuật mở rộng khi SVGZ cho tôi tệp đầu ra 46,5 KB nhỏ hơn đáng kể so với SVG tiêu chuẩn. Hãy lưu ý rằng sự hỗ trợ có thể thay đổi .

Tùy chọn tốt hơn: Nén bằng Scour - 21,1 KB

Scour là một công cụ sẽ xóa và tối ưu hóa tệp SVG cho bạn. Sử dụng lệnh "nén tối đa" của scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, tác phẩm nghệ thuật mở rộng đã giảm xuống còn 21,1 KB. Không xa với kích thước tập tin ban đầu chưa được mở rộng!

Đây là một giải pháp trên trình duyệt hoặc trên máy chủ

Có nhiều cách khác nhau để tối ưu hóa các tệp SVG. Âm thanh như bạn đã thực hiện một chút công bằng của nó.

Một vài tài nguyên mà tôi thấy rất hữu ích là một bài viết về thủ thuật tập trung vào các chi tiết rất cụ thể. Và đặc biệt, công cụ mà nó sử dụng SVGO .

Nếu bạn có nhiều đường dẫn lặp đi lặp lại, tôi sẽ xem xét sử dụng javascript để tạo các hình dạng Động. Có một ví dụ ở đây . Một hướng sẽ là có một hàm được xác định cho mỗi glyph và chỉ cần có mỗi đường dẫn trong phần tử svg được tạo bởi một yêu cầu cho hàm đó. Hoặc lấy một chuỗi đầy đủ và / hoặc mảng các đối số, để tạo svg nội tuyến của bạn. Tất nhiên, điều này hy vọng rằng các đường dẫn của bạn dài hơn độ dài của mã cần thiết để yêu cầu chức năng đã nói (giả định khá dễ dàng).

Ở đây ở mức rất cao là những gì kịch bản của bạn nên làm. Hãy sử dụng ngôn ngữ và môi trường ưa thích của bạn, đây chỉ là điểm khởi đầu cho logic sẽ cung cấp cho bạn những gì bạn đang tìm kiếm.

• Lặp lại tất cả các thành phần văn bản trong xml của SVG và đối với những yếu tố có văn bản số (điểm đỗ xe, bạn không chỉ định nếu có thêm văn bản trong svg của mình), hãy thay đổi id tự động được tạo bởi Inkscape thành chuỗi có chỗ đậu xe đó số tại chỗ. Inkscape chỉ cần ID duy nhất, nó tạo ID không mô tả nhưng sẽ tôn trọng và không thay đổi ID được tạo bởi phần mềm khác hoặc do người dùng tạo hoặc thay đổi theo cách thủ công.
• Trong bảng lưu trữ tọa độ x & y của thành phần văn bản của từng vị trí đỗ xe.
• Cho dù trong Inkscape hoặc bằng cách viết kịch bản, hãy chuyển đổi tất cả văn bản tại chỗ đỗ xe thành đường dẫn.
• Đối với các chữ số 0-9, hãy thêm vào tệp SVG một <defs>phần thích hợp xác định thông tin đường dẫn cho mỗi chữ số.
• Vòng qua tất cả các <g>điểm đỗ xe và thay thế chúng bằng một<use xlink:href="#digit" x=x y=y />
• Lợi nhuận

Tôi có thể thấy trước một số biến chứng mà bạn sẽ phải đối phó và chúc may mắn với những điều đó.

• Vòng lặp sẽ cần phải phân tách chuỗi điểm đỗ xe có 2 chữ số trở lên và khoảng cách thích hợp giữa chữ số đầu tiên và chữ số tiếp theo có thể khó khăn; điều này sẽ phụ thuộc nhiều vào phông chữ bạn đang sử dụng.
• Bạn không chỉ định hướng các điểm đỗ xe ở hướng nào hoặc nếu chúng thậm chí nằm trên các thiết lập cong. Do hướng dẫn sử dụng x, y bù cho các số có 2 chữ số trở lên, bạn có thể cần logic bổ sung để tìm ra 'hướng' của vị trí đỗ xe và cách sắp xếp chính xác các đường dẫn khác nhau của các chữ số đầu tiên.

Hi vọng điêu nay co ich. Chúc may mắn.