Illustrator에서 내 보낸 svg의 뷰 박스 속성 변경


38

viewBox = "-155.7 -99 510 510"의 SVG 파일이 있습니다. 나는 이것이 Mac OS X 미리보기의 경로를 -155.7 -99만큼 상쇄한다고 생각합니다. Illustrator에서 SVG를 열면 경로가 전혀 오프셋되지 않습니다. 이 svg를 어떻게 내 보내면 다음과 같습니다.

  1. viewBox = "0 510 510"
  2. 그리고 모든 경로는 -155.7 -99 세트를 추가했습니다.

대지의 위치를 ​​변경하려고 시도했지만 뷰 박스의 원점이 0,0이 아닙니다.

답변:


6

SVG에 대해 약간의 연구를했으며 분명히보기 상자는 Illustrator를 통해 내보낼 수있는 요소가 아닙니다. 뷰 박스 요소는이 요소를 사용하거나 조작하기로 선택한 특정 프로그램과 만 호환됩니다. 슬프게도 Illustrator는 그중 하나가 아닙니다.

"Illustrator 편집 기능 유지"없이 Illustrator에서 SVG를 저장 한 경우 프로세스를 되돌릴 수 있습니다. SVG 파일의 데이터에서 변경 한 내용은 Illustrator에 반영되지만 대지와 레이어의 위치를 ​​조정하고 크기를 조정하여 의사 뷰 박스를 만듭니다.

지금은 Illustrator에서 디자인 작업을 수행하고 파일 데이터 내에서 뷰 박스의 오프셋 및 배치를위한 모든 추가 코드를 수행 할 수 있습니다. 대지 너비 + 높이 / X + Y 위치를 변경 한 다음 객체 크기 및 위치 속성도 변경하여 의사-보기 상자를 만들 수 있습니다. 그러나 편집 가능한 뷰 박스 기능을 사용하여 Illustrator에 대한 업데이트를 릴리스하지 않으면 진정한 뷰 박스 속성이 없습니다.

Illustrator의 SVG 형식에 대한 일부 내용 : Adobe Illustrator SVG 형식으로 저장


1
Illustrator는 Illustrator CC (v 17.x)에서 뷰 박스 속성을 내 보냅니다.
Jake Wilson

33

이 문제가 여러 번 발생했으며 Illustrator에서 내보낼 때 SVG보기 상자를 정확하게 0, 0으로 정확하게 재설정하는 유일한 방법 은 새 빈 문서만들고 아트웍을 복사하여 붙여 넣는 것입니다. .

이 손대지 않은 기본 대지의 왼쪽 상단 모서리는보기 상자의 포인트 0, 0으로 내보내집니다. 아트 워크를 정확히 0, 0에서 시작해야하는 경우 스마트 안내선 ( cmd-u) 또는로 설정된 align창을 사용하십시오 Align to Artboard.

오른쪽 하단에서 대지를 안전하게 크기를 조정할 수 있지만 왼쪽 상단을 이동하면 문제가 발생하기 시작합니다. 대지의 왼쪽 상단 모서리를 이동하거나 SVG 파일을 AI로 가져 오면 눈금자, 대지 및 Illustrator에만 알려진 일종의 보이지 않는 비밀 뷰 박스 원점간에 이상한 내부 연결 해제가 발생하는 것 같습니다.


AFAICT는 웹이나 신흥 기술과 관련하여 대부분의 일과 마찬가지로 SVG에 대한 Adobe의 접근 방식은 무언가를 조용히 던져 보도 자료에서 자랑하고 버그, 미완성 및 사랑받지 않은 채로 두지 않는 것이 었습니다. 1998 년처럼 존재하고 계속됩니다.


1
Illustrator CC를 사용하면 작동하지 않습니다. 또한 대지에 맞춤 크기 맞춤 크기를 사용해 보았습니다. 최종 SVG에는 항상 중심이있는 뷰포트가 있습니다.
wprater

1
이상합니다-CS6에서 확실히 작동합니다. CS6와 CC간에 변경되어야합니다.하지만 이상한 변경 인 것 같습니다.
user56reinstatemonica8

1
@ user568458 이것은 또한 정확하지만 매우 유사한 기술을 사용합니다. Illustrator에서 'Artboard'로 변환 viewbox하면 SVG로 내보낼 때 변경되는 값으로 직접 변환됩니다 . 새 문서를 만들고 모든 아트웍을 복사하는 것이 완전히 정확합니다. 답변은 올바른 +1로 표시되어야합니다.
Terry

2
어도비는 SVG의 큰 지지자 였지만 svg가 등장했을 때 플래시가 성공하기를 원했기 때문에 Macromedia를 인수 한 후 몇 년 동안 아무것도하지 않았습니다.
joojaa

1
Adobe Illustrator CC 18.1.0을 사용하고 있으며 완전히 새로운 문서를 만들고 svg를 복사하여 붙여 넣은 다음 다시 저장하면 트릭을 수행하는 것 같습니다. 또한 Preserve Illustrator Editing Capabilities더 많은 조정이 필요한 경우를 대비하여 처음 저장할 때 확인 해야합니다. 그런 다음 모든 것이 꽤 좋다고 생각한 후에는 저장하지 않고 저장합니다 (파일 크기의 증가는 상당히 중요하므로 원할 것입니다) this)
aug

7

나는 이것이 주제에 매우 늦다는 것을 알고 있지만, 같은 문제가 있었고 다음을 수행했습니다.

  1. 텍스트 편집기에서 SVG를 열고 viewBox 속성을 0 0 xy로 변경하십시오.
  2. 저장 한 다음 Illustrator에서 다시 엽니 다.
  3. 이제 아트웍이 대지 외부에 배치됩니다. 0 0으로 다시 이동하십시오.
  4. 저장하고 미리보기하면 모두 정상적으로 작동합니다.

이것이 다른 누군가를 돕기를 바랍니다.


마크 안녕하세요, GDSE에 오신 것을 환영합니다. 답변 해 주셔서 감사합니다. 궁금한 점이 있으면 평판이 충분 하면 도움말 센터 를 참조 하거나 채팅 중 하나를 ping하십시오 (20). 계속 기여하고 사이트를 즐기십시오!
Zach Saucier

width="<W>" height="<H>"SVG 태그에 좋아하는 텍스트 편집기를 추가 하면 도움이됩니다 ( 소수점 <W><H>소수점 위치 ).
jtheletter

4

AI가 대지 크기를 계속 변경하고 중심을 잊어 버렸기 때문에 인공 지능 SVG로 만든 것이 중앙 브라우저가 아닌 전체 브라우저 창으로 확장되었다는 매우 비슷한 문제가있었습니다.

이 문제를 해결하는 유일한 방법은 Inkscape에서 최종 수동 처리 단계를 수행하는 것입니다.

  • Inkscape에서 SVG를 엽니 다
  • 파일-> 문서 속성에서 캔버스 크기를 조정하십시오.
  • 아트웍을 선택하고 도구 모음에서 w, h를 입력하여 아트웍 크기 조정 및 이동

마지막으로 SVG를 다시 저장해야하지만 다른 이름으로 저장 대화 상자에서 "최적화 된 SVG"형식을 사용해야합니다. SVG 옵션에 대한 대화 상자가 있으며 "뷰 박스 사용"을 활성화해야합니다.

모든 SVG가 동일한 크기의 아이콘이므로, 항상 동일한 캔버스와 객체 크기를 갖기 때문에이 처리 단계는 1 분 밖에 걸리지 않습니다. 그러나 그렇습니다.이 단계가 전혀 필요 없으며 AI로 수정해야한다는 것은 부끄러운 일입니다.


0

나는 이것을 알아 냈습니다. 드디어! 이를 수행하는 간단한 방법이 있습니다. 이렇게 :

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

Illustrator에서 이미지를 내보낼 때 (대부분의 경우) 아트 보드가 내 보낸 SVG에 포함되지 않은 경우 문제가 발생했습니다. 경로는 계산을 기반으로 할 것이 없습니다.

필자의 경우 이미지의 최대 높이는 100px너비와 높이를 기준으로 이러한 이미지의 CSS 스타일을 기반으로해야했습니다. CSS에서는 vw단위를 사용 하거나 100%SVG가 블록 공간을 채우는 경우 일반 을 사용합니다. 이것은 잘 확장됩니다. 그렇게하면 CSS가 올바르게 표시되도록 CSS에서 너비와 높이를 설정하는 데 혼란을 가지지 않습니다.

각 로고를 100px살펴보고 높이를 설정하고 가로 세로 비율에 따라 너비를 자동으로 계산하도록했습니다. 그런 다음 사용하지 않는 공간을 제거하기 위해 대지를 로고에 맞 춥니 다.

사각형을 선택하고 채우기 및 획을 끄고 대지와 크기가 정확히 같은지 확인했습니다. 이 빈 물체를 뒤쪽에 놓습니다. 이제 경로를 내보낼 때 계산 작업을 수행 할 수있는 기준이 있습니다.

코드 에서이 작업을 수행하려면 경로를 a로 감싸서 rect너비와 높이를 설정 한 다음 너비 viewBox를 동일하게 설정할 수 있습니다 (종횡비를 동일하게 유지). 위의 예와 같이. 실제로 이것을 테스트하지는 않았지만 테스트하고 업데이트합니다.


0

Inkscape 사용하여 문제를 해결할 수있었습니다 . Illustrator에서 SVG 파일을 제대로 지원하지 않는 것 같습니다.

  1. Inkscape에서 svg 파일을 엽니 다 CTRL + O
  2. 그런 다음 새 파일을 작성하십시오. CTRL + N
  3. CTRL + SHIFT + D 속성을 문서화하고 대지 크기를 조정합니다. 삼
  4. 새로 작성된 파일에서 svg를 선택하고 복사하십시오.
  5. 이제 위치 및 크기 값을 변경하여 자산을 조정하십시오. 원점으로 위치를 설정하고 문서 크기로 너비와 높이를 설정합니다. 5
  6. 새 파일을 저장하십시오.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.