5

I have a question similar to this one. That is, I have an SVG file created by Inkscape, and there is additional transforms on the paths I want to get rid off.

Now instead of having a transform matrix, there is a different type of transform. For example, the header goes like this:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="32"
   height="32"
   viewBox="0 0 16.146082 22.465583"
   id="svg2"
   xml:space="preserve"
   ...
</svg>

Apparently this mess is interpreted as some sort of translation and scaling. If I remove the viewBox attribute, the paths shrink and appear a bit to the left. So if I just copy the path definitions, my image is not 32 x 32 but smaller.

How can I flatten the transform somehow introduced by viewBox so it is integrated into the explicit path coordinates?

Community
  • 1
  • 1
0__
  • 66,707
  • 21
  • 171
  • 266

2 Answers2

5

First you should probably read the section in the SVG spec on how viewBox and the viewport transform works.

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

It's not clear whether you want to actually multiply the viewport transform through to all your content coordinates, or just achieve the equivalent result. I am going to assume the latter.

In your case, the viewBox is (roughly) 16x22. This is taller than it is wide, so the height will get scaled up from 22->32 and the width by the same ratio 16->23 or so.

The default preserveAspectRatio is xMidYMid, which means centre horizontally and vertically. As this object is now scaled to full height (32), it doesn't get centred vertically so it will just get centred horizontally.

To remove the viewBox and get the equivalent transform, you can just surround the contents of the SVG with a group element (<g>). Then give that the equivalent transform.

So for an equivalent transform, we have to combine a scale and a translate.

The scale part is just: 32 / 22.465583 = 1.42440

That makes the new height now 32.

The new width will be: 1.42440 * 16.146082 = 22.99850.

We need to centre that hosizontally, so there is a shift of (32 - 22.99850) / 2 = 4.50075

So the group element needs be:

<g tramsform="translate(4.50075,0) scale(1.42440)">
   ...rest of svg...
</g>

To simulate your file we'll use this equivalent. The red rectangle represents the contents of your current file.

<svg width="32" height="32" viewBox="0 0 16.146082 22.465583">
    <rect width="16.146082" height="22.465583" fill="red"/>
</svg>

Demo here. I've added a border to the SVG to show the 32x32 width and height of the SVG.

So now lets remove the viewBox and apply our new group and transform:

<svg width="32" height="32">
    <g transform="translate(4.50075,0) scale(1.42440)">
        <rect width="16.146082" height="22.465583" fill="red"/>
    </g>
</svg>

Demo here

I hope this helps.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
0

I created a second empty document, and used copy and then paste-in-place. The viewBox is not part of the new document, but you have transformation which you must get rid of using the method described in the linked question (remove the g group node, then re-position using absolute coordinates.).

0__
  • 66,707
  • 21
  • 171
  • 266