이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of any SVG document but it can also be used to embed a SVG fragment inside any SVG or HTML document.

Note: The xmlns attribute is only required on the outermost svg element of SVG documents.

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

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

Attributes

baseProfile Deprecated since SVG 2
This attribute provides the minimum SVG language profile that the document requires.
Value type: <string> ; Default value: none; Animatable: no
contentScriptType Deprecated since SVG 2
This attribute identifies the default scripting language used by the SVG fragment.
Value type: <string> ; Default value: application/ecmascript; Animatable: no
contentStyleType Deprecated since SVG 2
This attribute identifies the default style sheet language used by the SVG fragment.
Value type: <string> ; Default value: text/css; Animatable: no
height
This attribute determines the height of the rect.
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
preserveAspectRatio
This attribute defines how the svg fragment must be deformed if it is embedded in a container 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
This attribute indicates which version of SVG is used for the inner content of the element.
Value type: <number> ; Default value: none; Animatable: no
viewBox
This attribute defines the bound of the SVG viewport for the current SVG fragment.
Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
This attribute determines the width of the rect.
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
x
This attribute determines the x coordinate of the svg container. It has no effect on outermost svg elements.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
y
This attribute determines the y coordinate of the svg container. It has 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 those attributes can also be used as CSS properties for that element.

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

CategoriesContainer element, Structural element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<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.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<svg>' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
baseProfile
Deprecated
Chrome Full support YesEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentScriptType
Deprecated
Chrome No support NoEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentStyleType
Deprecated
Chrome No support NoEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
heightChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
preserveAspectRatioChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
version
Deprecated
Chrome Full support YesEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
viewBoxChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
widthChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
xChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
yChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
zoomAndPanChrome Full support YesEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

문서 태그 및 공헌자

최종 변경자: Jeremie,