SVG를 최적화하기위한 몇 가지 옵션은 무엇입니까?

SVG를 최적화하기위한 몇 가지 옵션은 무엇입니까?

---

여러 SVG가 있는데 일부는 다소 큰 (11MB) pdf2svg를 사용하여 PDF에서 생성됩니다 .

문제는 SVG가 너무 크고 여는 데 오랜 시간이 걸리며 불필요하게 복잡하다는 것입니다. 대부분 텍스트와 일부 이미지 (신문을 생각하세요)를 포함하고 텍스트는 단어가 아닌 작은 문자 덩어리로 나뉩니다.

먼저 크기를 줄이고로드 속도를 높이기 위해 요소의 양을 줄이기 위해 최적화해야합니다. 지금까지 제가 생각한 유일한 것은 한 줄에있는 캐릭터를보고 단일 <tspan>.

대부분 1 ~ 5 개의 문자로 이루어진 그룹처럼 보이기 때문에 텍스트 요소의 양을 상당히 줄여야합니다.

하지만 크기를 줄이기 위해 SVG에 할 수있는 일을 더 찾고 있습니다. 텍스트의 약 95 %에 사용되는 기본 글꼴도 있지만 지금은 모든 텍스트가 글리프 (렌더링 된 모양)로 정의됩니다.

글꼴을 포함하기 만하면 텍스트가 모양이 아닌 텍스트로 렌더링 될 수 있습니까?

또한 PDF를 SVG로 변환하는 더 나은 라이브러리를 알고 있다면 어떤 의견이든 감사하겠습니다. 유일한 요구 사항은 SVG 출력이 PDF와 정확히 동일해야한다는 것입니다.

나는 또한 속도가 그다지 중요하지 않다는 점에 주목하고 싶습니다. 필요한 결과를 생성하는 한 변환에 걸리는 시간은 중요하지 않습니다.

---

SVG-Cleaner는 완벽하게 작동하는 것 같습니다 : 다른 것보다 훨씬 더 빠르고, 더 나은 압축, 내 테스트에서 견고 함, 배치 폴더 처리, 그리고 헤이! 게으른 사람들을위한 윈도우 인스톨러!

내 시도 : 원본 파일 크기 : 241KB, InkScape 삭제 후 참조 : 149K, 도구로 정리 : 38KB, 정리 및 압축 : 5KB (.sgvz 파일 확장자).

빈 그림이 나올 것으로 예상하면서 마지막 그림을 열려고했습니다.하지만 제 그래픽은 그대로 남아 있습니다!

여기에서 다운로드 하십시오 (Windows, Ubuntu 또는 소스).

---

저는 최근에 SVG를 최적화하는 Python 프로그램을 만들기 시작했습니다. https://github.com/petercollingridge/SVG-Optimiser 에서 찾을 수 있습니다.

아주 예비적인 온라인 버전이 있습니다 : http://petercollingridge.appspot.com/

자세한 내용은 http://www.petercollingridge.co.uk/blog/svg-optimiser

완전하지 않고 버그가 많을 수 있지만 불필요한 정밀도 및 기본 스타일 속성 제거와 같이 Chasbeen이 언급 한 몇 가지 문제를 다룹니다. 또한 찾고있는 것이 무엇인지 안다면 불필요한 속성과 네임 스페이스를 제거 할 수 있으며 스타일을 CSS로 변환하여 개선 할 수있는 방법을 쉽게 확인할 수 있습니다.

글꼴 포함에 대해 당신이 의미하는 바를 정말로 이해하지 못합니다. gyph와 여러 문자 요소를 보여주는 SVG의 예제 조각을 붙여 넣으면이를 결합하는 방법을 포함 할 수 있습니다.

---

SVG 파일에서 불필요한 부분을 정리할 때 직접 Scour 를 많이 사용했기 때문에 Scour 를 추천 할 수 있습니다. 이것은 제 취미입니다.

당신에게 잘 봉사 할 수있는 (그리고 내가 시작하는 경향이있는) scour 명령 줄의 예 :

scour --enable-viewboxing --create-groups --shorten-ids --enable-id-stripping --enable-comment-stripping --disable-embed-rasters --remove-metadata --strip-xml-prolog -p 9 < old.svg > new.svg

이전과 새 것을 비교하여 아무것도 망가지지 않았는지 확인하고 -p소수 정밀도를 낮추십시오 (기본은 5를주지 않으면 5입니다). 어떤 수준에서는 아마 일을 아주 심하게 왜곡하기 시작할 것입니다. 그러나 하나 또는 두 개의 소수점이 좋을 것입니다.

좀 더 수동적 인 접근 방식을 취하고 싶다면 킬로바이트 SVG 챌린지 체인지 셋에 모인 많은 트릭 이 있습니다. 이것은 일종의 결합 된 학습 및 교육 장소를 의미합니다.

예. Mike Bostock이 WebPlatform.org 로고 ( 여기에서 html로 래핑되지 않은 버전 ) 를 사용하여 보여준 것처럼 SVG 파일에 글꼴을 포함하거나 외부 글꼴을 연결할 수 있습니다 .

물론 임의의 pdf를 선택하여 변환하는 것보다 어떤 글꼴이 사용되는지에 대한 자세한 지식이 있으면이 작업을 수행하는 것이 훨씬 쉽습니다. 나는 당신이 그 작업의 대부분 (또는 전부)을 직접하지 않고 원본 pdf에 포함 된 글리프에서 이름없는 글꼴을 만드는 도구를 모릅니다.

또한 Kilobyte SVG Challenge README 의 도구 섹션 에 SVG 최적화 도구 목록이 증가하고 있습니다.

---

https://github.com/svg/svgo

sudo npm install -g svgo

현재 디렉토리의 모든 svg를 최적화하려면 :

svgo -f .

npm이없는 경우 다음과 같이 Ubuntu에 설치할 수 있습니다.

sudo apt-get update && sudo apt-get install nodejs-legacy npm

---

변환 된 SVG는 아마도 그것이 될 수있는 것보다 매우 부풀어 오를 것이라고 생각합니다. Inkscape가 그것을 받아 들일지 잘 모르겠습니다! "텍스트로 변환"과 같은 메뉴 옵션이 있지만 반드시 작동하는 것은 아닙니다.

파일에서 검색 및 바꾸기를 수행하여 .. stroke : # 000000;과 같은 기본 SVG 속성 값에 대한 참조를 제거 할 수 있습니다. 스트로크 너비 : 1px; stroke-linecap : 엉덩이; stroke-linejoin : miter; 스트로크 불투명도 : 1; 어쨌든 이것들 중 많은 부분이 기본값이므로 검색하고 아무것도 바꾸지 마십시오.

또한 불필요한 정밀도를 줄이는 방법도 놀랍습니다. 특정 파일에 대한 변환에서 .0000001 또는 .99999675로 끝나는 십진수를 찾을 수 있습니다. 이러한 모든 반복은 제거 / 감소 될 수도 있습니다.

---

SVG sanitizationfeedparser 을 포함 하는 python 라이브러리를 사용하여 SVG 를 구문 분석하기 위해 단일 RSS 항목으로 귀찮게 포장하는이 함수를 작성했습니다.

import feedparser
def sanitize_svg(svg):
    feed = """<?xml version="1.0" encoding="UTF-8" ?><rss><channel><item><description>""" + svg + """</description></item></channel></rss>"""
    parsed = feedparser.parse(feed)
    return parsed.entries[0].description.encode('utf-8')

보안을 염두에두고 요소를 화이트리스트에 추가하기 위해 만들어졌지만 svg 크기도 상당히 줄어 듭니다.

---

이를 위해 무료 웹 서비스를 사용할 수 있습니다.

Try this site: https://online-converting.com/svg-optimizer/

ReferenceURL : https://stackoverflow.com/questions/9009305/what-are-some-options-for-optimizing-svg