Tôi có tệp SVG với viewBox = "- 155,7 -99 510 510". Tôi tin rằng điều này bù đắp các đường dẫn trong bản xem trước Mac OS X bằng -155,7 -99. Khi tôi mở SVG trong Illustrator, các đường dẫn hoàn toàn không được bù. Làm thế nào để tôi xuất khẩu Svg này sao cho:
Tôi đã thử thay đổi vị trí của artboard nhưng nguồn gốc của viewbox không bao giờ là 0,0.
Câu trả lời:
Tôi đã thực hiện một nghiên cứu nhỏ về SVG và rõ ràng khung nhìn không phải là một yếu tố có thể xuất được thông qua Illustrator. Phần tử khung nhìn chỉ tương thích với các chương trình nhất định đã chọn sử dụng phần tử này hoặc thao tác với nó. Đáng buồn thay, Illustrator không phải là một trong số họ.
Nếu bạn đã lưu SVG từ Illustrator mà không có "Bảo tồn khả năng chỉnh sửa Illustrator", bạn có thể đảo ngược quy trình. Bất kỳ thay đổi nào bạn thực hiện trong dữ liệu của tệp SVG sau đó sẽ được phản ánh trong Illustrator nhưng thông qua việc định vị lại và thay đổi kích thước cả Artboard và Layer để tạo hộp xem giả.
Bây giờ, tất cả những gì bạn có thể làm là thiết kế công việc trong Illustrator và tất cả các mã bổ sung để bù và định vị khung nhìn trong dữ liệu tệp. Bạn có thể tạo một khung nhìn giả bằng cách thay đổi vị trí Artboards Width + height / X + Y và sau đó thay đổi cả các thuộc tính Kích thước và vị trí của các đối tượng. Nhưng sẽ không bao giờ có một thuộc tính hộp xem thực sự trừ khi họ phát hành bản cập nhật cho Illustrator với các tính năng của hộp xem có thể chỉnh sửa.
Một số cách đọc về Định dạng SVG trong Illustrator: Adobe Illustrator Lưu ở Định dạng SVG
Tôi đã gặp phải vấn đề này nhiều lần và điều duy nhất từng làm việc với tôi là đặt lại đáng tin cậy khung nhìn SVG về 0, 0 khi xuất từ Illustrator là tạo một tài liệu trống mới và sao chép và dán tác phẩm nghệ thuật vào đó .
Góc trên cùng bên trái của bản vẽ mặc định chưa được chạm này sẽ xuất dưới dạng điểm 0, 0 của hộp xem. Sử dụng hướng dẫn thông minh ( cmd-u) hoặc aligncửa sổ được đặt thành Align to Artboardnếu bạn cần tác phẩm nghệ thuật của mình để bắt đầu chính xác 0, 0.
Bạn có thể thay đổi kích thước bản vẽ một cách an toàn từ góc dưới bên phải, nhưng mọi thứ bắt đầu sai nếu bạn di chuyển góc trên cùng bên trái. Di chuyển góc trên cùng bên trái của bản vẽ hoặc nhập tệp SVG sang AI dường như gây ra một số loại ngắt kết nối nội bộ kỳ lạ giữa người cai trị, bản vẽ nghệ thuật và một số điểm gốc của hộp xem bí mật vô hình chỉ được biết đến với Illustrator.
AFAICT, như với hầu hết mọi thứ liên quan đến web hoặc công nghệ mới nổi, cách tiếp cận của Adobe với SVG đã được đưa ra một cái gì đó thô lỗ với nhau để họ có thể tự hào về nó trong một thông cáo báo chí, sau đó để nó lỗi, chưa hoàn thành và không được yêu thích, giả vờ không tồn tại và tiếp tục như năm 1998.
viewboxbị thay đổi khi xuất sang SVG. Bạn hoàn toàn chính xác trong việc tạo một tài liệu mới và sao chép trên tất cả các tác phẩm nghệ thuật. Câu trả lời của bạn nên được đánh dấu là +1 chính xác.
Preserve Illustrator Editing Capabilitieslần đầu tiên tôi lưu chỉ trong trường hợp tôi cần điều chỉnh nhiều hơn và sau đó tôi nghĩ mọi thứ khá tốt, tôi lưu nó mà không có nó (việc tăng kích thước tệp là khá đáng kể nên bạn sẽ muốn làm này)
Tôi biết điều này rất muộn với chủ đề, nhưng tôi đã có vấn đề tương tự và đã làm như sau.
Hy vọng điều này sẽ giúp người khác.
width="<W>" height="<H>"vào trình soạn thảo văn bản yêu thích của bạn vào thẻ SVG cũng có ích (trong đó <W>và <H>sẽ là số thập phân).
Tôi đã có một vấn đề rất giống là AI tạo ra SVG của tôi không tập trung và mở rộng sang cửa sổ trình duyệt đầy đủ, vì AI liên tục thay đổi kích thước bản vẽ và quên đi việc định tâm.
Cách duy nhất để khắc phục nó là có một bước xử lý thủ công cuối cùng trong Inkscape.
Cuối cùng, bạn phải lưu lại SVG, nhưng sử dụng định dạng "Tối ưu hóa SVG" trong hộp thoại Lưu dưới dạng. Sẽ có một hộp thoại cho các tùy chọn SVG và bạn phải bật "Bật chế độ xem".
Vì tất cả các SVG của tôi là các biểu tượng có cùng kích thước, bước xử lý này chỉ mất 1 phút vì tôi luôn có cùng kích thước canvas và đối tượng. Nhưng vâng, thật xấu hổ khi bước này hoàn toàn cần thiết và nó phải được sửa trong AI.
Tôi đã tìm ra điều này. Cuối cùng! Có một cách đơn giản để làm điều này. Thích như vậy:
<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>Vấn đề là khi bạn xuất một hình ảnh từ Illustrator (như nhiều người), artboard không được bao gồm trong SVG đã xuất. Các đường dẫn không có gì để căn cứ vào tính toán của họ.
Trong trường hợp của tôi, chiều cao tối đa cho hình ảnh của tôi là 100pxvà tôi cần căn cứ các kiểu CSS cho những hình ảnh này dựa trên chiều rộng và chiều cao của chúng. Trong CSS tôi sử dụng vwcác đơn vị, hoặc đơn giản là cũ 100%nếu SVG là để lấp đầy không gian khối. Quy mô này độc đáo. Bằng cách đó, bạn sẽ không gặp rắc rối về việc thiết lập chiều rộng và chiều cao trong CSS để đảm bảo nó hiển thị chính xác.
Tôi đã đi qua từng logo và đặt chiều cao thành 100pxvà để độ rộng tự động tính toán dựa trên tỷ lệ khung hình. Sau đó, tôi lắp tấm ván vào logo để loại bỏ bất kỳ không gian chưa sử dụng.
Tôi đã chọn một hình chữ nhật và tắt điền và đột quỵ và tôi đảm bảo rằng nó có cùng kích thước với bản vẽ. Đặt đối tượng trống này ở phía sau. Bây giờ khi bạn xuất đường dẫn sẽ có một cơ sở để thực hiện các tính toán trên.
Để thực hiện điều này trong mã, có vẻ như bạn có thể bọc các đường dẫn trong một rectvà đặt chiều rộng và chiều cao của nó, sau đó bạn có thể đặt thành viewBoxnhư nhau (giữ tỷ lệ khung hình giống nhau). Như thể hiện trong ví dụ trên. Tôi đã không thực sự kiểm tra điều này nhưng tôi sẽ kiểm tra và cập nhật.
Tôi đã có thể sửa nó bằng cách sử dụng Inkscape . Có vẻ như Illustrator hỗ trợ kém cho các tệp SVG.
