SVG 파일 크기를 JPEG 파일 크기에 가깝게 줄일 수 있습니까?

웹 사이트에서 사용중인 이미지가 있습니다. SVG를 사용하여 크기에 관계없이 선명하게 보이도록하고 싶습니다.

• 이 드롭 박스 에는 SVG 파일과 원본 Illustrator 파일 이 포함되어 있습니다.

• 이것은 JPEG 내보내기입니다.

  

SVG는 JPG보다 파일 크기가 훨씬 큽니다. SVG가 유사한 파일 크기를 갖도록 SVG를 최적화 할 수 있습니까? 도움이된다면 품질의 일부를 잃을 수도 있습니다. 이 SVG 최적화 프로그램을 시도했지만 큰 차이는 없었습니다.

일러스트 레이터 파일을 JPG로 저장하고 결과를 추적하여 SVG로 저장하면 파일 크기가 훨씬 작아 지지만 품질이 약간 떨어집니다. 이것은 아마도 원본의 레이어가 큰 크기를 일으키는 것으로 생각합니까? 내가 작업하는 이미지가 너무 복잡하여 SVG에 적합하지 않습니까?

SVG에는 컨트롤러의 오른쪽 하단에 음영을위한 픽셀 그래픽이 내장되어 있습니다. 파일 크기의 약 ⅔를 담당합니다. 이를 제거하면 SVG 파일이 JPEG와 동일합니다. 그래디언트를 사용하면 비슷한 효과를 얻을 수 있습니다.

SVG 파일 크기를 줄이는 다른 기술은 다음과 같습니다.

• 모든 메타 데이터 및 유사 항목을 제거하십시오. Inkscape에는 이를 위해 일반 SVG로 저장 이 있습니다. 다른 프로그램에도 비슷한 것이 있다고 생각합니다.
• 모양에 거의 추가되지 않는 노드를 제거하십시오. 예를 들어 컨트롤러 모양에 가짜 노드가 있습니다.

이것은 아마도 원본의 레이어가 큰 크기를 일으키는 것으로 생각합니까?

터무니없이 많은 레이어를 사용하지 않는 한 (각 객체에 대해 하나의 레이어를 생각할 경우) 레이어는 파일 크기에 관련이 없어야하며 그 후에도 분수에 불과합니다.

내가 작업하는 이미지가 너무 복잡하여 SVG에 적합하지 않습니까?

처음부터 이미지를 합리적으로 만들 수 있다면 ¹ SVG 형식에 비해 너무 복잡해서는 안됩니다. 파일 크기가 폭발하는 마법의 복잡성 임계 값과 같은 것은 없습니다 (아마도 합리적인 형식 일 경우). 물론 해상도를 충분히 조잡하게 선택한 경우 모든 SVG를 파일 크기가 작은 JPEG로 내보낼 수 있습니다. 그러나 반드시 SVG를 사용해서는 안된다는 의미는 아닙니다.

^{¹ 특히 추적 및 유사하지 않습니다. 극단적 인 예를 들기 위해 : SVG 프리미티브를 사용하여 사진의 모든 픽셀을 정확하게 재현하려면 (예 : SVG에 픽셀 그래픽을 포함하지 않음) SVG 형식으로 효율적으로 표현하기에는 결과가 너무 복잡하다고 생각할 수 있습니다 . 그러나 그것은 상식적인 상식입니다.}

Wrzlprmft가 이미 지적했듯이 SVG 파일 크기의 50 % 이상은 컨트롤러에 상당히 미묘한 음영 효과를 만드는 데 사용되는 포함 된 PNG 비트 맵 이미지에 의해 사용됩니다. 해당 이미지를 제거하고 간단한 방사형 그래디언트로 대체하면 SVG를 약 10kb로 줄일 수 있습니다.

               
^{왼쪽에 멋진 비트 맵 음영이있는 원본 이미지, 오른쪽에 간단한 방사형 그래디언트가있는 편집 된 버전.}

당신이 그것을하는 동안, 당신은 또한 경로를 단순화해야 할 것이 있는지 확인해야합니다. 많이 찾지는 못했지만 컨트롤러 개요에는 눈에 띄는 차이없이 병합 할 수있는 인접한 노드 (상단 및 하단 중간 근처)가 있습니다.

그것은 바로 50 % 쉽게 절약 할 수 있지만 아직 멈추지 마십시오. SVG 형식 에 대해 조금이라도 알고 있다면 그보다 훨씬 더 잘 할 수 있습니다 .

먼저 Inkscape에서 "Vacuum Defs"를 실행하여 쓸모없는 정의를 제거한 다음 이미지를 "plain SVG"로 저장하십시오. 이제 텍스트 편집기에서 열어서 제거 할 수있는 것을 살펴볼 차례입니다. 이상적으로 통합 SVG 미리보기가있는 편집기를 사용해야하므로 편집 한 이미지가 이미지에 어떤 영향을 미치는지 신속하게 확인할 수 있습니다. 나는 그것을 위해 emacs 를 사용 하지만 비슷한 기능 을 가진 다른 편집기가 있습니다.

어쨌든 텍스트 편집기에서 SVG 파일을 연 상태에서 간단하게 시작하겠습니다!

• 맨 위에는 큰 쓸모가 없습니다 <!-- comment -->. 그냥 삭제하십시오.

• Illustrator에서 SVG를 직접 편집하는 경우 쓸모없는 <!DOCTYPE ... >선이 있습니다. 역시 삭제하십시오.

• 잉크 스케이프는 쓸모없는 RDF 메타 데이터 블록을 이미지에 집어 넣어야합니다. <metadata ...>닫는 것을 포함하여 모든 것을 포함하여 태그를 찾아 삭제하십시오 </metadata>.

• 또한 파일을 "일반 SVG"로 저장하더라도 Inkscape는 여전히 많은 사용자 정의 속성으로 파일을 버립니다. 로 시작 inkscape:하거나 sodipodi:삭제하는 모든 속성을 찾아 삭제하십시오.

• 메타 데이터 및 Inkscape 특정 속성이 없어지면 <svg>태그 에서 사용되지 않은 모든 XML 네임 스페이스 속성을 제거 할 수 있습니다 . 적어도 안전하게 제거 할 수 있어야한다 xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscape와 xmlns:sodipodi. 중복 xmlns:svg속성 이 있으면 제거하십시오. 이 시점에서 남겨둔 네임 스페이스 속성은 다음과 같습니다.

  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  

• 이 <svg>태그에는 enable-backgroundand 와 같이 안전하게 제거 할 수있는 다른 쓸모없는 속성이 있습니다 xml:space="preserve". (사람들은 일러스트 레이터 SVG 수출 삽입하고, 잉크 스케이프 그들이 쓸모 실현하는 스마트 충분하지 않습니다.)이 viewBox단지의 값을 반복하기 때문에 속성도 안전하게,이 이미지에서 제거 할 수 있습니다 x, y, width및 height특성을.

• 태그 에서 encoding및 standalone속성을 안전하게 제거 할 수도 있습니다 <?xml ... ?>.

• 이제 이미지 데이터에 대해 알아 보겠습니다. 어떤 이유로 든, 잉크 스케이프는 id참조되지 않은 경우에도 모든 요소에 속성을 할당해야 합니다. 모든 id값이 파일에 다른 곳에서 반복되지 않습니다 속성은 (그것을 검색!)를 제거하는 것이 안전합니다. 기본적으로 유지해야 할 유일한 ID는 그라디언트 및 <defs>섹션 내에서 찾은 다른 객체 (예 : 경로)의 ID 입니다.

• 또한 Inkscape는와 같은 긴 ID를 생성하는 것을 좋아합니다 linearGradient4277. lg1대신 짧은 것으로 삭제할 수없는 ID를 약어로 사용하십시오.

• <defs>서로 바로 뒤에 여러 섹션 이 있습니다 . 그것들을 병합하면 몇 바이트가 절약됩니다 (일반적으로 문서 구조가 단순화됩니다).

• <g>파일 끝에 여러 개의 빈 그룹 ( 요소)이 있습니다. 그냥 제거하십시오. 정확히 동일한 transform속성을 가진 연속 된 여러 그룹이있을 수도 있습니다 (또는 전혀 없음). 그것들을 병합하는 것도 안전합니다.

• 이상한 이유로 Inkscape는 요소에 d대한 중복 베 지어 경로 ( 속성)를 저장 <circle>합니다. 그것은 아무 이유없이 공간을 차지하므로 삭제하십시오. ( 요소 의 d속성은 그대로 둡니다 <path>. 실제로는 무언가에 사용됩니다.)

• Inkscape는 또한 style보다 구체적인 속성 (예 : fill="#4888fa"보다 자세한 속성으로 다시 쓰기)이 더 짧은 속성에 CSS를 사용하는 것을 좋아합니다 style="fill:#4888fa". 이러한 스타일을 개별 속성으로 나누고 기본 설정을 쓸데없이 반복하는 스타일을 제거하여 위의 대부분의 변경 사항보다 SVG 형식에 약간 더 익숙해지면 몇 바이트를 절약 할 수 있습니다.

• 또한 <use ... >요소 가 있으면 링크하는 실제 요소로 바꾸어 몇 바이트를 절약 할 수 있습니다. (물론 링크 된 요소가 한 번만 사용되는 경우 공간을 절약 할 수 있습니다.) 또한 Inkscape는 원형 그라디언트를 간접적으로 정의하여 먼저 스톱을 정의한 <linearGradient>다음 <radialGradient>; 방사형 그래디언트 내부에서 정지 점을 직접 이동하고 사용하지 않는 선형 그래디언트를 제거하여 단순화 할 수 있습니다. 보너스로이 작업을 수행하여 모든 xlink:href속성을 제거 xmlns:xlink하면 <svg>태그 에서 속성을 삭제할 수 있습니다 .

• 마지막으로 여분의 모든 바이트를 짜내려면 너무 많은 소수점이있는 숫자 값을 찾아 더 합리적인 것으로 반올림하십시오. 실시간 미리보기가 실제로 도움이되는 곳입니다. 표시하기 전에 값을 얼마나 반올림 할 수 있는지 확인할 수 있기 때문입니다. 모든 숫자를 신중하게 테스트하여 얼마나 반올림 할 수 있는지 확인하고 싶지 않더라도 최소한 1.0000859픽셀 값 을 그냥 반올림하는 것과 같이 거꾸로 매달려있는 과일을 선택할 수 있습니다 1.

• 마지막으로 파일의 들여 쓰기와 공백을 정리하십시오. 바이트 수를 절대적으로 최소화하려면 모든 것을 한 줄에 넣어야합니다 (또는 공백이 필요한 속성 앞에 줄 바꿈 만 넣으십시오).하지만 실제로 읽기가 어렵습니다. 그럼에도 불구하고, 단순하고 보수적 인 들여 쓰기로 가독성과 컴팩트 함 사이의 적절한 균형을 잡을 수 있습니다.

어쨌든, 여기 SVG 이미지를 수동으로 편집 한 내용은 다음과 같습니다.

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>

이 SVG 이미지는 위의 두 번째 예제 이미지와 거의 다르지 않지만 , JPEG 이미지보다 훨씬 적은 5189 바이트 만 차지합니다 . 나는 그것이 아직 더 최적화 될 수 있다고 확신하지만 이것은 실제로 몇 분 안에 연습으로 할 수있는 일의 예일뿐입니다. ( 실제로 SVG 코드를 편집하는 것보다이 답변을 입력하는 데 훨씬 오래 걸렸 습니다.)

마지막으로이 SVG 코드를 gzip으로 압축하면 JPEG 버전 크기의 1/4에 불과한 1846 바이트 (!)로 줄어 듭니다.

" Scour "확장명을 언급 한 사람이 아무도 없습니다 . 이 버전은 Inkscape (v0.47 기준)와 함께 제공되며 Ilmari Karonen이 언급 한 많은 최적화 작업을 수행합니다.

압축 된 SVG (SVGZ)로 변환하여 웹 페이지에 image.svgz를 넣을 수 있습니다.

gzip image.svg
mv image.svg.gz image.svgz

또는 Adobe Illustrator에서 간단히 "SVG 압축"으로 저장하면 image.svgz 파일이 작성됩니다.

테스트 이미지의 경우 여전히 JPG보다 큽니다.

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes

최근 https://petercollingridge.appspot.com/svg-editor ( 소스 코드 )에서 SVG 파일을 최적화하는 데 도움이 되는 도구를 찾았습니다 . 이 경우 파일 크기를 3.7kB로 낮추고 JPG 크기의 절반을 약간 넘는 수동 조정만으로도 좋은 결과를 얻을 수 있습니다.

이 도구를 사용하여 SVG 파일을 최적화하면 파일을 수동으로 골프를 치는 것보다 훨씬 적은 시간이 필요합니다.

SVGOMG! SVG 최적화를위한 멋진 웹앱입니다

이 앱의 제작자에 따르면 SVGOMG는 SVGO 의 " M issing G UI"입니다.

제공된 이미지에서 실행하면 이미지 가 압축 된 직후에 3.42kb바로 표시 1.4kb됩니다.