---
title: preserveAspectRatio
slug: Web/SVG/Attribute/preserveAspectRatio
translation_of: Web/SVG/Attribute/preserveAspectRatio
---
<div>{{SVGRef}}</div>

<p>O atributo <code><strong>preserveAspectRatio</strong></code> indica como um elemento com uma viewBox, fornecendo uma determinada proporção deve se ajustar a uma viewport com uma proporção diferente.</p>

<p>Because the aspect ratio of an SVG image is defined by the {{SVGAttr('viewBox')}} attribute, if this attribute isn't set, the <code>preserveAspectRatio</code> attribute has no effect (<em>with one exception, the {{SVGElement('image')}} element, as described below</em>).</p>

<h2 id="Example">Example</h2>

<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;defs&gt;
     &lt;path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /&gt;
  &lt;/defs&gt;

  &lt;!-- (width&gt;height) meet --&gt;
  &lt;svg preserveAspectRatio="xMidYMid meet"  x="0"   y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMinYMid meet"  x="25"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMaxYMid meet"  x="50"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;

  &lt;!-- (width&gt;height) slice --&gt;
  &lt;svg preserveAspectRatio="xMidYMin slice" x="0"   y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMidYMid slice" x="25"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMidYMax slice" x="50"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;

  &lt;!-- (width&lt;height) meet --&gt;
  &lt;svg preserveAspectRatio="xMidYMin meet"  x="75"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMidYMid meet"  x="90"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMidYMax meet"  x="105" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;

  &lt;!-- (width&lt;height) slice --&gt;
  &lt;svg preserveAspectRatio="xMinYMid slice" x="120" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMidYMid slice" x="135" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
  &lt;svg preserveAspectRatio="xMaxYMid slice" x="150" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;

  &lt;!-- none --&gt;
  &lt;svg preserveAspectRatio="none"           x="0"   y="30" viewBox="0 0 100 100" width="160" height="60"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
&lt;/svg&gt;</pre>

<div class="hidden">
<h6 id="topExample">topExample</h6>

<pre class="brush: css">html,body,svg { height:100% }
</pre>

<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;defs&gt;
     &lt;path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /&gt;
  &lt;/defs&gt;

  &lt;!-- (width&gt;height) meet --&gt;
  &lt;rect x="0" y="0" width="20" height="10"&gt;
    &lt;title&gt;xMidYMid meet&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMid meet" x="0" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="25" y="0" width="20" height="10"&gt;
    &lt;title&gt;xMinYMid meet&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMinYMid meet" x="25" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="50" y="0" width="20" height="10"&gt;
    &lt;title&gt;xMaxYMid meet&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMaxYMid meet" x="50" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;!-- (width&gt;height) slice --&gt;
  &lt;rect x="0" y="15" width="20" height="10"&gt;
    &lt;title&gt;xMidYMin slice&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMin slice" x="0" y="15"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="25" y="15" width="20" height="10"&gt;
    &lt;title&gt;xMidYMid slice&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMid slice" x="25" y="15"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="50" y="15" width="20" height="10"&gt;
    &lt;title&gt;xMidYMax slice&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMax slice" x="50" y="15"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;!-- (width&lt;height) meet --&gt;
  &lt;rect x="75" y="0" width="10" height="25"&gt;
    &lt;title&gt;xMidYMin meet&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="10" height="25"
       preserveAspectRatio="xMidYMin meet" x="75" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="90" y="0" width="10" height="25"&gt;
    &lt;title&gt;xMidYMid meet&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="10" height="25"
       preserveAspectRatio="xMidYMid meet" x="90" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="105" y="0" width="10" height="25"&gt;
    &lt;title&gt;xMidYMax meet&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="10" height="25"
       preserveAspectRatio="xMidYMax meet" x="105" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;!-- (width&lt;height) slice --&gt;
  &lt;rect x="120" y="0" width="10" height="25"&gt;
    &lt;title&gt;xMinYMid slice&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="10" height="25"
       preserveAspectRatio="xMinYMid slice" x="120" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="135" y="0" width="10" height="25"&gt;
    &lt;title&gt;xMidYMid slice&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="10" height="25"
       preserveAspectRatio="xMidYMid slice" x="135" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;rect x="150" y="0" width="10" height="25"&gt;
    &lt;title&gt;xMaxYMid slice&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="10" height="25"
       preserveAspectRatio="xMaxYMid slice" x="150" y="0"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;

  &lt;!-- none --&gt;
  &lt;rect x="0" y="30" width="160" height="60"&gt;
    &lt;title&gt;none&lt;/title&gt;
  &lt;/rect&gt;
  &lt;svg viewBox="0 0 100 100" width="160" height="60"
       preserveAspectRatio="none" x="0" y="30"&gt;
    &lt;use href="#smiley" /&gt;
  &lt;/svg&gt;
&lt;/svg&gt;</pre>

<pre class="brush: css">path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover, rect:active {
  outline: 1px solid red;
}</pre>
</div>

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">preserveAspectRatio="&lt;align&gt; [&lt;meetOrSlice&gt;]"</pre>

<p>Its value is made of one or two keywords: A required alignment value and an optional "meet or slice" reference as described below:</p>

<dl>
 <dt>Alignment value</dt>
 <dd>The alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the {{ SVGAttr("viewBox") }} doesn't match the aspect ratio of the viewport. The alignment value must be one of the following keywords:
 <ul>
  <li><strong>none</strong><br>
   Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. <em>Note that if </em><code>&lt;align&gt;</code><em> is </em><code>none</code><em>, then the optional </em><code>&lt;meetOrSlice&gt;</code><em> value is ignored</em>.</li>
  <li><strong>xMinYMin</strong> - Force uniform scaling.<br>
   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
  <li><strong>xMidYMin</strong> - Force uniform scaling.<br>
   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
  <li><strong>xMaxYMin</strong> - Force uniform scaling.<br>
   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
  <li><strong>xMinYMid</strong> - Force uniform scaling.<br>
   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
  <li><strong>xMidYMid</strong> (the default) - Force uniform scaling.<br>
   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
  <li><strong>xMaxYMid</strong> - Force uniform scaling.<br>
   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
  <li><strong>xMinYMax</strong> - Force uniform scaling.<br>
   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
  <li><strong>xMidYMax</strong> - Force uniform scaling.<br>
   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
  <li><strong>xMaxYMax</strong> - Force uniform scaling.<br>
   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
 </ul>
 </dd>
 <dt>Meet or slice reference</dt>
 <dd>The meet or slice reference is optional and, if provided, must be one of the following keywords:
 <ul>
  <li><strong>meet</strong> (<em>the default</em>) - Scale the graphic such that:
   <ul>
    <li>aspect ratio is preserved</li>
    <li>the entire {{ SVGAttr("viewBox") }} is visible within the viewport</li>
    <li>the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria</li>
   </ul>
   In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).</li>
  <li><strong>slice</strong> - Scale the graphic such that:
   <ul>
    <li>aspect ratio is preserved</li>
    <li>the entire viewport is covered by the {{ SVGAttr("viewBox") }}</li>
    <li>the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria</li>
   </ul>
   In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).</li>
 </ul>
 </dd>
</dl>

<h2 id="Elements">Elements</h2>

<p>Seven elements are using this attribute: {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("image")}}, {{SVGElement("feImage")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, and {{SVGElement("view")}}.</p>

<h3 id="feImage">feImage</h3>

<p>For {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code>&lt;feImage&gt;</code> element.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>xMidYMid</code> <code>meet</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="image">image</h3>

<p>For {{SVGElement('image')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code>&lt;image&gt;</code> element.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>xMidYMid</code> <code>meet</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="marker">marker</h3>

<p>For {{SVGElement('marker')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>xMidYMid</code> <code>meet</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="pattern">pattern</h3>

<p>For {{SVGElement('pattern')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>xMidYMid</code> <code>meet</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="svg">svg</h3>

<p>For {{SVGElement('svg')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>xMidYMid</code> <code>meet</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="symbol">symbol</h3>

<p>For {{SVGElement('symbol')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>xMidYMid</code> <code>meet</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="view">view</h3>

<p>For {{SVGElement('view')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>xMidYMid</code> <code>meet</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}</td>
   <td>{{Spec2('Filters 1.0')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>