Scaling an svg element

Question

TL;DR

I have an SVG element below. It's width and height are 439 and 125 respectively. How can I scale that image down to 263 by 75, which should be the same aspect ratio?

Here's a fiddle

I have an SVG image which is nothing more than me writing ADAM in big letters (in real life it's someone's signature).

enter image description here

I'm trying to scale it down to be smaller, but without distorting. From what I've read I thought I would need to choose the height I want, calculate an appropriate width based on the aspect ratio, and then set my viewBox accordingly.

So now width is 439 and height is 125, for an aspect ratio of 3.512. So if I want a new height of 75, I would assume new width = 3.512 * 75 = 263, which seems reasonable. So I set viewBox="0 0 263 75"

and now have

enter image description here

Clearly it's just taking those dimensions from the original image and stretching them to fit in my original viewport of 439 x 125. Adding in preserveAspectRatio="xMinYMin slice|meet|none" has no effect, and skipping all of this and just modifying the original height and width mercilessly truncates my whole image.

What is the proper way to scale this SVG object down?

Update 1

I tried using both the viewBox, and a height and width, as such

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="263" height="75" id="XX" viewBox="0 0 263 75" preserveAspectRatio="xMinYMin none">

which does resize the entire SVG, but it's still simply truncating my original image (as in the second screenshot), rather than scaling it down.

Fiddle

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="439" height="125" id="__svg__random___1">
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 60 2 c -0.05 0.05 -2.31 1.9 -3 3 c -0.87 1.39 -1.25 3.32 -2 5 c -0.62 1.39 -1.25 2.69 -2 4 c -0.6 1.05 -1.3 1.95 -2 3 c -0.7 1.05 -1.56 1.97 -2 3 c -0.51 1.18 -0.41 2.96 -1 4 c -0.61 1.07 -2.18 1.9 -3 3 c -1.13 1.51 -2.05 3.25 -3 5 c -1.1 2.01 -2.14 3.93 -3 6 c -0.81 1.95 -1.19 4.05 -2 6 c -0.86 2.07 -1.9 3.99 -3 6 c -0.95 1.75 -2.05 3.25 -3 5 c -1.1 2.01 -1.95 3.9 -3 6 c -1.05 2.1 -1.95 3.9 -3 6 c -1.05 2.1 -1.95 3.9 -3 6 c -1.05 2.1 -2.14 3.93 -3 6 c -0.81 1.95 -1.18 4.15 -2 6 c -0.47 1.06 -1.47 1.94 -2 3 c -1.12 2.25 -1.98 4.56 -3 7 c -0.72 1.73 -1.21 3.43 -2 5 c -0.53 1.05 -1.47 1.95 -2 3 c -0.79 1.57 -1.43 3.29 -2 5 c -0.44 1.31 -0.49 2.82 -1 4 c -0.44 1.03 -1.56 1.97 -2 3 c -0.51 1.18 -0.65 2.6 -1 4 c -0.35 1.4 -1 4 -1 4"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 59 3 c 0.07 0.05 2.63 1.94 4 3 c 1.75 1.36 3.79 2.49 5 4 c 1.26 1.58 1.82 4.43 3 6 c 0.63 0.84 2.33 1.19 3 2 c 0.84 1 1.25 2.69 2 4 c 0.6 1.05 1.26 2.02 2 3 c 1.31 1.74 2.69 3.26 4 5 c 0.74 0.98 1.34 1.95 2 3 c 1.07 1.7 1.98 3.25 3 5 c 1.41 2.42 2.59 4.58 4 7 c 1.02 1.75 2.03 3.26 3 5 c 0.74 1.33 1.26 2.67 2 4 c 0.97 1.74 1.87 3.49 3 5 c 0.82 1.1 2.18 1.9 3 3 c 1.13 1.51 1.98 3.25 3 5 c 1.41 2.42 2.55 4.71 4 7 c 0.9 1.42 2.39 2.63 3 4 c 0.62 1.4 0.48 3.45 1 5 c 0.45 1.36 1.3 2.6 2 4 c 0.7 1.4 1.38 2.61 2 4 c 0.75 1.68 1.49 3.3 2 5 c 0.48 1.61 0.48 3.45 1 5 c 0.45 1.36 1.49 2.64 2 4 c 0.47 1.26 0.56 2.69 1 4 c 0.57 1.71 1.43 3.29 2 5 c 0.44 1.31 0.56 2.69 1 4 c 0.57 1.71 2 5 2 5"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 95 51 c -0.05 -0.05 -1.92 -2.46 -3 -3 c -1.3 -0.65 -3.27 -0.71 -5 -1 c -2.4 -0.4 -4.65 -0.8 -7 -1 c -1.67 -0.14 -3.25 0 -5 0 c -1.75 0 -3.4 0.18 -5 0 c -1.32 -0.15 -2.67 -0.9 -4 -1 c -2.9 -0.22 -5.85 0 -9 0 c -2.45 0 -4.67 -0.17 -7 0 c -2.36 0.17 -4.64 0.57 -7 1 c -1.37 0.25 -2.62 0.72 -4 1 c -2.03 0.41 -3.9 0.65 -6 1 c -2.1 0.35 -3.97 0.59 -6 1 c -1.38 0.28 -3.08 0.39 -4 1 c -0.8 0.54 -2 3 -2 3"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 148 3 c 0 0.11 -0.17 4.02 0 6 c 0.17 2.01 0.85 3.99 1 6 c 0.18 2.31 0 4.55 0 7 c 0 2.8 0 5.2 0 8 c 0 2.45 0 4.55 0 7 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.1 0.18 4.04 0 6 c -0.15 1.67 -0.68 3.26 -1 5 c -0.38 2.07 -0.65 3.9 -1 6 c -0.35 2.1 -0.82 3.99 -1 6 c -0.15 1.65 0 3.25 0 5 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.45 0 4.55 0 7 c 0 2.45 0.19 4.71 0 7 c -0.14 1.67 -1 5 -1 5"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 148 2 c 0.07 -0.02 2.68 -0.87 4 -1 c 1.93 -0.19 3.9 0 6 0 c 1.75 0 3.4 -0.18 5 0 c 1.32 0.15 2.68 0.87 4 1 c 1.93 0.19 4.18 -0.33 6 0 c 1.63 0.3 3.3 1.49 5 2 c 1.61 0.48 3.45 0.48 5 1 c 1.36 0.45 2.64 1.59 4 2 c 1.85 0.55 4.15 0.45 6 1 c 1.36 0.41 2.86 1.18 4 2 c 1.08 0.77 1.93 2.11 3 3 c 0.91 0.76 2.09 1.24 3 2 c 1.07 0.89 1.92 2.06 3 3 c 1.63 1.42 3.38 2.56 5 4 c 1.43 1.27 2.88 2.56 4 4 c 1.16 1.49 1.86 3.67 3 5 c 0.71 0.82 2.33 1.19 3 2 c 0.84 1 1.38 2.61 2 4 c 0.75 1.68 1.25 3.32 2 5 c 0.62 1.39 1.38 2.61 2 4 c 0.75 1.68 1.43 3.29 2 5 c 0.44 1.31 0.87 2.68 1 4 c 0.19 1.93 0 3.9 0 6 c 0 1.75 0.18 3.4 0 5 c -0.15 1.32 -0.49 2.82 -1 4 c -0.44 1.03 -1.24 2.09 -2 3 c -0.89 1.07 -1.92 2.23 -3 3 c -1.14 0.82 -2.86 1.18 -4 2 c -1.08 0.77 -1.92 2.08 -3 3 c -1.27 1.09 -2.6 2 -4 3 c -1.01 0.72 -1.95 1.3 -3 2 c -1.05 0.7 -1.99 1.28 -3 2 c -1.4 1 -2.73 1.91 -4 3 c -1.08 0.92 -2.11 1.93 -3 3 c -0.76 0.91 -1.22 2.22 -2 3 c -0.78 0.78 -2.09 1.24 -3 2 c -1.07 0.89 -1.95 1.95 -3 3 c -1.05 1.05 -1.95 1.95 -3 3 c -1.05 1.05 -1.95 1.95 -3 3 c -1.4 1.4 -2.6 2.6 -4 4 c -1.05 1.05 -1.92 2.06 -3 3 c -1.63 1.42 -3.54 2.54 -5 4 c -1.14 1.14 -1.87 3.03 -3 4 c -1.01 0.87 -4 2 -4 2"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 266 5 c -0.02 0.11 -0.59 3.97 -1 6 c -0.28 1.38 -0.69 2.61 -1 4 c -0.38 1.72 -0.65 3.25 -1 5 c -0.35 1.75 -0.68 3.26 -1 5 c -0.38 2.07 -0.54 4 -1 6 c -0.55 2.39 -1.4 4.59 -2 7 c -0.42 1.69 -0.68 3.26 -1 5 c -0.38 2.07 -0.65 3.9 -1 6 c -0.35 2.1 -0.45 4.15 -1 6 c -0.41 1.36 -1.38 2.61 -2 4 c -0.75 1.68 -1.43 3.29 -2 5 c -0.44 1.31 -0.5 2.75 -1 4 c -0.81 2.03 -2.33 3.98 -3 6 c -0.61 1.83 -0.45 4.15 -1 6 c -0.41 1.36 -1.71 2.7 -2 4 c -0.32 1.46 0.28 3.45 0 5 c -0.36 1.95 -1.36 3.91 -2 6 c -0.74 2.4 -1.52 4.62 -2 7 c -0.53 2.63 -0.42 5.47 -1 8 c -0.39 1.69 -1.25 3.32 -2 5 c -0.62 1.39 -1.25 2.69 -2 4 c -0.6 1.05 -2 3 -2 3"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 267 1 c 0.05 0.05 2.23 1.92 3 3 c 0.82 1.14 1.22 2.75 2 4 c 0.87 1.4 2.22 2.6 3 4 c 0.84 1.51 1.2 3.4 2 5 c 0.87 1.73 1.91 3.36 3 5 c 0.94 1.41 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 1.95 2.6 3 4 c 1.05 1.4 2.13 2.6 3 4 c 0.78 1.25 1.18 2.86 2 4 c 0.77 1.08 2.26 1.89 3 3 c 1.17 1.75 1.86 4.1 3 6 c 0.85 1.41 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 1.91 2.73 3 4 c 0.92 1.08 2.08 1.92 3 3 c 1.09 1.27 2.13 2.6 3 4 c 0.78 1.25 1.25 2.69 2 4 c 0.6 1.05 1.47 1.94 2 3 c 1.12 2.25 1.88 4.75 3 7 c 0.53 1.06 1.4 1.95 2 3 c 0.75 1.31 1.38 2.61 2 4 c 0.75 1.68 1.25 3.32 2 5 c 0.62 1.39 1.49 2.64 2 4 c 0.47 1.26 0.65 2.6 1 4 c 0.35 1.4 0.56 2.69 1 4 c 0.57 1.71 2 5 2 5"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 312 45 c -0.09 0 -3.25 0 -5 0 c -2.1 0 -4 -0.15 -6 0 c -2.36 0.18 -4.6 0.6 -7 1 c -1.73 0.29 -3.28 0.62 -5 1 c -1.39 0.31 -2.61 0.69 -4 1 c -1.72 0.38 -3.39 0.52 -5 1 c -1.7 0.51 -3.32 1.25 -5 2 c -1.39 0.62 -2.6 1.3 -4 2 c -1.4 0.7 -2.6 1.3 -4 2 c -1.4 0.7 -2.6 1.3 -4 2 c -1.4 0.7 -2.64 1.49 -4 2 c -1.26 0.47 -2.6 0.65 -4 1 c -1.4 0.35 -2.74 0.53 -4 1 c -1.36 0.51 -4 2 -4 2"></path>
    <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 353 125 c 0 -0.09 -0.34 -3.62 0 -5 c 0.25 -1 1.75 -2 2 -3 c 0.34 -1.38 0 -3.25 0 -5 c 0 -1.75 -0.13 -3.32 0 -5 c 0.21 -2.7 0.79 -5.3 1 -8 c 0.13 -1.68 0 -3.25 0 -5 c 0 -2.1 0 -3.9 0 -6 c 0 -1.75 0 -3.25 0 -5 c 0 -2.1 0 -3.9 0 -6 c 0 -1.75 -0.12 -3.32 0 -5 c 0.22 -3.05 0.39 -6.17 1 -9 c 0.36 -1.68 1.58 -3.31 2 -5 c 0.55 -2.22 0.42 -4.86 1 -7 c 0.37 -1.36 1.49 -2.64 2 -4 c 0.47 -1.26 0.56 -2.69 1 -4 c 0.57 -1.71 1.43 -3.29 2 -5 c 0.44 -1.31 0.56 -2.69 1 -4 c 0.57 -1.71 1.43 -3.29 2 -5 c 0.44 -1.31 0.65 -2.6 1 -4 c 0.35 -1.4 0.85 -2.68 1 -4 c 0.18 -1.6 0 -3.25 0 -5 c 0 -1.75 0 -3.25 0 -5 c 0 -2.1 0 -5.89 0 -6 c 0 -0.09 -0.14 3.33 0 5 c 0.2 2.35 0.6 4.6 1 7 c 0.29 1.73 0.62 3.28 1 5 c 0.31 1.39 0.72 2.62 1 4 c 0.41 2.03 0.48 4.09 1 6 c 0.46 1.69 1.68 3.38 2 5 c 0.3 1.51 -0.18 3.4 0 5 c 0.15 1.32 0.49 2.82 1 4 c 0.44 1.03 1.61 1.97 2 3 c 0.55 1.46 0.48 3.45 1 5 c 0.45 1.36 1.49 2.64 2 4 c 0.47 1.26 0.69 2.61 1 4 c 0.38 1.72 0.52 3.39 1 5 c 0.51 1.7 1.43 3.29 2 5 c 0.44 1.31 0.53 2.74 1 4 c 0.51 1.36 1.65 4 2 4 c 0.33 0 0.88 -2.67 1 -4 c 0.2 -2.25 0 -4.55 0 -7 c 0 -2.8 0 -5.2 0 -8 c 0 -2.8 0 -5.2 0 -8 c 0 -2.1 0 -3.9 0 -6 c 0 -2.1 0 -3.9 0 -6 c 0 -1.75 -0.15 -3.35 0 -5 c 0.18 -2.01 0.65 -3.9 1 -6 c 0.35 -2.1 0.45 -4.15 1 -6 c 0.41 -1.36 1.55 -2.64 2 -4 c 0.52 -1.55 0.45 -3.54 1 -5 c 0.39 -1.03 1.3 -1.95 2 -3 c 0.7 -1.05 1.56 -1.97 2 -3 c 0.51 -1.18 0.44 -2.87 1 -4 c 0.68 -1.37 2.06 -3.73 3 -4 c 0.84 -0.24 3.09 1.09 4 2 c 1.18 1.18 2.03 3.26 3 5 c 0.74 1.33 1.3 2.6 2 4 c 0.7 1.4 1.59 2.64 2 4 c 0.55 1.85 0.62 3.93 1 6 c 0.32 1.74 0.55 3.35 1 5 c 0.56 2.05 1.41 3.92 2 6 c 0.77 2.71 1.26 5.24 2 8 c 0.65 2.44 1.56 4.63 2 7 c 0.55 2.95 0.59 5.91 1 9 c 0.28 2.07 0.72 3.93 1 6 c 0.41 3.09 0.47 6.01 1 9 c 0.48 2.72 1.17 5.34 2 8 c 0.86 2.75 2.07 5.22 3 8 c 1.13 3.39 1.97 6.51 3 10 c 0.72 2.43 1.3 4.55 2 7 c 0.7 2.45 1.3 4.55 2 7 c 0.7 2.45 2 7 2 7"></path>
</svg>

it's probably my question you've read, you should be using a transformation command on them, more specifically a scale transformation — nicholaswmin

rfornal rfornal · Accepted Answer · 2014-12-03T20:36:42

To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width and height attributes to define what the width or height are with respect to the containing page.

Set the viewBox values to what you are using for height and width now, then adjust height and width, as you like.

EDIT:

Modified the jsFiddle ... works!

The issue you had was not setting the viewBox to the ORIGINAL size ... then, modify height / width.

Scaling an svg element

1 Answers