---
title: preserveAspectRatio
slug: Web/SVG/Attribute/preserveAspectRatio
translation_of: Web/SVG/Attribute/preserveAspectRatio
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>

<p>In einigen Fällen, meistens wenn man das {{ SVGAttr("viewBox") }} Attribut benutzt, ist es wünschenswert die Grafik so zu skalieren, dass sie auch mit ungleichem (non-uniform) Seitenverhältnis den gesamten viewport einnimmt. Ein anderer Fall wäre es, mit gleichmäßiger (uniform) Skalierung die Seitenverhältnise der Grafik beizubehalten.<br>
 <br>
 Das Attribut <code>preserveAspectRatio</code> legt fest, ob gleich- oder ungleichmäßige Skalierung angewandt wird.<br>
 <br>
 Bei allen Elementen, die dieses Attribut unterstützen (siehe oben), außer dem {{ SVGElement("image") }} Element, ist <code>preserveAspectRatio</code> nur wirksam, wenn auch ein Wert für {{ SVGAttr("viewBox") }} im gleichen Element angegeben wurde. Für diese Elemente ist, wenn das Attribut {{ SVGAttr("viewBox") }} nicht angegeben wurde, <code>preserveAspectRatio</code> nicht aktiviert.<br>
 <br>
 In {{ SVGElement("image") }} Elementen, gibt <code>preserveAspectRatio</code> an, wie die darin verlinkten Bilder sich in den Referenz-Rahmen einpassen und ob die Seitenverhältnisse des verlinkten Bildes, unter Beachtung des momentanen Benutzer-Koordinatensystems, beibehalten werden sollen.</p>

<h2 id="Verwendungskontext">Verwendungskontext</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Kategorien</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">Inhalt</th>
   <td>&lt;align&gt; [&lt;meetOrSlice&gt;]</td>
  </tr>
  <tr>
   <th scope="row">Animierbar</th>
   <td>Ja</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<dl>
 <dt>&lt;align&gt;</dt>
 <dd>Der <code>&lt;align&gt;</code> Parameter bestimmt ob gleichmäßige Skalierung benutzt wird und wenn dies der Fall ist, die Ausrichtungs-Methode die genutzt wird, im Fall, dass das Seitenverhältnis der {{ SVGAttr("viewBox") }}  nicht dem Seitenverhältnis des viewports entspricht. Der <code>&lt;align&gt;</code> Parameter muss einen der folgenden Werte enthalten:
 <ul>
  <li><strong>none</strong><br>
   Keine einheitliche Skalierung erzwingen. Skaliere die Grafiken des gegebenen Elements ungleichmäßig, wenn notwendig, so dass die bounding-box (Begrenzungs-Rahmen) exakt dem viewport-rectangle (Rechteck des Sichtbereichs) entspricht.<br>
   (Bemerkung: Wenn <code>&lt;align&gt;</code> den Wert <code>none</code> enthält, wird der Wert für <code>&lt;meetOrSlice&gt;</code> ignoriert.)</li>
  <li><strong>xMinYMin</strong> - Erzwinge gleichmäßige Skalierung.<br>
   Richte <code>&lt;min-x&gt;</code> der Element-{{ SVGAttr("viewBox") }} am kleinsten X-Wert des viewports aus.<br>
   Richte <code>&lt;min-y&gt;</code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</li>
  <li><strong>xMidYMin</strong> - Erzwinge gleichmäßige Skalierung.<br>
   Richte den X-Wert des Mittelpunktes der Element-{{ SVGAttr("viewBox") }} am X-Wert des viewport-Mittelpunktes aus.<br>
   Richte den  <code>&lt;min-y&gt;</code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</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>&lt;meetOrSlice&gt;</dt>
 <dd>The <code>&lt;meetOrSlice&gt;</code> parameter is optional and, if provided, is separated from the <code>&lt;align&gt;</code> value by one or more spaces and then must be one of the following strings:
 <ul>
  <li><strong>meet</strong> (the default) - 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="Example">Example</h2>

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

<p>The following elements can use the <code>preserveAspectRatio</code> attribute</p>

<ul>
 <li>{{ SVGElement("svg") }}</li>
 <li>{{ SVGElement("symbol") }}</li>
 <li>{{ SVGElement("image") }}</li>
 <li>{{ SVGElement("feImage") }}</li>
 <li>{{ SVGElement("marker") }}</li>
 <li>{{ SVGElement("pattern") }}</li>
 <li>{{ SVGElement("view") }}</li>
</ul>