3

I'm trying to figure out how to take a complex SVG file and easily resize it to anything id like. Say I want a 100x100 SVG image to be 5x30 I'd like it to resize to that with out any cropping.

I want to do this using only the SVG document or by embedding it into another SVG file. I'm having a lot of trouble achieving this.

For Example:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" version="1.0">
  <image x="0" y="0" width="516.3034" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" xlink:type="simple" xlink:actuate="onLoad" height="777.2853" preserveAspectRatio="xMidYMid meet" xlink:show="embed" />
</svg>

This is only cropping the image when what I wish to accomplish is the embedded image gets shrunk to fit inside the viewbox.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
merjr
  • 149
  • 1
  • 13

1 Answers1

5

Use percentage for the image element:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet">
</svg>

Or use the viewBox coordinate system:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100" height="100" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet" />
</svg>

These two ways may differ slightly if the viewBox aspect ratio doesn't match the viewport since percentages are based on the viewport size. If you don't care about the image aspect ratio you can stretch the image to fit the given size by using preserveAspectRatio="none".

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139