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


128

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

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

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

여기에 이미지 설명을 입력하십시오

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

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

여기에 이미지 설명을 입력하십시오

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

여기에 이미지 설명을 입력하십시오

감사합니다!

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

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

여기에 이미지 설명을 입력하십시오


4
질문과 답변은 모두 Baumr과 Duopixel에 대한 소품입니다.
aendrew

답변:


215

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은 제정신 설정이며 대부분 잊어 버릴 수 있습니다.

그러나이 설정을 1 또는 0으로 낮추는 점이 많은 복잡한 경로가 있으면 파일 크기가 크게 줄어 듭니다. 그러나 베 지어 세그먼트는이 설정에 매우 민감하고 약간 왜곡되어 보일 수 있으므로주의해야합니다. 따라서이 설정을 낮추면 항상 브라우저에서 허용 가능한지 확인하십시오.

부호화

문자 인코딩에 대한 설명은 다소 기술적이며 텍스트가있는 svg 파일에만 관련됩니다. 가장 필요한 인코딩은 UTF-8 이므로 수행중인 작업을 모르는 경우이를 변경하지 마십시오.

Adobe SVG Viewer에 최적화

Adobe SVG Viewer는 브라우저가 SVG를 기본적으로 지원하지 않았던 시대의 브라우저 플러그인입니다. 나는 그것이 무엇을하는지 모르지만, 관련 이 없습니다 . 이것을 확인하지 마십시오 .

슬라이싱 데이터 포함

당신이, Illustrator에서 나중에 SVG 파일을 열고 (당신이 그들을있는 경우) 당신의 조각을 찾는 계획이 아니라면이, 당신의 SVG 파일에 메타 데이터 팽창을 추가 이를 확인하지 않습니다

XMP 포함

파일에 관한 더 많은 메타 데이터는 여기에서 XMP를 읽을있습니다 . 이것을 확인하지 마십시오

더 적은 <tspan>요소 출력

텍스트가 없으면 회색으로 표시됩니다. SVG는 커닝 테이블을 지원하지 않으므로 특정 문자 시퀀스가 ​​너무 이격되어 보입니다 (예 :) AVA. Illustrator는 tspan요소 를 추가 하고 문자 위치를 약간 조정 하여 문제를 해결합니다 . 이것은 텍스트 모양보다 파일 크기에 더 신경 쓰지 않는 한 파일에 약간의 팽창을 추가 하지 않습니다 .

<textpath>패스의 텍스트에 요소 사용

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


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


감사합니다! 정말 자세한 답변입니다! SVG Tiny가 파일 크기가 더 작다고 가정합니까? "소규모의 장치 만 SVG Tiny를 지원하지만 전체 사양은 지원하지 않습니다" 라고 말했을 때 SVG Tiny를 지원하는 장치많지 않다는 의미 입니까? 내가 정말로 묻는 것, 가장 중요한 차이점은 무엇입니까? ( 이 W3 몬스터 를 읽을 필요가 없습니다 .) 다시 감사합니다! 업데이트 : 관심있는 경우 원래 질문 에 소수점 이하 자릿수대한 추가 부분을 추가했습니다 . 텍스트 편집기에서 SVG를 열었습니다. 어떤 XML을 꺼내야
Baumr

3
SVG Tiny는 파일 크기를 줄이는 것이 아니라 저전력 처리 장치에 적합한 SVG의 일부일뿐입니다. 그라디언트, 불투명도, 포함 된 글꼴 및 필터를 삭제합니다. SVG를 지원하는 모든 브라우저가 SVG Tiny도 지원하는지 확실하지 않지만 이것이 사실이라고 가정합니다. 오래된 BlackBerry 전화에 대해서만 적용 범위를 확보하고 있었기 때문에 SVG Tiny를 잊어 버리는 것이 좋습니다. 또한 소수점 이하 자릿수에 대한 귀하의 질문에 대한 답변을 업데이트했습니다.
methodofaction 23시 06 분

다시 감사합니다. P : - "당신은 오래된 블랙 베리 휴대폰에 대한 커버리지를 확보 할 것"과 같은 말을하지 마십시오 내가 그것으로 오래된 아무리보고 싶
Baumr

4
"고급 옵션"섹션에 대한 제안 사항이 있습니까?
RZKY

1
@Duopixel "고급 옵션"으로 답변을 업데이트 해 주시겠습니까? CSS 속성, 소수 자릿수 (답변에 이미 있음), 인코딩, Adobe SVG Viewer 용 최적화, 슬라이싱 데이터 포함, XMP 포함, 더 적은 수의 <tspan> 요소 출력 및 마지막으로 텍스트의 경로에 <textPath> 요소를 사용합니다.
PussInBoots
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.