Zmień atrybut viewbox w pliku SVG wyeksportowanym przez program Illustrator

Mam plik SVG z viewBox = "- 155,7 -99 510 510". Uważam, że przesunęło to ścieżki w podglądzie Mac OS X o -155,7 -99. kiedy otwieram SVG w programie Illustrator, ścieżki nie są wcale przesunięte. Jak mogę wyeksportować ten plik SVG, aby:

1. viewBox = "0 0 510 510"
2. i wszystkie ścieżki dodały zestaw -155,7 -99

Próbowałem zmienić pozycję obszaru roboczego, ale początek viewbox nigdy nie wynosi 0,0.

Zrobiłem trochę badań nad plikami SVG i najwyraźniej viewbox nie jest elementem, który można eksportować za pośrednictwem programu Illustrator. Element viewbox jest zgodny tylko z niektórymi programami, które zdecydowały się użyć tego elementu lub nim manipulować. Niestety, Illustrator nie jest jednym z nich.

Jeśli plik SVG został zapisany w programie Illustrator bez opcji „Zachowaj możliwości edycji programu Illustrator”, możesz cofnąć proces. Wszelkie zmiany dokonane w danych pliku SVG zostaną odzwierciedlone w programie Illustrator, ale poprzez zmianę położenia i rozmiaru zarówno obszaru roboczego, jak i warstw w celu utworzenia pseudo-widoku.

Na razie wszystko, co możesz zrobić, to prace projektowe w programie Illustrator i cały dodatkowy kod do przesunięcia i pozycjonowania pola widzenia w danych pliku. Możesz stworzyć pseudo-viewbox, po prostu zmieniając szerokość Obszarów roboczych + Wysokość / X + Y, a następnie zmieniając także atrybuty Rozmiar i Pozycja obiektów. Ale nigdy nie będzie prawdziwego atrybutu viewbox, dopóki nie opublikują aktualizacji programu Illustrator z edytowalnymi funkcjami viewbox.

Trochę czytania o formacie SVG w programie Illustrator: Adobe Illustrator Zapisz w formacie SVG

Wpadłem na ten problem kilka razy i jedyną rzeczą, która kiedykolwiek pracowała dla mnie, by niezawodnie zresetować pole podglądu SVG do dokładnie 0, 0 podczas eksportowania z programu Illustrator, jest utworzenie nowego pustego dokumentu oraz skopiowanie i wklejenie do niego grafiki .

Lewy górny róg tego nietkniętego domyślnego obszaru roboczego zostanie wyeksportowany jako punkt 0, 0 pola widoku. Użyj inteligentnych przewodników ( cmd-u) lub alignokna, Align to Artboardaby rozpocząć pracę od dokładnie 0, 0.

Możesz bezpiecznie zmienić rozmiar obszaru roboczego w prawym dolnym rogu, ale sytuacja zacznie się nie udać, jeśli przesuniesz lewy górny róg. Przeniesienie lewego górnego rogu obszarów roboczych lub importowanie plików SVG do AI wydaje się powodować jakieś dziwne wewnętrzne rozłączenie między linijkami, obszarami roboczymi i jakimś niewidzialnym tajnym punktem początkowym viewbox znanym tylko Illustratorowi.

AFAICT, podobnie jak w przypadku większości rzeczy związanych z siecią lub nowymi technologiami, podejście Adobe do SVG polegało na zebraniu czegoś brutalnie razem, aby mogli się tym chwalić w komunikacie prasowym, a następnie pozostawić to błędne, niedokończone i niekochane, udając, że nie istnieje i trwa jak w 1998 roku.

Wiem, że jest bardzo późno w temacie, ale miałem ten sam problem i zrobiłem następujące.

1. Otwórz SVG w edytorze tekstu i zmień atrybut viewBox na 0 0 xy
2. Zapisz go i otwórz ponownie w programie Illustrator
3. Kompozycja zostanie teraz umieszczona poza obszarem roboczym - przesuń ją z powrotem do 0 0
4. Zapisz i wyświetl podgląd, wszystko powinno działać poprawnie.

Mam nadzieję, że to pomaga komuś innemu.

Miałem bardzo podobny problem, że moja sztuczna inteligencja SVG nie została wyśrodkowana i rozwinięta do pełnego okna przeglądarki, ponieważ AI ciągle zmienia rozmiar obszaru roboczego i zapomina o centrowaniu.

Jedynym sposobem, aby to naprawić, jest ostatni etap ręcznego przetwarzania w Inkscape.

• otwórz SVG w Inkscape
• zmień rozmiar płótna w obszarze Plik -> Właściwości dokumentu
• zmień rozmiar i przenieś swoje dzieło, zaznaczając je i wprowadzając w, h na pasku narzędzi edycji

Na koniec musisz ponownie zapisać plik SVG, ale użyj formatu „Zoptymalizowany plik SVG” w oknie dialogowym Zapisz jako. Pojawi się okno dialogowe dla opcji SVG i musisz włączyć „Włącz przeglądanie”.

Ponieważ wszystkie moje pliki SVG są ikonami tego samego rozmiaru, ten etap przetwarzania zajmuje tylko 1 minutę, ponieważ zawsze mam ten sam rozmiar płótna i obiektu. Ale tak, szkoda, że ​​ten krok jest w ogóle potrzebny i powinien zostać naprawiony w AI.

Zrozumiałem to. Wreszcie! Jest na to prosty sposób. Tak jak:

<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>

Problem polegał na tym, że podczas eksportowania obrazu z programu Illustrator (jak wiele osób) obszar roboczy nie jest zawarty w eksportowanym pliku SVG. Ścieżki nie mają na czym oprzeć swoich obliczeń.

W moim przypadku maksymalna wysokość moich obrazów wynosiła 100pxi musiałem oprzeć style CSS dla tych obrazów na podstawie ich szerokości i wysokości. W CSS używam vwjednostek lub po prostu starych, 100%jeśli SVG ma wypełnić przestrzeń bloku. Ładnie się skaluje. W ten sposób nie będziesz bałagan ustawiania szerokości i wysokości w CSS, aby upewnić się, że wyświetla się poprawnie.

Przejrzałem każde logo i ustawiłem wysokość na 100pxi pozwoliłem, aby szerokość automatycznie obliczyła na podstawie proporcji. Następnie dopasowuję obszar roboczy do logo, aby usunąć nieużywane miejsce.

Wybrałem prostokąt, wyłączyłem wypełnienie i obrys i upewniłem się, że ma dokładnie taki sam rozmiar jak obszar roboczy. Umieść ten pusty obiekt z tyłu. Teraz, kiedy eksportujesz, ścieżka będzie miała podstawę do pracy nad obliczeniami.

Aby to zrobić w kodzie, wydaje się, że możesz owinąć ścieżki w recti ustawić jego szerokość i wysokość, a następnie możesz ustawić viewBoxto samo (zachowaj proporcje obrazu takie same). Jak pokazano w powyższym przykładzie. Nie przetestowałem tego, ale przetestuję i zaktualizuję.

Udało mi się to naprawić za pomocą Inkscape . Wydaje się, że Illustrator ma słabą obsługę plików SVG.

1. Otwórz plik svg w Inkscape CTRL + O
2. Następnie utwórz nowy plik CTRL + N
3. CTRL + SHIFT + D Właściwości dokumentu i dostosuj rozmiar obszaru roboczego.
4. Wybierz i skopiuj plik SVG do nowo utworzonego pliku.
5. Teraz dostosuj zasób, zmieniając wartości pozycji i wielkości. Podobnie jak ustawienie pozycji jako Początek oraz szerokości i wysokości jako rozmiaru dokumentu.
6. Zapisz nowy plik.