IT story

SVG 파일에서 변환 제거

hot-time 2020. 6. 24. 07:27
반응형

SVG 파일에서 변환 제거


나는 이것을 잠시 동안 고투 해 왔으며 어디서나 답을 찾을 수없는 것 같습니다. 다음과 같은 SVG 파일이 있습니다.

<svg

   xmlns:dc="http://purl.org/dc/elements/1.1/"
   ...
   width="72.9375"
   height="58.21875"
   ...>
   ...
   <g
     ...
     transform="translate(10.75,-308.96875)"
     style="...">
     <path
       inkscape:connector-curvature="0"
       d="m -10.254587,345.43597 c 0,-1.41732 0.17692,-2.85384 0.5312502,-3.5625 0.70866,-1.41733 2.14518,-2.82259 3.5625,-3.53125 1.41733,-0.70866 2.11392,-0.70867 3.53125,0 1.41732,0.70866 ... z"
       ... />
  </g>
</svg>

transform="..."을 제거하고 싶지만 이미지를 배치 한 위치 (잉크 스케이프)에 그대로 유지합니다. 변환을 수동으로 제거하면 이미지가 예상대로 화면의 다른 부분으로 압축되지만 변환을 완전히 제거하고 동시에 원하는 위치에 이미지를 유지해야합니다. 경로 좌표 자체로 변환을 제거 / 평평하게하는 방법이 있습니까? (내가 처리 해야하는 유일한 변환은 매트릭스가 아닌 변환 및 스케일입니다.)


Inkscape에서 변형 을 제거하는 방법

  1. Inkscape에서 svg 파일 열기
  2. 편집-> XML 편집기로 이동하십시오.
  3. 레이어에서 "변환"속성을 찾아 삭제

다른 변형 속성을 만들지 않고 모든 객체를 옮기는 방법

  1. 편집-> 모든 레이어에서 모두 선택으로 이동하십시오.
  2. 객체-> 변형으로 이동

    변형 패널에서

  3. 선택을 취소 상대 이동 체크는 별도로 각 개체에 적용

  4. 필요에 따라 가로세로 값을 설정 하고 적용을 클릭 하십시오.

문제가 무엇인지 알아 냈습니다. 로버트의 대답에 의지하지 않기를 바랐지만 그것이 효과가 있다는 확인에 기쁘다! 결국 Duopixel의 대답은 실제로 가장 가깝지만 다른 일도 진행되고 있음이 밝혀졌습니다.

Inkscape 문서에서 다른 경로로 작업 할 때 기본 동작은 <svg:g.../>태그로 묶는 것 입니다. 그룹의 경로를 수정할 때 Inkscape는 자동으로 그룹에 변환을 추가하여 이러한 변경 사항을 나타냅니다. 그러나 XML 편집기를 열고 경로 밖으로 <svg:g.../>태그 밖으로 드래그하여 고유 한 <svg:path.../>태그로 만들면 Inkscape는 자유롭게 개별 포인트를 편집 할 수 있습니다. 결국 한 가지 경로로만 작업했지만 그룹화 문제로 판명되었습니다! 이것이 유사한 상황에서 다른 사람들을 돕기를 바랍니다.


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

  1. Method Draw에 SVG로드 http://editor.method.ac (파일> 이미지 열기)
  2. 요소 그룹 해제 (개체> 그룹 해제 요소)이 작업을 두 번 이상 수행해야 할 수도 있습니다.
  3. 경로를 선택하십시오
  4. 경로의 방향을 바꿉니다 (오브젝트> 방향 조정 경로).
  5. 이미지 저장 (파일> 이미지 저장) 새 창에 나타나면 마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 이미지 저장 ..."을 클릭하십시오.

변환으로 경로를 다시 계산하는 Apply Transforms 라는 잉크 스케이프 확장이 있습니다 . 이것이 바로 내가 찾던 것입니다.

설치 후 확장> 경로 수정> 변형 적용 에서 메뉴를 찾을 수 있습니다 .


크레딧 : Inkscape 포럼> 제자리에 유지하면서 모든 변형 제거


그룹의 경우 다시 그룹화하면 작업을 빠르게 수행 할 수 있습니다. 그룹을 선택하고 Ctrl + Shift + G (그룹 해제)를 누른 다음 Ctrl + G (그룹)를 누르십시오.

예를 들어 비슷한 문제, 나선 및 별이있는 일부 객체의 경우 빠른 방법은 Ctrl + Alt + C (행정 경로)를 누르는 것입니다. 그러나 이것은 객체를 순수한 경로로 변환하고 모든 추가 속성을 제거합니다. sodipodi : cx, sodipodi : revolutions 등이 있습니다.


Inkscape에서 svg를 엽니 다 .

  • 제거하려는 모든 변환이 포함 된 그룹선택하십시오.
  • CTRL+ U(그룹 해제)를 누릅니다.
  • CTRL+ G(다시 그룹화)를 누릅니다.

이렇게하면 그룹에 적용된 변환을 제거하고이 그룹에 포함 된 경로로 전송됩니다.


In my experience, if you're using Inkscape, it suffices to move the path element slightly (e.g. with cursor keys), and Inkscape will delete the transform attribute and adjust the path data accordingly. (Annoying if you actually want to keep the transform attribute.)

So, you could simply select the path (make sure it's the path and not the surrounding group), hit the right and the left cursor key, and you're done.


Whilst I prefer Inkscape, Affinity Designer (~$40 / Mac) saved me hours of effort when working with Android Vector Drawables.

Open an SVG, File -> Export -> SVG -> More -> Flatten transforms worked great.

선호도 디자이너


SVGO is an excellent open-source command line tool for this and a bunch of other optimisations. There's an equally excellent online web UI for it called SVGOMG

The relevant options in this case are moveGroupAttrsToElems (SVGOMG: Move group attrs to elements) to move transform attributes from groups to path elements, plus convertPathData (SVGOMG: Round/rewrite paths) to flatten transform into d.


It should be mentioned that there is the "Optimized" mode in preferences:

Inkscape Preferences > Transforms > Store transformation > Optimized

Which is supposed to minimise the occurrence of transform attributes as much as possible, (but doesn't).

This seems to be on by default anyway.

According to a discussion, one instance where this Optimized mode lacks zeal is when the page is resized. This causes a translate transform to be applied to the layer <g> element. It seems that evacuating the children to another layer is the best solution at the moment.


Inkscape has the option to clear the transformation data but still leave the value of the object unmodified.

In Inkscape, select the object and 'Path' menu, 'Simplify'. Now, you will have the transformations removed.


In this case just add the translate to the m values for each child so -10.254587 + 10.75 = -0.504587 and -308.96875 + 345.43597 = 36.46722.

Since all the terms in the example are relative (i.e. lower case) that's all. If any were absolute (upper case) e.g. M or C they would have to be adjusted too.

For scale you'd basically multiply all the child values by the scale.


To remove the transform attribute from a g element (group) in Inkscape, you can to move the group to its final place, ungroup it and then regroup all elements. Now a new group has been created, and if you don't move it again, it will not get a transform attribute attached to it.


If anyone lands here looking for a solution to do this in Sketch 3, select the layer and then click on Layer->Paths->Flatten.


  1. Select the elements in question
  2. Object > Ungroup (repeat until everything is ungrouped; see XML editor for nested nodes)
  3. Path > Object to Path (converts polygons to paths)
  4. Object > Transform > Uncheck relative move > Apply

Found it:

  • Set your desired page size*
  • If your current layer has a transform (check with the XML editor, it's the top group under the SVG element) then create a new layer and move all objects to it
  • Ungroup any groups (this may not be needed, YMMV)
  • Select all objects and apply a null transform (such as scale by 100% 100%, or arrow right + arrow left) while having Store transformation: Optimized in Preferences / Transforms
  • If you had to undo any groups, you can now regroup them
  • Save a copy as Optimized SVG and set your desired numeric precision

*: Or at least place the objects where you need them, relative to the top left corner of the page. It's unfortunate that SVG coordinates reference the top left corner, while Inkscape resizes the page relative to the bottom left!


I was able to get rid of a matrix(...) transform (due to mirroring) by combining the path with a rectangle and then removing the nodes of the rectangle. The translate(...) part stayed though.


I tried the solution posted here, namely to remove the group tags in the SVG-file and reopen it in Inkscape (0.48.3.1 in my case). Alas, after I translated the paths again using the select and transform mode (F1) and saved it, the group tags reappeared! Inkscape saves all transformations applied to the path in a surrounding group element. Unless you use the path-node selection tool (F2), hit ctrl+a and move the nodes of the path to their right place. After I had done this instead and saved afterwards Inkscape didn't add the group tags, because this translation applied directly to the path model. Hope this helps.


In my case the groups are actually caused by layers. Deleting all layers in the document removed the group and transform (possibly combined with ungrouping objects and regrouping them etc as in Removing transforms in SVG files (answer-35490189 from @Charlie above))


In my case saving as optimized SVG solved the problem. So in Inkscape use:

File -> Save as... -> Optimized SVG.


My specific problem was with symbols that were defined outside the page, thus requiring a transformation to be shown on the page.

To move the symbols to the page without requiring a transformation, I had to go through these steps in Inkscape:

  1. Open the Symbols window (Shift+Ctrl+Y)
  2. Remove the symbol from the document library. (There's a button for that in the window.)
  3. Now the graphic shows up in the document, outside the page boundary.
  4. Ungroup the graphic. (This is a vital step!)
  5. Move the graphic inside the page boundary.
  6. Add the graphic back to the symbol library.

This seems random, but nothing else I tried worked, so here you go random other person. Some of my paths had a sort of margin around them that could only be seen when selecting them (예). I think this was created when I pasted a layer from another inkscape file and rotated it 90 deg. This made a pattern fill on the shapes have a different transform (lines spaced further apart). It also made align objects not work as expected. Using the Apply Transform mentioned by @Piotr_cz fixed the transform problem, but the strange margin remained. I accidentally got rid of it by changing the Blur on Stroke to any value and changing it back to zero.


Somehow I had no luck with any of the approaches. If there is <defs> section in your svg and usages like this:

<g transform="matrix( *** ) "><use xlink:href="#***"/></g>

you may have to delete all usages and take everything out from defs section. Then, you can use inkscape to place it all in the correct way and then apply transforms using the mentioned plugin. Hope it helps someone.


Ive been having this issue for years. The solution is clearly to be able to dynamically play with transforms in the browser, if its not going to be "fixed" in inkscape.

A user Mc at Inkscape forums gave me this solution.

The solution builds the current transform between an SVG element and its SVG root element, and then returns a full set of BBox information based on the total of the transforms.

동일한 SVG 파일의 두 부분 사이에서 브라우저 작업을 수행하려는 경우 계산과 관련된 요소를 쉽게 변경할 수 있습니다.

마지막으로 패닝 SVG 뷰포트를 실제로 가질 수 있습니다.

참고 URL : https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files

반응형