Example


<svg width="450px" height="300px" version="1.1">
     <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc>
     <rect x="1" y="1" width="448" height="298" fill="none" stroke="blue"/>
     <g font-size="9">
          <text x="10" y="30">SVG to fit</text>
          <g transform="translate(20,40)">
               <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
               <g transform="translate(0, 5)">
                    <circle cx="15" cy="15" r="10" fill="yellow"/>
                    <circle cx="12" cy="12" r="1.5" fill="black"/>
                    <circle cx="17" cy="12" r="1.5" fill="black"/>
                    <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
               </g>
          </g>
          <text x="10" y="110">Viewport 1</text>
          <g transform="translate(10,120)">
               <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/>
          </g>
          <text x="10" y="180">Viewport 2</text>
          <g transform="translate(20,190)">
               <rect x=".5" y=".5" width="29" height="59" fill="none" stroke="blue"/>
          </g>
          <g id="meet-group-1" transform="translate(100, 60)">
               <text x="0" y="-30">--------------- meet ---------------</text>
               <g>
                    <text y="-10">xMin*</text>
                    <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="50" height="30">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(70,0)">
                    <text y="-10">xMid*</text>
                    <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="50" height="30">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(0,70)">
                    <text y="-10">xMax*</text>
                    <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="50" height="30">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
          </g>
          <g id="meet-group-2" transform="translate(250, 60)">
               <text x="0" y="-30">---------- meet ----------</text>
               <g>
                    <text y="-10">*YMin</text>
                    <rect x=".5" y=".5" width="29" height="59" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="30" height="60">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(50, 0)">
                    <text y="-10">*YMid</text>
                    <rect x=".5" y=".5" width="29" height="59" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="30" height="60">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(100, 0)">
                    <text y="-10">*YMax</text>
                    <rect x=".5" y=".5" width="29" height="59" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="30" height="60">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
          </g>
          <g id="slice-group-1" transform="translate(100, 220)">
               <text x="0" y="-30">---------- slice ----------</text>
               <g>
                    <text y="-10">xMin*</text>
                    <rect x=".5" y=".5" width="29" height="59" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(50,0)">
                    <text y="-10">xMid*</text>
                    <rect x=".5" y=".5" width="29" height="59" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(100,0)">
                    <text y="-10">xMax*</text>
                    <rect x=".5" y=".5" width="29" height="59" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
          </g>
          <g id="slice-group-2" transform="translate(250, 220)">
               <text x="0" y="-30">--------------- slice ---------------</text>
               <g>
                    <text y="-10">*YMin</text>
                    <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="50" height="30">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(70,0)">
                    <text y="-10">*YMid</text>
                    <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="50" height="30">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
               <g transform="translate(140,0)">
                    <text y="-10">*YMax</text>
                    <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/>
                    <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">
                         <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/>
                         <g transform="translate(0, 5)">
                              <circle cx="15" cy="15" r="10" fill="yellow"/>
                              <circle cx="12" cy="12" r="1.5" fill="black"/>
                              <circle cx="17" cy="12" r="1.5" fill="black"/>
                              <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/>
                         </g>
                    </svg>
               </g>
          </g>
     </g>
</svg>
Original SVG source