Illustrator에서 웹용 SVG를 내보내는 데 가장 적합한 설정은 무엇입니까?

Illustrator에서 웹용 SVG를 내보내는 데 가장 적합한 설정은 무엇입니까?

---

웹 사이트에 SVG 로고를 사용하여 모든 기기의 반응 형 디자인에 멋지게 보이려고합니다.

그러나 문제가 있기 때문에 가능한 한 많은 장치와 브라우저를 지원하고 싶습니다. 로드 속도 또한 중요한 고려 사항입니다. Adobe Illustrator의 내보내기 설정이이 모든 것에 어떻게 적용됩니까?

Illustrator에는 SVG 내보내기에 대한 몇 가지 옵션이 있습니다. 첫째, 어떤 SVG 프로파일이 가장 좋습니까?

SVG Tiny가 파일 크기가 더 작다고 가정합니까? 많은 장치가 SVG Tiny를 지원합니까? 가장 중요한 차이점은 무엇입니까? ( 이 W3 몬스터 를 읽을 필요가 없습니다 .)

둘째, 이미지 위치에 가장 적합한 옵션은 "link"라고 가정합니다. (느낌표 뒤의 설명을 참조하십시오.)

또는 "embed"옵션에 대한 브라우저 지원은 어떻게됩니까?

감사합니다!

PS 대체 알파 -PNG 옵션이 있지만 SVG가 가능한 한 최선을 다해 지원되고 싶습니다. 알파 -PNG 자체에는 이전 IE 용 솔루션이 필요하기 때문에 JPG와 같은 대체 옵션이 아마도 가장 적합 할 것입니다.

업데이트 : 더 많은 옵션을 구성 할 수 있습니다. 나는 텍스트로 작업하고 있지 않기 때문에 내가 볼 수있는 유일한 것은 소수점 이하 자릿수입니다. 로고의 경우 최대 200x200px (Retina 디스플레이에서 400x400px)로 표시되는 것이 "3"이 가장 좋은 설정입니까? 또는 파일 크기를 최소화하기 위해 "2"?

---

SVG 프로파일

• SVG 1.0 : 모든 최신 데스크탑 및 모바일 브라우저는 SVG 1.1을 지원하므로이 옵션을 선택하지 마십시오.
• SVG 1.1 : 거의 항상 이것을 원할 것입니다.
• SVG Tiny / Basic : 모바일 장치 용 SVG의 하위 세트입니다. 소수의 장치 만 SVG Tiny를 지원하지만 전체 사양은 지원하지 않으므로 SVG 1.1로 이동하십시오.

참고 : SVG Tiny는 파일 크기를 줄이는 것이 아니라 저전력 처리 장치에 적합한 SVG의 하위 집합 일뿐입니다. 그라디언트, 불투명도, 포함 된 글꼴 및 필터를 삭제합니다. Erik Dahlström의 말 : 모든 SVG 1.1 전체 뷰어는 모든 SVG 1.1 Tiny / Basic 컨텐츠 (사양에 따라)와 Illustrator에서 생성하는 SVG 1.2 Tiny 컨텐츠를 모두 표시 할 수 있어야합니다.

글꼴 참고 : 이미지에 텍스트가 없으면이 설정은 중요하지 않습니다.

• Adobe CEF : 브라우저에이 옵션을 표시하려는 경우이 옵션을 사용하지 마십시오. SVG 파일에 글꼴을 포함시키는 Adobe의 방법입니다. 내가 아는 한 Adobe의 SVG 뷰어 플러그인에서만 지원됩니다.

• SVG : 글꼴을 SVG로 포함합니다.이 글꼴은 Firefox에서 지원하지 않지만 모바일 장치 (일반적으로 웹킷을 실행하는 장치) 만 지원하려는 경우 좋은 옵션입니다.

• 개요 만들기 : 텍스트가 많지 않은 경우 대부분이 작업을 수행하려고 합니다. 많은 양의 텍스트가있는 경우 WOFF로 글꼴을 포함 시키려고하지만 직접이 작업을 수행해야합니다.

서브 셋팅 :

• 없음 :이 설정은 이전 설정을 무효화하고 글꼴을 포함하지 않습니다. 글꼴이 사용자 컴퓨터의 다른 글꼴로 바뀌지 않는 경우이 옵션을 선택하십시오.

• 글리프 만 사용 : 글꼴을 포함하도록 선택한 경우이 시간이 가장 필요합니다. 사용 된 문자 만 포함하므로 파일 크기가 부풀려지지 않습니다.

• [rest of subsetting] : 이것은 분명합니다. 전체 글꼴 또는 그 하위 집합을 포함하도록 선택할 수 있습니다. SVG가 동적이고 텍스트가 사용자 입력에 따라 변경 될 수있는 경우에만 유용합니다.

이미지 : 비트 맵 이미지를 포함하는 경우에만 중요합니다

• 포함 : 이것은 일반적으로 원하는 것입니다. 이미지를 데이터 URI로 인코딩하여 svg 파일 대신 하나의 파일을 동반 비트 맵 이미지와 함께 업로드하면됩니다.

• 링크 : 하나의 비트 맵 파일을 참조하는 여러 svg 파일이있는 경우에만 사용하십시오 (따라서 svg 파일을 렌더링 할 때마다 다운로드되지는 않습니다).

외부 리소스로드를 허용하지 않기 <img>때문에 SVG가 태그를 통해 표시되는 경우 연결된 비트 맵 이미지가 표시 img되지 않습니다. 또한, 웹킷에는 svg 파일 내에 비트 맵 이미지를 포함하더라도 이미지를 표시하지 않는 버그가 있습니다. 간단히 말해서 : <svg>비트 맵 이미지를 포함하거나 연결하려는 경우 일반 태그를 사용하십시오 <img>.

Illustrator 편집 기능 유지

.ai 파일을 소스 이미지로 저장하고 SVG 파일을 Export for web기능 으로 생각하고 싶습니다 . 이렇게하면 파일 크기를 줄이는 데 집중하고 모든 편집 기능을 갖춘 벡터 파일의 사본을 만들 수 있습니다. 따라서 이것을 선택하지 마십시오.

소수 자릿수

기본값 3은 제정신 설정이며 대부분 잊어 버릴 수 있습니다.

However, if you have a really complicated paths with many points lowering this setting to 1 or even 0 will reduce the file size substantially. But you must be careful because bezier segments are very sensitive to this setting and they might seem a little distorted. So if you lower this setting always make sure it looks acceptable in a browser.

Encoding

The explanation behind character encoding is rather technical, and it only concerns svg files with text. The most likely encoding you need is UTF-8, do not change this unless you know what you're doing.

Optimize for Adobe SVG Viewer

Adobe SVG Viewer is a browser plugin from times when browsers did not support SVG natively. I don't know what it does, but it is irrelevant, do not check this.

Include slicing data

This adds metadata bloat to your SVG file, unless you plan on opening your SVG file later in Illustrator and finding your slices (if you have them), do not check this

Include XMP

More metadata regarding the file, you can read on XMP here. do not check this

Output fewer <tspan> elements

This will be grayed out if you don't have text. SVG does not support kerning tables, so, certain character sequences will seem too spaced out, i.e. AVA. Illustrator works around by adding tspan elements and tweaking character positions a bit. This adds a bit of bloat to the file do not check this unless you care more about file size than text appearance.

Use <textpath> element for text on a path

경로에 텍스트가 없으면 회색으로 표시됩니다. 경로에 텍스트를 배치 할 때 브라우저는 많이 달라지는 경향이 있으므로 Illustrator는 작업을 브라우저에 맡기는 대신 회전 및 위치를 문자에 적용하여 도움을줍니다. 텍스트 모양보다 파일 크기가 더 중요하지 않으면이 옵션을 선택하지 마십시오 .

---

일반적으로 SVG를 일반적으로 살펴 보는 것이 좋습니다. HTML과 매우 비슷해 Illustrator에서 수행 할 수없는 작업을 조정할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/13236365/optimal-settings-for-exporting-svgs-for-the-web-from-illustrator