svg

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.

* Some parts of this feature may have varying levels of support.

O elementosvg é um contêiner que define um novo sistema de coordenadas ejanela 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.

Nota:Thexmlns attribute is only required on the outermostsvg element ofSVG documents. It is unnecessary for innersvg elements or inside HTML documents.

Exemplo

html,body,svg {  height: 100%;}

html

<svg  viewBox="0 0 300 100"  xmlns="https://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

baseProfileDeprecated: The minimum SVG language profile that the document requires.Value type:<string> ;Default value: none;Animatable:no
contentScriptTypeDeprecated: The default scripting language used by the SVG fragment.Value type:<string> ;Default value:application/ecmascript;Animatable:no
contentStyleTypeDeprecated: 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 thesvg 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
versionDeprecated: 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 outermostsvg elements.Value type:<length>|<percentage> ;Default value:0;Animatable:yes
y: The displayed y coordinate of the svg container. No effect on outermostsvg elements.Value type:<length>|<percentage> ;Default value:0;Animatable:yes

Nota:Starting with SVG2,x,y,width, andheight areGeometry 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

Categorias	Elemento recipiente, elemento estrutural
Conteúdo permitido	Qualquer número dos seguintes elementos, em qualquer ordem: Elementos de animação Elementos descritivos Elementos de forma Elementos estruturais Elementos de gradiente `<a>`,`<clipPath>`,`<filter>`,`<foreignObject>`,`<image>`,`<marker>`,`<mask>`,`<pattern>`,`<script>`,`<style>`,`<switch>`,`<text>`,`<view>`