svg

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

O elemento svg é um contêiner que define um novo sistema de coordenadas e janela de visualização. É usado como o elemento mais externo dos documentos SVG, mas também pode ser usado para incorporar um fragmento SVG dentro de um documento SVG ou HTML.

Note: The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

Attributes

baseProfile Deprecated since SVG 2
The minimum SVG language profile that the document requires.
Value type: <string> ; Default value: none; Animatable: no
contentScriptType Deprecated since SVG 2
The default scripting language used by the SVG fragment.
Value type: <string> ; Default value: application/ecmascript; Animatable: no
contentStyleType Deprecated since SVG 2
The default style sheet language used by the SVG fragment.
Value type: <string> ; Default value: text/css; Animatable: no
height
The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
preserveAspectRatio
How the svg fragment must be deformed if it is displayed with a different aspect ratio.
Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
version Deprecated since SVG 2
Which version of SVG is used for the inner content of the element.
Value type: <number> ; Default value: none; Animatable: no
viewBox
The SVG viewport coordinates for the current SVG fragment.
Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
x
The displayed x coordinate of the svg container. No effect on outermost svg elements.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
y
The displayed y coordinate of the svg container. No effect on outermost svg elements.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties.

Global attributes

Core Attributes
Most notably: id, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Event Attributes
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
Presentation Attributes
Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Aria Attributes
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

CategoriasElemento recipiente, elemento estrutural
Conteúdo permitidoQualquer número dos seguintes elementos, em qualquer ordem:
Elementos de animação
Elementos descritivos
Elementos de forma
Elementos estruturais
Elementos de gradiente
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<svg>' in that specification.
Candidata a Recomendação
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<svg>' in that specification.
Recomendação Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
svgChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
baseProfile
Deprecated
Chrome Full support YesEdge Full support ≤79Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
contentScriptType
Deprecated
Chrome No support NoEdge No support NoFirefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
contentStyleType
Deprecated
Chrome No support NoEdge No support NoFirefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
heightChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
preserveAspectRatioChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
version
Deprecated
Chrome Full support YesEdge Full support ≤79Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
viewBoxChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
widthChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
xChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
yChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
zoomAndPan
DeprecatedNon-standard
Chrome Full support YesEdge Full support ≤79Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.