Zmień atrybut viewbox w pliku SVG wyeksportowanym przez program Illustrator

38

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.

użytkownik1109371
źródło

Odpowiedzi:

6

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

Iskry Umysłu
źródło
1
Program Illustrator eksportuje atrybut viewbox z programu Illustrator CC (wersja 17.x).
Jake Wilson
33

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.

user56reinstatemonica8
źródło
1
To nie działa dla mnie w programie Illustrator CC. Próbowałem także dopasować niestandardowy rozmiar Artboard to Artwork. Ostateczna wersja SVG zawsze ma wyśrodkowaną rzutnię.
wprater
1
Dziwne - zdecydowanie może działać w CS6. Musiałem zmienić między CS6 a CC - wydaje się jednak dziwną zmianą.
user56reinstatemonica8
1
@ user568458 To jest również technika, której używam, nie jest dokładna, ale bardzo podobna. Wszelkie przekształcenia w „Obszar roboczy” w programie Illustrator bezpośrednio przełożą się na wartości viewboxzmienionych podczas eksportowania do SVG. Masz całkowitą rację, tworząc nowy dokument i kopiując całą kompozycję. Twoja odpowiedź powinna być oznaczona jako poprawna +1.
Terry
2
Adobe był wielkim zwolennikiem SVG, ale kiedy pojawił się svg, nie zrobili nic na tym froncie przez kilka lat po przejęciu Macromedia, ponieważ chcieli, aby Flash odniósł sukces.
joojaa,
1
Korzystam z programu Adobe Illustrator CC 18.1.0 i tworzę zupełnie nowy dokument, kopiuję i wklejam plik svg, a następnie ponowne zapisywanie wydaje się załatwić sprawę. Sprawdzam też Preserve Illustrator Editing Capabilitiesza pierwszym razem, gdy zapisuję, na wypadek, gdy muszę wprowadzić więcej korekt, a potem, gdy myślę, że wszystko jest całkiem dobre, zapisuję je bez niego (wzrost rozmiaru pliku jest dość znaczący, więc będziesz musiał to zrobić this)
sierpień
7

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.

znak
źródło
Witaj Mark, witaj w GDSE i dziękuję za odpowiedź. Jeśli masz jakieś pytania, odwiedź centrum pomocy lub ping z jednym z nas na czacie, gdy Twoja reputacja będzie wystarczająca (20). Kontynuuj wkład i ciesz się stroną!
Zach Saucier
Odkryłem, że dodanie width="<W>" height="<H>"do ulubionego edytora tekstu tagu SVG również pomaga (gdzie <W>i gdzie <H>byłyby liczby dziesiętne).
jtheletter
4

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.

Sebi
źródło
0

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

BugHunterUK
źródło
0

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. 3)
  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. 5
  6. Zapisz nowy plik.
Phani Rithvij
źródło