SVG 파일에서 SVG 경로를 만드는 도구가 있습니까?

SVG 파일에서 SVG 경로를 만드는 도구가 있습니까?

---

SVG 파일을 가져 와서 HTML 5 SVG 경로로 변환 할 수있는 도구를 아는 사람이 있습니까? 그 d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79"부분 은 알아요 ?

여기로 이동 : Adobe Illustrator를 사용하여 "이동"명령을 사용하여 SVG 경로 만들기

하지만 확실하지 않습니다. 이것은 Illustrator가 모든 선 그리기를 가져와 SVG 경로로 저장할 수 있음을 의미합니까?

참고 : 예, inkscape가 있지만 가능한 경우 그라디언트 및 마스킹 지원을 찾고 있습니다. .ai 파일을 활용하고 일러스트 레이터 나 Acrobat 등을 사용하여 내보내고 싶습니다 ... 거기에 뭔가 있습니까? 아니면 출력 형식으로 Illustrator 또는 Acrobat에 내장되어 있습니까?

---

텍스트 편집기로 SVG를 엽니 다. 운이 좋으면 파일에 다음과 같은 내용이 포함됩니다.

<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637  c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823  c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428  c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002  l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464  c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007  c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246  c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462  S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127  c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035  c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461  C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859  c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054  c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727  C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002  c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223  c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331  C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002  c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267  v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599  l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631  c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>

d속성 입니다 당신이 찾고있는 무엇.

---

Gimp는 프리미티브 (예 : rects, circle 등)가있는 SVG를 HTML5 내에서 사용할 수있는 단일 경로로 변환하는 데 사용할 수 있습니다.

1. 먼저 Gimp 다운로드 : https://www.gimp.org/downloads/
2. .svgIllustrator와 같이 선택한 도구를 사용 하여 SVG를 파일 로 내 보냅니다 . SVG 출력이 지금은 지저분하더라도 걱정하지 마십시오. Gimp가이를 정리합니다.
3. File-> Open을 사용하여 SVG 파일을 Gimp로 가져 오면 다음 (또는 유사한) 대화 상자가 나타납니다.

가져 오기 경로 및 가져온 경로 병합 옵션을 모두 확인하십시오.

4. 그런 다음 Windows-> Dockable Dialogues-> Paths로 이동하십시오.
5. 가져온 경로 라고 표시된 단일 경로를 마우스 오른쪽 버튼으로 클릭 하면 다음 대화 상자가 표시됩니다.

6. 경로 내보내기 ...를 클릭 하고이 텍스트 파일을 선택한 위치에 저장합니다.
7. 선택한 텍스트 편집기 (예 : 메모장, 텍스트 편집기)로이 파일을 찾아서 엽니 다.
8. 내 텍스트를 복사 <path d="copy this text here" />
9. Gimp는 많은 공백이있는 텍스트의 서식을 지정하기 때문에 공백의 일부를 제거하여 HTML에 한 줄로 붙여 넣어 다시 서식을 지정해야 할 수 있습니다.

---

Inkscape를 사용하여 svg를 엽니 다.

Inkscape는 svg 편집기이며 Illustrator와 약간 비슷하지만 svg 용으로 특별히 제작되었으므로 훨씬 더 잘 처리합니다. 무료 소프트웨어이며 @ https://inkscape.org/en/ 에서 사용할 수 있습니다.

• Ctrl A (모두 선택)
• Shift Ctrl C (= 경로 / 개체에서 경로로)
• ctrl s (저장 (일반 svg로 선택))

끝난

all rect/circle have been converted to path

---

(In reply to the "has the situation improved?" part of the question):

Unfortunately, not really. Illustrator's support for SVG has always been a little shaky, and, having mucked around in Illustrator's internals, I doubt we'll see much improvement as far as Illustrator is concerned.

If you're looking for DOM-style access to an Illustrator document, you might want to check out Hanpuku (Disclosure #1: I'm the author. Disclosure #2: It's research code, meaning there are bugs aplenty, and future support is unlikely).

With Hanpuku, you could do something like:

1. Select the path of interest in Illustrator
2. Click the "To D3" button

3. In the script editor, type:

   selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');

4. Click run

5. If the change is as expected, click "To Illustrator" to apply the changes to the document

Granted, this approach doesn't expose the original path string. If you follow the instructions toward the end of the plugin's welcome page, it's possible to edit the Illustrator document with Chrome's developer tools, but there will be lots of ugly engineering exposed everywhere (the SVG DOM that mirrors the Illustrator document is buried inside an iframe deep in the extension—changing the DOM with Chrome's tools and clicking "To Illustrator" should still work, but you will likely encounter lots of problems).

요약 : Illustrator는 여러면에서 SVG와 매우 다른 내부 모델을 사용합니다. 즉, 현재 둘 사이를 반복 할 때 두 가지 모두 동일한 방식으로 지원하는 기능의 하위 집합을 사용하는 것이 유일한 선택임을 의미합니다.

---

놀랍게도 아무도 Illustrator의 다른 이름으로 저장> 형식 드롭 다운> .svg 옵션을 언급하지 않았습니다.

.svg (xml) 파일 내에 경로 (및 나머지 svg 정의)가 포함 된 .svg 파일을 출력합니다.

경로 자체는 <path d>.

참조 URL : https://stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file