viewBox = "-155.7 -99 510 510"의 SVG 파일이 있습니다. 나는 이것이 Mac OS X 미리보기의 경로를 -155.7 -99만큼 상쇄한다고 생각합니다. Illustrator에서 SVG를 열면 경로가 전혀 오프셋되지 않습니다. 이 svg를 어떻게 내 보내면 다음과 같습니다.
대지의 위치를 변경하려고 시도했지만 뷰 박스의 원점이 0,0이 아닙니다.
답변:
SVG에 대해 약간의 연구를했으며 분명히보기 상자는 Illustrator를 통해 내보낼 수있는 요소가 아닙니다. 뷰 박스 요소는이 요소를 사용하거나 조작하기로 선택한 특정 프로그램과 만 호환됩니다. 슬프게도 Illustrator는 그중 하나가 아닙니다.
"Illustrator 편집 기능 유지"없이 Illustrator에서 SVG를 저장 한 경우 프로세스를 되돌릴 수 있습니다. SVG 파일의 데이터에서 변경 한 내용은 Illustrator에 반영되지만 대지와 레이어의 위치를 조정하고 크기를 조정하여 의사 뷰 박스를 만듭니다.
지금은 Illustrator에서 디자인 작업을 수행하고 파일 데이터 내에서 뷰 박스의 오프셋 및 배치를위한 모든 추가 코드를 수행 할 수 있습니다. 대지 너비 + 높이 / X + Y 위치를 변경 한 다음 객체 크기 및 위치 속성도 변경하여 의사-보기 상자를 만들 수 있습니다. 그러나 편집 가능한 뷰 박스 기능을 사용하여 Illustrator에 대한 업데이트를 릴리스하지 않으면 진정한 뷰 박스 속성이 없습니다.
Illustrator의 SVG 형식에 대한 일부 내용 : Adobe Illustrator SVG 형식으로 저장
이 문제가 여러 번 발생했으며 Illustrator에서 내보낼 때 SVG보기 상자를 정확하게 0, 0으로 정확하게 재설정하는 유일한 방법 은 새 빈 문서 를 만들고 아트웍을 복사하여 붙여 넣는 것입니다. .
이 손대지 않은 기본 대지의 왼쪽 상단 모서리는보기 상자의 포인트 0, 0으로 내보내집니다. 아트 워크를 정확히 0, 0에서 시작해야하는 경우 스마트 안내선 ( cmd-u) 또는로 설정된 align창을 사용하십시오 Align to Artboard.
오른쪽 하단에서 대지를 안전하게 크기를 조정할 수 있지만 왼쪽 상단을 이동하면 문제가 발생하기 시작합니다. 대지의 왼쪽 상단 모서리를 이동하거나 SVG 파일을 AI로 가져 오면 눈금자, 대지 및 Illustrator에만 알려진 일종의 보이지 않는 비밀 뷰 박스 원점간에 이상한 내부 연결 해제가 발생하는 것 같습니다.
AFAICT는 웹이나 신흥 기술과 관련하여 대부분의 일과 마찬가지로 SVG에 대한 Adobe의 접근 방식은 무언가를 조용히 던져 보도 자료에서 자랑하고 버그, 미완성 및 사랑받지 않은 채로 두지 않는 것이 었습니다. 1998 년처럼 존재하고 계속됩니다.
viewbox하면 SVG로 내보낼 때 변경되는 값으로 직접 변환됩니다 . 새 문서를 만들고 모든 아트웍을 복사하는 것이 완전히 정확합니다. 답변은 올바른 +1로 표시되어야합니다.
Preserve Illustrator Editing Capabilities더 많은 조정이 필요한 경우를 대비하여 처음 저장할 때 확인 해야합니다. 그런 다음 모든 것이 꽤 좋다고 생각한 후에는 저장하지 않고 저장합니다 (파일 크기의 증가는 상당히 중요하므로 원할 것입니다) this)
나는 이것이 주제에 매우 늦다는 것을 알고 있지만, 같은 문제가 있었고 다음을 수행했습니다.
이것이 다른 누군가를 돕기를 바랍니다.
width="<W>" height="<H>"SVG 태그에 좋아하는 텍스트 편집기를 추가 하면 도움이됩니다 ( 소수점 <W>및 <H>소수점 위치 ).
AI가 대지 크기를 계속 변경하고 중심을 잊어 버렸기 때문에 인공 지능 SVG로 만든 것이 중앙 브라우저가 아닌 전체 브라우저 창으로 확장되었다는 매우 비슷한 문제가있었습니다.
이 문제를 해결하는 유일한 방법은 Inkscape에서 최종 수동 처리 단계를 수행하는 것입니다.
마지막으로 SVG를 다시 저장해야하지만 다른 이름으로 저장 대화 상자에서 "최적화 된 SVG"형식을 사용해야합니다. SVG 옵션에 대한 대화 상자가 있으며 "뷰 박스 사용"을 활성화해야합니다.
모든 SVG가 동일한 크기의 아이콘이므로, 항상 동일한 캔버스와 객체 크기를 갖기 때문에이 처리 단계는 1 분 밖에 걸리지 않습니다. 그러나 그렇습니다.이 단계가 전혀 필요 없으며 AI로 수정해야한다는 것은 부끄러운 일입니다.
나는 이것을 알아 냈습니다. 드디어! 이를 수행하는 간단한 방법이 있습니다. 이렇게 :
<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를 동일하게 설정할 수 있습니다 (종횡비를 동일하게 유지). 위의 예와 같이. 실제로 이것을 테스트하지는 않았지만 테스트하고 업데이트합니다.
