Example PreserveAspectRatio - demonstrate available options

 

< svg  width ="480px"  height ="270px"  style ="font-family:Verdana; font-size:8" >  
      < desc > Example PreserveAspectRatio - demonstrate available options </ desc >  
      < text  x ="10"  y ="30" > SVG to fit </ text >  
      < g  transform ="translate(20,40)" >
           < rect  x =".5"  y =".5"  width ="29"  height ="39"  style ="fill:yellow; stroke:red" />  
           < g  transform ="rotate(90)" >  
                < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
           </ g >
      </ g >  
      < text  x ="10"  y ="110" > Viewport 1 </ text >  
      < g  transform ="translate(10,120)" >
           < rect  x =".5"  y =".5"  width ="49"  height ="29"  style ="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"  style ="fill:none; stroke:blue" />
      </ g >  
      < text  x ="100"  y ="30" > --------------- meet --------------- </ text >  
      < g  transform ="translate(100,60)" >
           < text  y ="-10" > xMin* </ text >
           < rect  x =".5"  y =".5"  width ="49"  height ="29"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(170,60)" >
           < text  y ="-10" > xMid* </ text >
           < rect  x =".5"  y =".5"  width ="49"  height ="29"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(240,60)" >
           < text  y ="-10" > xMax* </ text >
           < rect  x =".5"  y =".5"  width ="49"  height ="29"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < text  x ="330"  y ="30" > ---------- meet ---------- </ text >  
      < g  transform ="translate(330,60)" >
           < text  y ="-10" > *YMin </ text >
           < rect  x =".5"  y =".5"  width ="29"  height ="59"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(380,60)" >
           < text  y ="-10" > *YMid </ text >
           < rect  x =".5"  y =".5"  width ="29"  height ="59"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(430,60)" >
           < text  y ="-10" > *YMax </ text >
           < rect  x =".5"  y =".5"  width ="29"  height ="59"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < text  x ="100"  y ="160" > ---------- slice ---------- </ text >  
      < g  transform ="translate(100,190)" >
           < text  y ="-10" > xMin* </ text >
           < rect  x =".5"  y =".5"  width ="29"  height ="59"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(150,190)" >
           < text  y ="-10" > xMid* </ text >
           < rect  x =".5"  y =".5"  width ="29"  height ="59"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(200,190)" >
           < text  y ="-10" > xMax* </ text >
           < rect  x =".5"  y =".5"  width ="29"  height ="59"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < text  x ="270"  y ="160" > --------------- slice --------------- </ text >  
      < g  transform ="translate(270,190)" >
           < text  y ="-10" > *YMin </ text >
           < rect  x =".5"  y =".5"  width ="49"  height ="29"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(340,190)" >
           < text  y ="-10" > *YMid </ text >
           < rect  x =".5"  y =".5"  width ="49"  height ="29"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
      < g  transform ="translate(410,190)" >
           < text  y ="-10" > *YMax </ text >
           < rect  x =".5"  y =".5"  width ="49"  height ="29"  style ="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"  style ="fill:yellow; stroke:red" />  
                < g  transform ="rotate(90)" >  
                     < text  x ="10"  y ="10"  style ="font-family:Verdana; font-weight:bold; font-size:14" > :) </ text >  
                </ g >
           </ svg >
      </ g >  
</ svg >