--- title: view slug: Web/SVG/Element/view tags: - Elemento - Referencia - SVG translation_of: Web/SVG/Element/view --- <div>{{SVGRef}}</div> <p>Uma <code><strong>view</strong></code> é uma maneira definida de visualizar a imagem, como um nível de zoom ou uma visualização de detalhes.</p> <h2 id="Usage_context">Usage context</h2> <p>{{svginfo}}</p> <h2 id="Attributes">Attributes</h2> <h3 id="Global_attributes">Global attributes</h3> <ul> <li><a href="/en-US/docs/Web/SVG/Attribute#Aria_attributes" title="en/SVG/Attribute#Core">Aria attributes</a> »</li> <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Core attributes</a> »</li> <li><a href="/en-US/docs/Web/SVG/Attribute#Global_event_attributes" title="en/SVG/Attribute#Core">Global event attributes</a> »</li> <li>{{SVGAttr("externalResourcesRequired")}}</li> </ul> <h3 id="Specific_attributes">Specific attributes</h3> <ul> <li>{{SVGAttr("viewBox")}}</li> <li>{{SVGAttr("preserveAspectRatio")}}</li> <li>{{SVGAttr("zoomAndPan")}}</li> <li>{{SVGAttr("viewTarget")}}</li> </ul> <h2 id="Example">Example</h2> <h3 id="SVG">SVG</h3> <pre class="brush: html"><svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialGradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialGradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfSizeView" viewBox="0 0 1200 400"/> <view id="normalSizeView" viewBox="0 0 600 200"/> <view id="doubleSizeView" viewBox="0 0 300 100"/> <a xlink:href="#halfSizeView"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalSizeView"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doubleSizeView"> <text x="5" y="60" font-size="20">double size</text> </a> </svg></pre> <h3 id="Result">Result</h3> <p>{{EmbedLiveSample("Example", 600, 200)}}</p> <h2 id="DOM_Interface">DOM Interface</h2> <p>This element implements the {{domxref("SVGViewElement")}} interface.</p> <h2 id="Specifications">Specifications</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('SVG2', 'linking.html#ViewElement', '<view>')}}</td> <td>{{Spec2('SVG2')}}</td> <td></td> </tr> <tr> <td>{{SpecName('SVG1.1', 'linking.html#ViewElement', '<view>')}}</td> <td>{{Spec2('SVG1.1')}}</td> <td>Initial definition</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Browser compatibility</h2> <p>{{Compat("svg.elements.view")}}</p>