SVG 텍스트를 패스로 변환 할 수 있지만 글리프를 재사용 할 수 있습니까?

14

텍스트가 많은 SVG가 있습니다. 공간 번호가 적힌 주차장지도입니다. 나는 이것을 웹 브라우저에 표시 하고 Firefox의 멋진 작은 버그 덕분에 브라우저가 텍스트를 잘못 렌더링합니다. 우우.

그래서 텍스트를 경로로 변환했습니다. 최대 4000 개의 개별 레이블에 대해 이야기하고 있습니다. 아마도 15,000 개의 새로운 모양이 이제는 벡터입니다. 4MB입니다. 일반적으로이 압축 자체를 빌려 것이라고 주장 할 수도 있지만 나는 에있는 인라인 (in-line) HTML에이 SVG를 . CSS 변경 사항을 동적으로 추가하고 있는데 이것이 브라우저 간 지원 가능성이있는 유일한 방법입니다. 어쨌든, 원시의-심지어 정련 된-이 결과는 너무 커서 유용하지 않습니다.

여기에서 가장 중요한 것은이 모든 공간 번호가 공통 글리프를 공유한다는 것입니다. 0에서 9까지 왜위한 형상 정의를 포함하고 모든 모든 수의 인스턴스를? 중복 제거 할 수 있습니까?

잉크 스케이프를 사용하고 있지만 제안 할 수 있습니다.

inkscape svg

— 올리
소스

SVG 파일을 공유하여 실험 해 볼 수 있습니까?

— JohnB

1

버그는 정확히 무엇입니까 (스크린 샷), 어떻게 브라우저로 내보내고로드합니까? 텍스트 스타일을 수정 / 대체하기 위해 CSS 스타일링이나 페이지에 작은 스크립트를 사용하여 문제를 해결할 수 있습니다. 동적 맵 표시 인 경우 실제 맵으로 전환 할 수 있습니다. 대부분의 브라우저 맵핑 라이브러리 (및 많은 데이터 기반 라이브러리)는 레이블링을 크게 지원합니다.

— brichins

1

죄송합니다. SVG는 공유하지 않습니다 (클라이언트에 속함) . 에 대한 버그는 알려져 있습니다. 이는 SVG의 글꼴이 한 지점을 넘어서 축소되지 않는다는 것을 의미합니다 . 수천 개의 주차 공간 이있는지도에서 확대 / 축소하는 경우 심각한 문제 입니다. 그것들은 (예) ~ 0.08pt이어야하고 실제로는 13pt입니다.

— Oli

1

당신은 잘못된 버그 번호를 가지고, 당신은 실제로 찾고있는 이 한

— 로버트 Longson

서브셋에서 이것을 테스트하고 싶을 수도 있지만 path|simplify전혀 도움이 될 수 있습니까? 소문자 "s"는 28 포인트 경로로 변환하고, 간결하게 17로 축소하고, 단순화 된 버전과 단순화되지 않은 버전을 확대 한 경우에도 하나의 "s"가 화면을 채우므로 차이가 없습니다.

— Chris H

6

이 <use>요소를 사용하면 문서의 다른 곳에 정의 된 객체를 재사용 할 수 있습니다. 예를 들어, 각 글리프를 a로 정의한 <symbol>다음 여러 번 재사용 할 수 있습니다. 여기에 대한 좋은 기사입니다 : SVG의 구조화, 그룹화 및 참조하는 - <g>, <use>, <defs>및 <symbol>요소 .

그래도 Inkscape에서 직접 수행하는 방법을 모르겠습니다. 특히 이미 텍스트로 가지고있는 많은 텍스트에는 적합하지 않습니다. SVG를 후 처리하고 재사용 할 수있는 모든 경로를 찾으려면 스크립트를 작성해야 할 수도 있습니다.

— 라훌
소스

는 <use>내가이 물었을 때, 스크립트는 어떻게 무슨 생각이었다. 거의 동일하지 않은 마크 업을 중복 제거 할 수있는 것은 아무것도 없다.

— Oli

@Oli 동일한 마크 업 을 중복 제거하는 것조차 없었다 . 난 내 자신 작성했다 (그리고 바이트 동일한 I의 평균에 의해를, 나는 그들과 비교 해시 해시)

— 크리스 H

나는 점심에 대한 생각을 가지고 있었고 잉크 스케이프 내의 (파이썬) 스크립트가 나아갈 길이라고 생각합니다. 스크립트는 텍스트를 텍스트로 시작하고 <symbol>s에 대한 참조로 바꿉니다 (또는 <def>텍스트-경로 글리프 가 가능한 것처럼 보입니다

— Chris H

4

다양한 성공률을 제공하는 일부 압축 옵션이 있습니다. 테스트하기 위해 반복되는 텍스트가 많은 아트웍 파일을 만들었습니다. 확장되지 않은 파일 크기는 13.8KB입니다. 확장하면 파일 크기는 1.42 MB 입니다.

좋은 옵션 : SVGZ 사용-46.5KB

확장 된 아트웍을 SVGZ로 저장하면 표준 SVG보다 훨씬 작은 46.5KB의 출력 파일이 제공됩니다. 지원 내용이 다를 수 있지만주의하십시오 .

더 나은 옵션 : Scour를 사용한 압축-21.1 KB

Scour 는 SVG 파일을 스크러빙하고 최적화하는 도구입니다. 의 "최대 압축"명령을 사용 scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none하여 확장 된 아트웍이 21.1KB로 줄었습니다. 확장되지 않은 원래 파일 크기에서 멀지 않은 곳에!

— JohnB
소스

3

수색은 압축하지 않습니다 그냥 쓰레기를 제거하고 (주어진 나를 위해 좋은의 공정한 금액을 수행합니까 동안 큰 개체 수), 내 "4메가바이트는"포스트 세굴했다. 압축 된 컨텐츠는 훌륭하지만 이전에 언급 했어야했지만 브라우저 타겟팅 문제 (및 프런트 엔드 조작 요구 사항)에 대해 SVG를 인라인해야합니다. 나도 알아, 고통 스럽지만 순간에 나를 더 아프게 할 때 나를 믿어 라 D :

— Oli

나는 닦는 부분이 scour압축되지 않는다고 말했다 . 그것은 수 또한 당신을 위해 gzip을하지만, ID 및 공백 축소를 물건의 주요 공연입니다 통해 파일을 던져.

— Oli

@Oli 맞다. 따라서 단어 "최적화"를 신중하게 선택했다. :) 파일이 이미 엉망이되어 버렸다.

— JohnB

Illustrator에서 약간 엉망이되었습니다. SVG 출력은 Symbols를 존중합니다. 다음은 간단한 예 입니다. 약간의 노력이 필요하지만 텍스트를 개별 문자로 분리하여 심볼로 대체하는 Illustrator 스크립트를 만들 수 있습니다. 내가 보는 가장 큰 장애물은 회전을 다루는 것입니다. 모든 텍스트가 X 축과 평행이면 어렵지 않은 것처럼 보이지만 비스듬히 텍스트를 처리하는 것은 어려울 수 있습니다. 물론 Illustrator를 사용할 수없는 경우에는 그다지 도움이되지 않습니다

— JohnB

3

브라우저 또는 서버 솔루션입니다.

SVG 파일을 최적화하는 방법에는 여러 가지가 있습니다. 이미 상당한 부분을 수행 한 것 같습니다.

내가 매우 유용하다고 생각한 몇 가지 자료 는 매우 구체적인 세부 사항에 중점을 둔 css-tricks 기사 입니다. 특히, SVGO를 사용하는 도구 입니다.

반복되는 경로가 많으면 javascript를 사용하여 모양을 동적으로 만드는 것이 좋습니다. 여기에 예가 있습니다 . 한 가지 방향은 각 글리프에 대해 정의 된 함수를 가지며 해당 함수에 대한 요청에 의해 생성 된 svg 요소 내에 각 경로를 갖는 것입니다. 또는 전체 문자열 및 / 또는 인수 배열을 사용하여 인라인 svg를 만듭니다. 물론 이것은 경로가 해당 기능을 요청하는 데 필요한 코드 길이보다 길 것으로 예상합니다 (매우 쉬운 가정).

— 누가
소스

1

이 답변은 여러 가지 가능한 솔루션을 제시하지만 SVGO가 가장 흥미로운 것 같습니다. .svg 파일에서 실행하여 최적화 할 수도 있습니다. 그러나 현재 경로 중복 제거를 수행하지 않는 것 같습니다. 어 커가 어쨌든 커스텀 스크립팅을하는 경우 SVGO를 향상시키는 것이 좋습니다.

— JPA

@jpa는 경로로 변환하기 전에 (또는 동안) 중복 제거하는 것이 좋습니다. 텍스트 문자 "1"의 모든 인스턴스를 경로가있는 <use xlink:href="#digit_one">위치 digit_one로 바꿉니다.

— Chris H

@ChrisH 나는 왜 나중에도 왜 중복 제거를 할 수 없었는지 알 수 없습니다. 시작점에서 출발 할 모든 경로를 정규화하고 해시를 사용하여 경로가 이미 발생했는지 확인하십시오. 물론 우아하지는 않지만 모든 텍스트 레이아웃 논리를 다시 구현 / 파악하는 것보다 작동하기 쉽고 구현하기가 쉬울 수 있습니다.

— jpa

@jpa 할 수는 있지만 원점을 정규화하면 반올림 오류가 발생하면 해시가 일치하지 않습니다. 내가 생각하고있는 스크립트는 inkscape의 text-to-path를 호출하여 문자 경로를 배치 한 다음이를 일련의 마스터에 대한 참조로 대체합니다.

— Chris H

@jpa와 반올림 오류는 실제입니다. 장난감의 예에서, 0의 첫 번째 2 차 곡선은 소수점 6 자리에서 1만큼 차이가납니다 – 해싱을

— Chris H

2

여기 매우 높은 수준에서 스크립트가 수행해야 할 작업이 있습니다. 원하는 언어와 환경을 자유롭게 사용하십시오. 이것은 원하는 것을 제공하는 논리의 출발점 일뿐입니다.

SVG의 xml에서 모든 텍스트 요소를 반복하고 숫자 텍스트가있는 요소 (주차 지점, svg에 더 많은 텍스트가 있는지 지정하지 않음)에 대해 Inkscape에서 자동으로 만든 ID를 해당 주차가있는 문자열로 변경하십시오. 스팟의 번호. Inkscape는 고유 한 ID 만 필요하며 설명이없는 ID를 생성하지만 다른 소프트웨어에 의해 생성되거나 사용자가 수동으로 생성 또는 변경 한 ID를 존중하고 변경하지 않습니다.
테이블에는 각 주차 지점의 텍스트 요소의 x 및 y 좌표가 저장됩니다.
잉크 스케이프 또는 스크립팅 등 모든 주차 지점 텍스트를 경로로 변환합니다.
숫자 0-9의 경우 SVG 파일 <defs>에 각 숫자의 경로 정보를 정의 하는 적절한 섹션을 추가 하십시오.
<g>주차 지점의 모든 s를 반복 하고<use xlink:href="#digit" x=x y=y />
이익

나는 당신이 처리해야 할 몇 가지 합병증과 그와 함께 행운을 예상 할 수 있습니다.

루프는 주차 자리 열을 2 자리 이상으로 분할해야하며 첫 번째 자리와 후속 자리 사이의 적절한 간격이 까다로울 수 있습니다. 이것은 사용중인 글꼴에 따라 크게 달라집니다.
주차 지점의 방향 또는 곡선 설정의 경우에는 지정하지 않습니다. 2 자리 이상의 숫자에 대한 수동 x, y 오프셋으로 인해 주차 지점의 '방향'을 파악하고 첫 번째 숫자에서 개별 숫자의 다른 경로를 올바르게 배치하는 방법을 추가 논리가 필요할 수 있습니다.

도움이 되었기를 바랍니다. 행운을 빕니다.

— 봇와 이토
소스